htmlnode.jsnpmnode-modulespage-refresh

npm start: Manual browser refresh to reflect changes

I'm learning Node.js and in the introductory course, I had to set-up node and npm. Now according to the instructor, after typing "npm start" in the terminal and then making changes in the index.html file, the browser is supposed to automatically refresh the tab for the changes to take effect, but in my case every time I make a change I had to manually refresh Safari tab to see the changes.

Please note I'm using the same machine, i.e. there is no server and client side per se. Operating system is macOS Catalina 10.15.6.

Any possible fixes please?

Thanks

File Structure: enter image description here

package.json file:

  {
  "name": "confusion",
  "version": "1.0.0",
  "description": "This is a website for Ristorante Con Fusion",
  "main": "index.html",
  "scripts": {
    "start": "npm run lite",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server"
  },
  "author": "Raffay",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.5.4"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "nodemon": "^2.0.4",
    "popper.js": "^1.16.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/RaffaySajjad/conFusion.git"
  },
  "keywords": [
    "conFusion"
  ],
  "bugs": {
    "url": "https://github.com/RaffaySajjad/conFusion/issues"
  },
  "homepage": "https://github.com/RaffaySajjad/conFusion#readme"
}

Starting nodemon from terminal using command "nodemon" prints following error

raffaysajjad@192 ~ % cd /Users/raffaysajjad/Desktop/Full\ Stack\ Web\ Development\ \(React\ Specialization\)/Course\ 1\ \(Front-End\ WebUI\ Frameworks\ \&\ Tools\ -\ Bootstrap\ 4\)/Week\ 1/Exercise/conFusion
raffaysajjad@192 conFusion % nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: html,json
[nodemon] starting `node index.html`
/Users/raffaysajjad/Desktop/Full Stack Web Development (React Specialization)/Course 1 (Front-End WebUI Frameworks & Tools - Bootstrap 4)/Week 1/Exercise/conFusion/index.html:1
<!DOCTYPE html>
^

SyntaxError: Unexpected token '<'
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
[nodemon] app crashed - waiting for file changes before starting...
Solution

  • this is done by using the npm package of nodemon,

    How to Use

    npm install -g nodemon

    and in your package.json use this

     "scripts": {
    "start": "nodemon npm run lite"
  },

    more about nodemon learn here