React change file without rebuild and restart

Question

I create a tiny project based on node.js express and react.

My project structure is very simple

And I run node as the server and all the react code winthin client folder.

my node package.json look like as below:

"scripts": {
    "start": "concurrently \"npm run server\" \"npm run client\"",
    "server": "node ./bin/www",
    "client": "node start-client.js",
    "lint:client": "(cd ./client && npm run lint)",
    "lint:app": "eslint . --ext .js,.jsx --ignore-pattern 'client/*'",
    "lint": "npm run lint:client && npm run lint:app",
    "dev:client": "(cd ./client && npm start)",
    "dev:app": "nodemon ./bin/www",
    "build": "(cd ./client && npm run build)",
    "test:client": "(cd ./client && CI=true npm test)",
    "test:app": "jest --forceExit",
    "test": "npm run test:client && npm run test:app",
    "coverage:client": "cd ./client && npm test -- --coverage",
    "coverage:app": "jest --coverage",
    "coverage": "npm run coverage:client && npm run coverage:app",
    "install": "(cd ./client && npm install --quiet)"
  },

and package.json in client looks like as below:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "lint:scss": "stylelint 'src/**/*.scss' --syntax scss",
    "lint:scss:fix": "stylefmt --recursive 'src/**/*.scss'",
    "lint:js": "eslint . --ignore-path .gitignore --ext .js,.jsx",
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint": "npm run lint:js && npm run lint:scss",
    "eject": "react-scripts eject"
  }

and I run npm start in the root folder to start both node.js and react build.

My problem is that I need to rerun npm start while I change any react code.

So, my question is there any way could watch my code changes and no need to restart while file changes?

Answer 1

If you are asking how you can edit your code and have it live reload, I suggest using nodemon. Check out the github page: https://github.com/remy/nodemon.

I have a similar project, I handled the live reload by utilizing concurrently in my package.json script:

"scripts": {
        "serve": "nodemon index.js",
        "client": "npm run start --prefix client",
        "dev": "concurrently \"npm run serve\" \"npm run client\""
    }

the --prefix client refers to the name of my react directory. the client script runs the basic npm run start of my react server, while the dev script runs Both that and my backend.