I switched to ReactJS from pure JS for my web frontend. I made my dev workflow slower. It used to be that I edit a file, refresh browser and it's there. But now, I have to run "npm run build" and wait for a few seconds before refreshing browser.
Is there a way I can do it without building? Or is there a way I can choose not to build a minified JS to save time?
1. Use webpack watch mode to build automatically.
Add --watch param to the script that starts your build
"start": "webpack --watch"
2. Hot module replacement
You can configure webpack to use hot module replacement, which basically puts your code in live edit mode and you don't have to refresh you browser to get the changes. Configuration might be tricky but will save you a lot of time.
For more info, refer official docs - Hot Module Replacement
3. Use create-react-app
If you are just starting your project, use create-react-app to generate the react boilerplate. It comes with built-in hot module replacement and optimal confguration for both development and production.
Navigate to a new dir and run
npx create-react-app your-project-name
This will create a new directory with the name you provided and everything else from there will be straight forward.
More info here - create-react-app
Related
I'm in WSL2, and my react app does not update any changes at all, only updates when re-running "npm start"
I've tried "npm install react-dotenv" and creating an .env file with
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
doesn't work
tried in the package.json
"start": "CHOKIDAR_USEPOLLING=true react-scripts start"
doesn't work
any suggestions? I don't even mind manually refreshing the browser, it's just that it won't update unless I restart the whole thing.
You do not have to install an additional dotenv package since Create-React-App already supports environment variables natively. However if you use environment variables, you need to prefix them with REACT_APP. e. g. REACT_APP_MY_VARIABLE.
Also note: Whenever you update an environment variable you have to restart the app.
Take a look at the official CRA docs.
Now for the reloading problem. There are a couple of possible solutions:
Add a .env file to your project without third party package and
define a variable named FAST_REFRESH=false. (CRA advanced
configuration)
If you are using a Virtual Machine try adding CHOKIDAR_USEPOLLING=true to your .env file.
There is another common problem in CRA ^17.0.1 with hot reloading (Github issue - Hot Reload stopped working with React "^17.0.1")
if (module.hot) module.hot.accept();
Finally (and this is the most likely solution in my opinion) try to move your project folder to somewhere, where npm can automatically recompile in WSL. E. g. move project from your desktop to your actual home directory.
When I do a build of React using Laravel Mix using:
yarn run production
Everything shows as successful but when I test in the browser the dev tools show the following...
How do you ensure that Laravel mix builds React that shows as production using the React Develop Tools?
What is run with yarn run production is determined in your package.json file at "scripts": {"production": .... Would be helpful to know what that says. It might be as simple as adding NODE_ENV=production before that script.
Normally you would use yarn to build your production files, which are just static files. You would then use Laravel or whatever server to serve these production files created in the build/ folder.
I have set up a project using ionic framework v4 with React and wish to add a webpack loader to allow importing graphql queries from .graphql files, as described here.
I can't find any official documentation on how to change anything relating to webpack (for example, nothing here), and existing answers on the subject seem to apply only to using Angular or v2/v3 of ionic.
The Apollo docs describe an alternative way of solving this for Create-React-App (which I may try as a workaround), but I might wish to change webpack config in other ways, so I am also asking how to solve this question more generally.
You can customize webpack using react-app-rewired
If you don't use ionic cli to build and run your app, you can use a normal install of react-app-rewired.
If you use the ionic cli, there is an additional step/trick:
Ionic uses react-scripts under the hood, so you need to trick it into using react-app-rewired instead of react-scripts.
Here is a simple and low-invasive way to have Ionic cli use react-app-rewired instead of react-scripts: add this package.json postinstall script:
{
"scripts": {
"postinstall": "cd node_modules/.bin && mv react-scripts react-scripts-real && ln -s ../react-app-rewired/bin/index.js react-scripts",
...
}
}
Update: This fails when you run ionic build because it defaults back to using react-scripts build.
Not sure why I didn't see this before, but taking a closer look at the bootstrapped ionic project, it’s clearly using create-react-app/react-scripts.
Although CRA demands you do a one-time eject in order to configure anything relating to the build, I was able to use react-app-rewired and customizable-cra to customise the build and start scripts. As far as I can tell this works fine with ionic.
I'm developing a web app in an environment consisting of Meteor, React, TypeScript and Webpack. Every time I make a change to a file I have to run webpack to recompile the full project and this can take a long time (20-30 seconds). Does anyone know if there is any way to recompile only the modified file (as the Webpack Hot Module Replacement or the React Hot Loader module works) within a Meteor app?
Thanks in advance!
Solved! It was as easy as using Webpack Watch. I created a script dev in package.json that runs meteor & webpack and added watch: true in webpack.config.js (it would be the same adding --watch in the script) so runing npm run dev starts in parallel Meteor and Webpack watching for file changes. When a file is changed, it recompiles in about just 2 seconds and refreshes the browser.
I am working on React web app and to deployed it I used create-react-app. There is a file called registerServiceWorker.js which takes care of initializing the service worker. I want to cache some files on install event however the self.addEventListener('install', event gives me the error "Unexpected use of 'self' no-restricted-globals". I manage to get rid of that by changing self to window, however the install event is never being fired. How to use this "build in" service worker in React? Or can I create the other service worker?
After struggling with this myself, I finally figured out the following pieces of information:
the serviceWorker.js file in the default CRA project is not the same sort of service-worker.js file described by the PWA documentation from Chrome and Mozilla. That's not where the self.addEventListener statements go. They go into the file referenced by CRA's serviceWorker.js, specified by the string
const `swUrl = ${process.env.PUBLIC_URL}/service-worker.js`
By default, that service-worker.js is a file that you cannot access or modify! You will need to create your own service-worker.js file in the /public folder and point swUrl to it instead. It should point to the location as a string, statically, which means it will not get integrated as part of the build process and self will correctly refer to the module instead of the global context.
I found the simple solution. This utility is perfect for that: https://github.com/bbhlondon/cra-append-sw.
cra-append-sw
Utility tool to append custom code to ServiceWorker created by Create
React App.
It allows to keep the default CRA configuration (no ejecting). It
simply appends custom code to the ServiceWorker file created by CRA
build scripts. By default, it bundles the code using very basic
Webpack+Babel configuration (this can be omitted; see options).
Installation
$ npm install cra-append-sw --save
Usage
"start": "react-scripts start && cra-append-sw --mode dev
./custom-sw.js",
"build": "react-scripts build && cra-append-sw
./custom-sw.js",