Search code examples
wordpressbrowser-sync

WordPress + BrowserSync + Local by Flywheel - CSS & JS Live Reload Workflow not working

I was trying to get this setup to work for a while and there is no support or similar issues over the web. There is actually one closed topic on Local community but no solution at all.

So, my setup is:

  • Local by Flywheel server for WordPress
  • VS Code with Node installed
  • @wordpress/scripts to bundle all my CSS and JS files
  • browser-sync to live reload

Here is my .json file:

{
  "name": "mywebsite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "live": "npm-run-all --parallel sync start",
    "sync": "browser-sync start -p 'mywebsite.local' --files '**/*.php' 'build/*.js' 'build/*.css'",
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "dev": "wp-scripts start",
    "devFast": "wp-scripts start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@wordpress/scripts": "*",
    "browser-sync": "^2.27.9",
    "node-sass": "^7.0.1",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5"
  }
}

So, the Browser Sync starts nicely in the command line, when starting it opens a new browser windows with this Error below. There is nothing in the Local's log as they advice on this error screen.

enter image description here

Do anyone encounters similar problems and have the knowledge how to fix that? I would be super grateful for any hints, walkarounds or solutions or maybe someone can share the other simple setup ideas to achieve the live reload functionality?

Solution

  • I had the same issue, it comes from the combination of npm-run-all and browser-sync. Instead of using npm-run-all, I used browser-sync as a webpack plugin.

    1. Install browser-sync-webpack-plugin
    npm install browser-sync-webpack-plugin -D
    1. Then add browser-sync-webpack-plugin as plugin in your webpack.config.js file. As you use @wordpress/scripts, your config will be :
    const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 
module.exports = {
    ...defaultConfig,
    plugins: [
        ...defaultConfig.plugins,
        new BrowserSyncPlugin({
          // browse to http://localhost:3000/ during development,
          // ./public directory is being served
          host: 'localhost',
          port: 3000,
          proxy: 'http://YOURDOMAIN.local/'
        })
    ]
};

    Take care to replace YOURDOMAIN.

    1. Now when you run :
    npm start

    browser-sync will be automatically launched.