BrowserSync with Nodemon and Express Server

Question

For the life of me I can't get Browser Sync and Nodemon to run nicely alongside my Express server. I have tried every combination I can imagine.

My Express server runs at port 5000 which I can open and view, nodemon runs when changes are made, great but the browser still doesn't 'hot refresh' so to speak. I would like for the browser window to either refresh or open a new tab after nodemon has restarted the server.

package.json scripts

"scripts": {
"start": "node app.js",
"dev": "set NODE_ENV=DEV&& nodemon app.js 5000 browser-sync start --proxy localhost:5000 -e * --ignore=node_modules --reload-delay 10 --no-ui --no-notify",
"ui": "node app.js browser-sync start nodemon app.js --port=5001 --proxy=localhost:5000 -e * --ignore=node_modules --reload-delay 10 --no-ui --no-notify",
"ui2": "nodemon start & browser-sync start --proxy 'localhost:5000' -e * --ignore=node_modules"
},

I just want to start my express server, listen for changes with nodemon then restart, then either reload browser window or launch a new one to see the changes. Please help me understand what I am missing?

Answer 1

In case someone has the same problem, the aha moment was when I realized I needed to open a 2nd terminal window to run browser-sync. And using the below scripts in package.json now works beautifully!

So first run npm run start/dev depending if you want server restarts on changes or not then open a 2nd terminal window and run npm run ui`. In my case my app.js is launching on port 8000.

package.json

 "scripts": {
    "start": "node app.js",
    "dev": "nodemon -e * app.js",
    "ui": "browser-sync start --proxy localhost:8000 --files=**/*  --ignore=node_modules --reload-delay 10000 --no-ui --no-inject-changes"
  },

app.js - const port = process.env.PORT || '8000';