Autorecompilation in react projects
React starter project (create-react-app) says 'just ctrl+s and the page will refresh with new content'. However Webstorm is inteligent and it saves when it wants. Ctrl+s works but not always.
How to set up comfortable react dev environment where after making changes to files it will automatically recompile and refresh page?
I tried :
- npm run configuration - works ok but after clicking restart new page opens and old ones are left behind because server restarts
- ctrl+s - obviously works. Happens that webstorm saves on its own and page refreshes.
- file watcher with babel - got some error in config because it thinks that handleSubmit=(event)=> {...} has error on first equality sign...
Edit1:
So I went on and tried babel+webpack. On blank project set as on tutorialspoint https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm it worked. BUT!!!!
arrow functions from ES6 do not work, and CSS's make errors on compilation. Arrow function problem I managed to resolve but the css one is bigger and I am still struggling with it... any help?
Edit2:
Don't have time and patience, slowly giving up. I removed all images (svg,ico) and it gives me this. I think it blocks entire .js bundled by webpack
The resource from “http://localhost:8080/index.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).[Learn More]
Edit3:
Added --presets es2015,react to babel filewatcher but it does not help. Still arrow functions are unexpected.
Installed npm install --save-dev babel-plugin-transform-class-properties and now arrow functions return Missing class properties transform.
Please sign in to leave a comment.
>However Webstorm is inteligent and it saves when it wants
Are you editing the files using debug session? Live Edit (that is active during debugging) auto-saves files to provide live reload - this might be the issue. Try disabling Live Edit plugin - does the problem persist?
Also, please try turning 'Save files on frame deactivation' and 'Save file automatically when application is idle' off in Preferences | Appearance & Behavior | System Settings
>Ctrl+s works but not always.
When using Webpack on Windows, it’s recommended to disable the IDE Safe write feature ( 'Use "safe write" in Settings | Appearance & Behavior | System Settings), otherwise, the app won’t be updated on-time on changes. This issue is fixed in Webpack 2
Hi Elena, thank you for your reply.
> When using Webpack on Windows, it’s recommended to disable the IDE Safe write feature ( 'Use "safe write" in Settings | Appearance & Behavior | System Settings), otherwise, the app won’t be updated on-time on changes. This issue is fixed in Webpack 2
Yes I did that but it didn't help. Problem is within webpack because it does not load properly css, ico, svg and perhaps any other type of file. Im new to all this and I think if I want to use .jpg or .mp3 I will need to install loader and then edit webpack.conf and add it there.
>
Are you editing the files using debug session? Live Edit (that is active during debugging) auto-saves files to provide live reload - this might be the issue. Try disabling Live Edit plugin - does the problem persist?
Also, please try turning 'Save files on frame deactivation' and 'Save file automatically when application is idle' off in Preferences | Appearance & Behavior | System Settings
I don't quite understand that. I had basic react app made with webstorm tutorial with create-react-app. I started it with npm start and then proceeded to edit files. Sometimes it reloaded, sometimes not. What should I do? I do not actually need webpack advanced features, just this reload option. So far I know it could be achieved also with file watcher or just forcing ctrl+s to always work.
>Problem is within webpack because it does not load properly css, ico, svg and perhaps any other type of file.
This is a configuration issue that has to be resolved by using appropriate loaders, etc
>I don't quite understand that.
I just instructed you on turning auto-saving off in webstorm, to get application reloaded on explicit Save only
>Sometimes it reloaded, sometimes not. What should I do?
looks like configuration issue, as discussed above
Yes, ok I managed to turn auto save off. Ctrl+s works fine now.
If I wanted to achieve autoreload with filewatcher for babel, what should I do? It has problems with arrow functions
try installing transform-class-properties (https://babeljs.io/docs/plugins/transform-class-properties/) and passing it to babel
Awesome!! Thank you very much. That solved the problem :)