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.
Related
I am trying to work on a package locally that is a dependency in a react project. I want to debug an issue while it's running in the main react project.
simply using yarn link creates duplicate versions of react that breaks hooks. (I also tried yarn linking react and react-dom and it get's harry and I was seeing other issues with that)
So I thought to myself, I have an idea. I can just do this:
rm ./node_modules/<my-package>/dist
ln -s /<path-to-my-dev-package>/dist ./node_modules/<my-package>/dist
And that would be the equivalent. I just need to run yarn build on my package before testing it in my app.
The problem is, I cannot get yarn to "see" the changes.
I have verified the symlink is there. I have verified the changes in the built files.
yet no matter what I do, the old non symlink'd version is what I see.
I tried:
yarn cache clean
yarn start
But it still see the old/deleted version of my pacakge (that no longer even exists) when I run my project
How can I get it to "refresh" to the new symlink'd build files?
TLDR
Even if I don't use symlinks.. any change I make to a package in node_modules is not reflected when I run the app.
So real question is, how are these node_modules being cached in create-react-app and how can I clear it so that my changes in node_modules are seen, so I can debug them.
After poking around in the source of react-scripts
It seems I need to remove ./node_modules/.cache/default-development to clear it and reload the changes.
I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.
There is some license issue with one of the dependencies getting installed with react-scripts.
Project is created using CRA, so react-scripts is marked as dependency in package.json.
If I mark react-scripts as dev-dependency, since i don't need it for production, and install all the packages using 'npm install --production', I will not be able to use build script as react-scripts is not installed.
Browsing around this I see react-scripts should ideally be a Dev-dependency.
So just wanted to check if anyone can help here, how to use build script keeping react-scripts as Dev-dependency? is using webpack as a to bundle would be the only option here?
NPM and package.json initially were created for Node.js, which is intended to either run some scripts, or to run continuously. In this cases you might need some dependencies only when you are developing (for example some debuggers, or nodemon and so on), but don't need them in production.
In case of CRA, you don't need any dependencies on production, since you are building bunch of static files. Generally, you have some build pipeline, that will install all dependencies, build your static files and then transfer only built files to produciton (where only production dependencies may be installed again, or it can be another build step in pipeline). If you don't have such pipeline, you can install all dependencies, build on server and then delete node_modules.
I am trying to add .env file and variables but I am unable to access any variable. I am using React Biolerplate Code.
I am following this React Docs File.
I have added one .env file in my root folder like this:
REACT_APP_SECRET_NAME=secretvaluehere123
And I am trying to access this using this code:
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
I am getting NODE_ENV as development but when I am trying to access:
REACT_APP_SECRET_NAME
I can't access it.
Mine react boilerplate is using:
cross-env NODE_ENV=development
in the start command.
I removed (cross-env NODE_ENV=development) from package.json but it is not working. I tried solutions from this answer: Possible answer.
According to React Docs it should work. I want to add api_url for local it should be x and for the production, it should be y:
The following issue from React Boilerplate seems to suggest a working solution:
Install env-cmd, a node module
Update your start script to use it:
{
start: "cross-env NODE_ENV=development env-cmd node server"
}
This should work if your .env is in the root folder as you've said.
Otherwise, you can specify the path of .env by doing so
{
start: "cross-env NODE_ENV=development env-cmd -f ./custom/path/.env node server"
}
I assume you are trying to access your .env variables inside index.html, if so then syntax is a bit different that in render function. Try to access it like this.
%REACT_APP_SECRET_NAME%
It looks like you're looking at two types of React starters:
React Boilerplate
Create React App
These aren't the same. I don't know React Boilerplate, but I'm not sure if they provide the same environment variables strategy with .env files as Create React App does.
Maybe have a look at the dotenv Node package and perhaps you can add that to your project. I think (not 100% sure) that Create React App uses the same one.
Seems like you have everything right. Just remember to restart your development server every time you change information in your .env file.
Also, your .env file needs to be in the root directory of your react app. You can find all this information in the React Docs - Adding Development Environment Variables In .env
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