Create-react-app: How do I disable the hot reload feature ? (Ideally disable it only when I change css ?)

[JimmySplit]

[Timer]

Hi! Sorry, but disabling refresh is not possible in the default setup.

If you want to customize this, you can either npm run eject and then configure Webpack as you like, or fork react-scripts and maintain your own version that doesn’t refresh automatically.

Is there a specific problem you're working against?

See https://github.com/facebookincubator/create-react-app/issues/1674 and https://github.com/facebookincubator/create-react-app/issues/1428.

[JimmySplit]

Yes I am working againts the fact that I have setup chrome to automatically save changes made in CSS directly to the file system , so that I can make the designing process a little more flexible, but now each time I make a change on CSS the whole application reloads , so Imagine me using Chrome dev tools to change my css top: attribute on an element each px that I change is one autoreload.

[viankakrisna]

@Timer CSS should be hot reloaded, isn't it?
@JimmySplit can you confirm that the app is only refreshing if you edit CSS from the devtool? How about editing it manually eg from a text editor?

[JimmySplit]

Its because I am not compiling the CSS, instead I insert the css file inside the public folder and then insert it on the main html page (the one that you could also import google analytics for example) if that make any sense

Because that way, I get to live edit the css using dev tools, and the changes can get persisted on the disk..

[viankakrisna]

I see. It's because CRA detected a change in the public folder for any files and reload the page for that. To support your use case we should enable source maps for imported CSS files, but it has FOUC issue https://github.com/facebookincubator/create-react-app/pull/591. I have tried to hack it out here https://github.com/webpack-contrib/style-loader/pull/221 but it's not accepted 😄 . So, currently, it's not supported.

In the meantime, importing CSS from src will give you hot reloading (not ideal if you already accustomed to dev tool editing). Or add new env variable to disable reloading on public folder (not ideal because it adds another config to CRA) which is not accepted judging from https://github.com/facebookincubator/create-react-app/issues/1428

FWIW, I think opening text editor and browser side by side is good enough to replace dev tool editing. (CRA hot reloads CSS in src and automatically vendor prefix it) so you don't depend on dev tool feature. It will make your workflow the same regardless of the browser that you are using.

[b-gran]

For anyone who's still trying to temporarily disable HMR for this use case, there's a pretty easy solution to this 😄 . This definitely works for Chrome and probably other browsers.

On the page you'd like to temporarily disable HMR:

1. Open up the Developer Tools
2. Open up the _"Request Blocking"_ tab in the Console
   
   
   
   • 
   
   

1. Add the following URI to the block list (it's the URI of the webpack dev server): localhost:3000/sockjs-node/*
2. Refresh the page

Changes to the application will no longer refresh the page. To re-enable HMR, simply unblock the webpack dev server URL in the _"Request Blocking"_ tab: