Sage Browsersync unresponsive

sage
,
1

Whenever I try to develop on Sage, browsersync is unresponsive.

Here is my config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/atf-theme",
  "devUrl": "http://example.test",
  "proxyUrl": "http://localhost:4000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

The weird part is that broswersync is reachable at localhost:3001, so something is going on between Sage and browsersync here. Not too sure what.

And I found a number of threads with the same issue being responded to by high ranking Sage creators rudely, is there any other place this question could be posted? These forums are kind of confusing if no one is allowed to ask questions here…

1 Like
2

Is your local dev url example.test?

3

No, the url that browsersync tries to load is localhost:3000. Not sure what the the local dev url would do in this scenario.

Edit: And thanks for the speedy reply :slight_smile:

4

IIRC browsersync needs the dev url so that it knows what to proxy to localhost:3000.

5

Hmm, maybe this is where my confusion is coming from. Do you mind if I ask why? I am not sure what the system would need from the dev url so that browsersync works if that makes any sense. I was originally guessing that that had no interaction with browsersync so I wasn’t touching it but I don’t even know what I’d replace that with to make it work. Any ideas? Shouldn’t an example url just work with an out of the box download?

6

I am not sure what the system would need from the dev url so that browsersync works if that makes any sense.

When you’re building something like a WordPress site, BrowserSync has to proxy that site–it can’t run its own internal server to serve those files. The devUrl in the Sage config is where it proxies from– the proxyUrl is where it proxies to. The Sage docs explicitly tell you to do this:

Update devUrl at the bottom of resources/assets/config.json to reflect your local development hostname.

For example, if your local development URL is https://project-name.test you would update the file to read:

...
  "devUrl": "https://project-name.test",
...

The quickstart section of the BrowserSync site also mentions that for “dynamic sites” proxy mode is required:

Dynamic sites

If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode . Browsersync will wrap your vhost with a proxy URL to view your site.

browser-sync start --proxy "myproject.dev" --files "css/*.css"

Shouldn’t an example url just work with an out of the box download?

Sage can’t possibly do this: It has no knowledge of your development environment beyond itself, and Sage does not configure your URL, hosts, etc.

As for what the value should be, I can’t tell you: It depends on how you’ve configured your local development environment. GitHub - roots/roots-example-project.com: Example Roots stack project (Trellis, Bedrock, Sage) demonstrates how that might be set up with Trellis and Bedrock, but that’s only one way of configuring your environment.

7

Hmmm, maybe the documentation should include hints as to what a ‘devUrl’ is maybe? I’ve been developing sites for a few years now and so far no other stacks have required such a concept. So I know what the url of the site I am trying to develop is, but that doesn’t relate at all into explaining what a ‘devUrl’ of the site would be. Or even where that would come from.

I understand what you are trying to say insofar as the fact that you won’t have an answer, but where and why still doesn’t make any sense.

Deepest apologies.

8

The documentation has this. I quoted it for you above. It says:

Update devUrl at the bottom of resources/assets/config.json to reflect your local development hostname.

For example, if your local development URL is https://project-name.test you would update the file to read

It’s a URL that points to a service on your local machine that serves your website locally for development purposes.

How is your local development environment set up?

9

Yeah, I found the problem. I was misunderstanding what browsersync was doing conceptually. I really appreciate your time. I’ve reconfigged local nginx and now I’ve dodged the problem. Thanks for your patience!