Auto-reload

[hmaesta]

With npm start my files are re-built automatically when there are changes – but how can I set an auto-reaload feature in my browser?

Should I install babel-watch or something similar? If yes, how should the script start be?

[amphrony]

With npm start my files are re-built automatically when there are changes – but how can I set an auto-reaload feature in my browser?

Should I install babel-watch or something similar? If yes, how should the script start be?

Hi @hmaesta I got something working like you are describing. I found a tool called browser-sync that offers live-reloading. From your project directory: npm install browser-sync Now, from another terminal, in your project root directory, use the npx command to run a specific npm program: npx browser-sync start --server --files "*.html" --files "css/*.css" Now browser-sync serves my site on localhost:3000, and updates the page with changes to any html files in my root directory and to any css files in my css/ directory. Of course, you can change this configuration to work with your project. Hope this helps!

[walidmahade]

@hmaesta @amphrony you dont need a separate terminal window. We can add the "browser-sync" command at the within the "npm start".

Run " npm install browser-sync --save-dev"

then in your package.json file we will just update the script commands - add live reaload script, then add that at the end of "start" script

"scripts": { "css-build": "node-sass _sass/main.scss css/main.css", "css-deploy": "npm run css-build && npm run css-postcss", "css-postcss": "postcss --use autoprefixer --output css/main.css css/main.css", "css-watch": "npm run css-build -- --watch", "deploy": "npm run css-deploy && npm run js-build", "js-build": "babel _javascript --out-dir lib", "js-watch": "npm run js-build -- --watch", "live-relaod": "browser-sync start --server --files \".html\" --files \"css/.css\" --files \"lib/*.js\"", "start": "npm-run-all --parallel css-watch js-watch live-relaod" }

[Decoherence]

Thanks for the tip @walidmahade! Just one small tweak--you'll need to escape the double-quotes for this to work.

For example, here's my package.json file:

  "scripts": {
    "css-build": "node-sass _sass/main.scss css/main.css",
    "css-deploy": "npm run css-build && npm run css-postcss",
    "css-postcss": "postcss --use autoprefixer --output css/main.css css/main.css",
    "css-watch": "npm run css-build -- --watch",
    "deploy": "npm run css-deploy && npm run js-build",
    "js-build": "babel _javascript --out-dir lib",
    "js-watch": "npm run js-build -- --watch",
    "start": "npm-run-all --parallel css-watch js-watch",
    "live-reload": "browser-sync start --server --files \"*.html\" --files \"css/*.css\""
  },

Once you've added the "live-reload" line above, just run yarn live-reload to start (or the npm equivalent).

[barisicm]

Would it be possible to include live-reload script by default in the project ?