jgthms/bulma-start

Auto-reload

hmaesta opened this issue · 4 comments

hmaesta commented

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 commented

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!

  • 👍5
  • 🎉2
  • ❤️2
walidmahade commented

@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"
}

  • 👍4
Decoherence commented

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).

  • 👍10
barisicm commented

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

  • 👍4