CODEWITHSUNDEEP
reactjshot-reload
Raghul SK
Raghul SK

Reputation: 1390

React Component not reload in browser after save the changes in localhost

I created a new react project using Create-React-App. In the old projects, Whenever I did the changes in the component and save the component it will reflect in the browser, but in the new project when I saved the changes in the code the browser did not reload and not reflect the changes. So I stopped the running process and again giving the npm start

Here is my package.json file.

{
  "name": "new-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "redux-devtools": "^3.5.0",
    "webpack": "^4.41.5"
  }
}

Can I add something in package.json to reload the browser automatically whenever I done changes?

Upvotes: 5

Views: 13952

Answers (3)

GBMan
GBMan

Reputation: 495

If you prefer not modifying the package.json you can reinstall your project.

Two ways for that.

With git:

  1. Push your project on git
  2. Clear the project's folder on your computer
  3. git clone https://github.com/my-account/my-project.git
  4. npm install

Without git:

  1. Back up the content of your project except for node_modules
  2. Clear the project's folder except for package.json
  3. npm install
  4. Paste the files you backed up

Upvotes: 0

Pavan Nagadiya
Pavan Nagadiya

Reputation: 682

I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:

{
//...
"scripts": {
    "start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
    // ...
}
// ...
}

Now, using npm start and then changing src files I can see changes in the browser.

Please here https://webpack.js.org/configuration/watch/ for more options.

Upvotes: 1

mohamed ibrahim
mohamed ibrahim

Reputation: 583

Install your app again using : 

npx create-react-app appname

And don't edit package.json

Upvotes: 0

Related Questions