Sage 10 Browsersync not refreshing

sage
1

I’m having an issue getting Browsersync to refresh after a file edit. I run my start script, which runs with no errors, I CRTL+Click on the browsersync proxy, which is “http://sage-framework-v2.local”. It opens fine and I see my site. When I go to edit a CSS file and save the changes, I refresh the page and nothing happens. The only way to see my changes is to run the script again.

I’m using Local by flywheel to run WP locally. I have tried it will SSL enabled and disabled on Local.

Here is a snippet from my webpack.mix.js file:

const mix = require('laravel-mix');
require('laravel-mix-postcss-config');
require('laravel-mix-purgecss');
require('laravel-mix-copy-watched');
mix
.setPublicPath('./dist')
.browserSync('http://sage-framework-v2.local');

Here is a snippet from my package.json scripts:

"start": "cross-env NODE_ENV=development run-s \"build -- --watch\"",
"build": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

I run “yarn run start” to start up Browsersync. I’m not sure if I need to dig deeper into my config to see if I’m missing something.

Can anyone help?

2

If I understand you correctly, you are visiting your .local domain and expecting it to reload? AFAIK you should visit http://localhost:3000 when running BrowserSync. The protocol (http or https) depends on your setup.

After you have run yarn start and the process has fired up, doesnt a bunch of URLs show up in the terminal window? One of them should be the URL you need.

3

Correct, localhost:3000 is one of the options that comes up in the terminal. But when I open that one, it doesn’t load, it just spins forever and never loads.

4

How are you running node? In WSL 2? browser-sync/nodejs must be able to connect to the container.

5

Yes I have node installed on windows. I believe my WSL 2 is set up correctly, I’m using WSL terminal in VSCode.

What’s the best way to check if it’s connected to the container?

6

Can you wget/curl something from the running flywheel container/server from inside the WSL (2) terminal?

7

Not even sure how to do that.

8

Inside your WSL (2) terminal:

wget http://sage-framework-v2.local

Does this work and download the index/frontpage of the flywheel site?

9

Nope it does not. I tried https://google.com and I was able to get the index of google.

Log was:

Resolving sage-framework-v2.local (sage-framework-v2.local)... ::1, 127.0.0.1
Connecting to sage-framework-v2.local (sage-framework-v2.local)|::1|:80... failed: Connection refused.
Connecting to sage-framework-v2.local (sage-framework-v2.local)|127.0.0.1|:80... failed: Connection refused.
10

Alright, in what mode does your flywheel run? VM (Vagrant), Container (Docker)?
WSL currently needs some additional setup to be able to access other networks of local VMs/containers.

11

I’m not using any. I’m just using Local by flywheel. I’m not using Bedrock or Trellis, I’m only using Sage 10. I created a new WP site in local, then moved my Sage theme into the Local site directory. I can access the site and login into the WP dashboard from http://sage-framework-v2.local

12

Is your issue basically the same as this one?

13

No. Flywheel Local works just fine, my Sage template works, my build process works, everything works. The only issue I’m having is that browsersync does not refresh when I edit a file. Browsersync is in the —watch mode, but nothing happens when I edit and save a file. The only way to see my change is to run ‘yarn run start’ or yarn run build. I shouldn’t have to do this when I’m running browsersync, I should be able to save the file and just refresh the browser window and see my changes.

14

But you can’t let BrowserSync proxy the site, right? You have to access the site directly?

15

I believe so. If I click on any of the localhost links that browsersync provides after running the script, they don’t load. The only way to see it is if I’m running flywheel local and I click the proxy link in browsersync or open site from Local.

I’ve also noticed that when I edit and save a file, browsersync does nothing, it doesn’t run any compiling. I obviously don’t have something configured correctly. Do you know of any guides or anything for browsersync/Laravel mix? I’ve been searching all day today and still haven’t found a solution.

16

Why did you change this from the build script that ships with sage? It looks like you’re running webpack instead of mix.

17

I do not have an answer for that question. The previous developer did that. The webpack file under the root is, “webpack.mix.js”. Would you like to see the contents in that file and/or the package.json?

18

This topic was automatically closed after 42 days. New replies are no longer allowed.