Yarn start, browsersync doesn't serve theme/site

sage
1

I just got started with sage 9.0.0.alpha.4.

I ran yarn and after running:

yarn start

two pages open. A browsersync page showing:

Local

http://localhost:3005
new tab
sync all

External

http://192.168.0.105:3005
new tab
sync all

Proxying:

http://roderik.dev

Current Connections

Connected browsers will be listed here.

And the localhost:3006 which keeps loading but does not show anything.

The console shows the following:
yarn run v0.15.1
$ webpack --hide-modules --watch --config assets/build/webpack.config.js

Webpack is watching the filesā€¦


[BS] Proxying: http://roderik.dev
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3006
    External: http://192.168.0.105:3006
 --------------------------------------
          UI: http://localhost:3002
 UI External: http://192.168.0.105:3002
 --------------------------------------
[BS] Watching files...

My config.js lists the following:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
    "templates/**/*.php",
    "src/**/*.php"
  ],
  "publicPath": "/wp-content/themes/roderik-theme/",
  "devUrl": "http://roderik.dev",
  "proxyUrl": "http://localhost:3005",
  "cacheBusting": "[name]_[hash:8]"
}

I wonder what I am doing wrong. What should I change to see my theme in the browser?

2

Hey @emmerink, I had a similar issue last week in this thread.

I just re-installed a fresh vers. of Roots, and Iā€™m getting what seems the exact same error you described.

In my thread above, they seemed to think it might be a Sage9 bug, but I donā€™t think thatā€™s the case because I installed Sage8.5 and got the same issue.

1 Like
3

Are these defined correctly? If you go to http://roderik.dev in your browser are you able to see your site?

Your thread is about PHP errors, this seems to be related to Browsersync configuration (unless the non-BS session is also not working).

The same issue as OP, or the same issue as the thread you linked? Because if itā€™s the same issue as the thread you linked, thatā€™s not applicable to a Sage 8 install. Sage 8 issues should also be unrelated to this thread.

Letā€™s try to keep this on topic if possible.

4

I should have clarified that after I tried what @QWp6t suggested, then I got the same error as OP. Browsersync launches, but I just get a blank-white localhost and dev url in the browser.

Edit: Just to clarify further, usually I run into this issue if I find conflicting hosts in the etc/hosts file. Iā€™ve checked that to make sure the dev env is clean.

5

@ben Ah I see. I was assuming that Sage would set up the dev server as well.

If I understand it well, I should now use the http://localhost:3005 for development and not the devUrl http://roderik.dev.

6

Sage does not come with a webserver, you can look into our Trellis project if thatā€™s something that you need.

The devUrl needs to be set to the URL of your local development environment for the website.

Well, for some of the developmentā€¦ you donā€™t want to be editing pages or other areas of the WP admin from your Browsersync session. You should still do that on your normal local development URL.

7

It sort of works, but if I make changes to the scss files, the changes will only be applied after CTRL+C to close the ā€˜yarn run startā€™ and restart it with ā€˜yarn run startā€™.
Then I see the newly defined colors.
However I see a black block in the upper right corner that the css is being rebuild, but it doesnā€™t give me any changes after that has been finished. Restarting yarn is kind of a hassle.

8

I have the same problem, try with alpha 1. No problem with alpha 1.

9

Do you know how I can downgrade my theme?
Or do I have to delete and recreate the theme if I want to use alpha 1?

10

For the best result, i suggest you to try on another fresh installation.
The assets and templates structure are the same. Then if all works, copy and paste your assests and tamplates (from alpha 4) to new installation (alpha 1). Alpha 1 download archive is available here: https://github.com/roots/sage/releases

No problem with this release for me, all works perfectly and super fast than alpha 4 (w/ webpack 2)
Let me know.

11

Found the problem that caused this for me.

Running 'yarn build' displayed errors about line endings in CRLF and not LF in some .js files.

After fixing those errors my 'yarn run start' started working as well.

It would maybe be great to add those warnings when running 'yarn run start' too?

12

is there a way to see yarn log files? The terminal clears itself during the process.

Yarn build works fine. Just no main.css file when using yarn start as i get an error and borwsersync isnā€™t updating any css to the dev site.

13

Are you having a problem?

If the Sage yarn build process encounters a problem youā€™ll see it in the terminal if you scroll up.