Auto reload react server on update

Question

I'm new to React. I'm having some problems with react server. After starting the server by npm start if I work on the source code and make some changes, I have to stop the server and restart it to make that change available on the browser. Is there anyway to make it auto compile and refresh the browser on update ? (Like nodemon for node ?)

Solution

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.

Comments

[Jacob]

I normally use nodemon with babel-node. Looks like there may be other solutions out there. Haven't tried this, but: github.com/kmagiera/babel-watch

[Thidasa Pankaja]

yea @Jacob , even I'm using nodemon for Node server. But is it possible to use nodemon for react too ? And I tried installing babel-watch. But it gives me some errors. I'll check that out. Thanks

[Luis Acero]

You can see this answer, it can help you stackoverflow.com/a/65171489/13801206

[Yacine Mahdid]

Worked by adding --watch --watch-poll

[Paul]

I get the following error after npm start: [webpack-cli] Error: Unknown option '--env.ENVIRONMENT=development'