I used this solution but it didn't work for me.
My React app(18.2.0v) was initialized with CRA(5.0.1v).
My dotenv version is 16.0.3.
On development version I get package.json file version successfully, but on build version I can't get it.
My .env.staging file:
NODE_ENV=development
REACT_APP_VERSION=$npm_package_version
My package.json scripts:
{
...
"version": "0.1.0",
...
"scripts":
{
...
"start": "react-scripts start",
...
"build:staging": "npm run clean && env-cmd -f .env.staging react-scripts build",
...
}
...
}
My Login.tsx display version this way:
...
const { REACT_APP_VERSION } = process.env;
...
return (
...
<h1>V{REACT_APP_VERSION}</h1>
...
)
...
Dev mode display print
Build mode display print
I have an .env.development with the same content as the current .env.staging quoted above that will be used for another build version.
Have someone any idea how to solve this issue, please?
I solved this when I installed dotenv-cli and changed package.json build:staging script to "npm run clean && dotenv -e .env.staging react-scripts build"
Related
I am new to react and setting up environment variables for my project. Here is what I did..
added .env-cmdrc.json as follows
{
"development":{
"REACT_APP_BASE_URL": "https://servername:port/"
},
"staging":{
"REACT_APP_BASE_URL": "http://servername:port/"
},
"local":{
"REACT_APP_BASE_URL": "http://localhost:port/"
}
}
installed npm
npm install env-cmd or npm install -g env-cmd
edited package.json as follows:
"start:development": "env-cmd -e development react-scripts start",
"start:staging": "env-cmd -e staging react-scripts start",
"start:local": "env-cmd -e local react-scripts start",
"build:development": "env-cmd -e development react-scripts build",
"build:staging": "env-cmd -e staging react-scripts build",
tried - npm run start:development
was giving me env-cmd error
again ran
npm install env-cmd
Now tried - npm run start:development
Failed to find .rc file at default paths: [./.env-cmdrc,./.env-cmdrc.js,./.env-cmdrc.json] at getRCFile
I am doing it first time and would appreciate any help..what am I missing here..
I tried your code, but it works well.
Check your code, ensure the location of your config file .env-cmdrc.json, it should be placed under root dict of your project (the same level with package.json)
I would suggest using dotenv package instead of env-cmd.
install the package - npm i dotenv
Create a environment file in your root directory - .env
Declare a variable - REACT_APP_URL=http://localhost/....
Use the variable - process.env.REACT_APP_URL
In order to start the React application you need to check your package.json file and make sure it contains something like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
If that's in place you can run the following command: npm start
Now you can start coding :)
Now It doesn't run on my ubuntu machine. When I run the npm start command it says missing script start. Is there any method to run the downloaded project?
In your package.json file, check scripts property:
"scripts": {
"clean": "rimraf build/*",
"copy-assets": "ts-node src/tools/copyAssets",
"tsc": " tsc",
"build": "npm-run-all clean tsc copy-assets",
"dev": "nodemon --watch src -e ts,ejs,css --exec npm run dev:start",
"dev:start": "npm-run-all build start",
},
Looks like start script does not exist. Instead run the appropriate one from the scripts section.
I deployed my react app on heroku and chose github as deployment method. To hide the source code, I added GENERATE_SOURCEMAP=false in a .env but it didn't work. In package.json also I tried adding
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build" but it didn't work. I also added it in Config Vars in the heroku project settings.
Please help!
If you are using linux adding it to the package.json will do the trick:
"scripts": {
...
"build": "GENERATE_SOURCEMAP=false react-scripts build"
},
I need to build bundle-stats.json to work with webpack-bundle-analyzer.
Here how i'm trying build it , but it does not creating any file.
npm run build -- --stats
Could you please help me
The --stats flag was added back into CRA in this PR.
So you can use webpack-bundle-analyzer again.
stats have been remove from CRA see
It's recommended to use source-map-explorer
npm i -g source-map-explorer
source-map-explorer 'build/static/js/*.js'.
You can do it with #craco/craco which is a tool to use a custom webpack configuration with Create React App.
As explained on this article:
Install #craco/craco and webpack-bundle-analyzer
npm install #craco/craco webpack-bundle-analyzer --save-dev
Create a file named craco.config.js in the root of your project folder with this content:
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = function () {
return {
webpack: {
plugins: [new BundleAnalyzerPlugin({ analyzerMode: "server" })],
},
};
};
Add this "analyze" script to your package.json scripts sections:
{
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
+ "analyze": "craco build"
}
}
Now run:
npm run analyze
Because you set the analyzerMode to "server" in your craco config, you will automatically get your browser open with the results served as a webpage (you can use the "json" option if you want the output without involving the browser)
Firstly, add the webpack-bundle-analyzer to your dev dependecies:
yarn add -D webpack-bundle-analyzer
Then you can sequentially run commands:
yarn build -- --stats
yarn webpack-bundle-analyzer ./build/bundle-stats.json
Or, for your convenience, you can add the script to your package.json:
"scripts": {
...
"analyze": "yarn build -- --stats && yarn webpack-bundle-analyzer ./build/bundle-stats.json"
}
Instead of yarn you can use npm, just edit the command accordingly.
Then you can run the script using yarn analyze or the scripts runner UI available in VS Code like I do. You can also add a script for deleting the build folder if this already exists before creating a new one. For this, dependently on your platform, you can use the cmd or bash command:
cmd: if exist build\\ ( rmdir /s /q .\\build )
bash: [ -d 'build' ] && rm -r build
So the final solution will look like this:
"scripts": {
...
"analyze": "yarn remove_build && yarn build -- --stats && yarn webpack-bundle-analyzer ./build/bundle-stats.json",
"remove_build": "if exist build\\ ( rmdir /s /q .\\build )"
}
package.json
"scripts": {
"start": "export HTTPS=true&&PORT=3000 react-scripts start"
vs
"start": "set HTTPS=true&&PORT=3000 react-scripts start"
}
export: Used to set an environment variable in bash (Linux/Mac).
set: Used to set an environment variable for CMD (Windows).
If you want to support both of the environments, you can use cross-env and refactor your package.json as following:
"start": "cross-env HTTPS=true PORT=3000 react-scripts start"
(don't forget to install cross-env in the project dev dependencies)