Someone please help me with below
i have installed npm i env-cmd
i have 2 files in the src folder
.env.development
REACT_APP_URL="DEVELOPMENT"
.env.production
REACT_APP_NAME="PRODUCTION"
package.json file
"start": "env-cmd .env.development react-scripts start",
"build": "env-cmd .env.production react-scripts build",
But i get nothing while do this in app.jsx
{process.env.REACT_APP_NAME}
i also dont get any error in cmd
well you have REACT_APP_URL in dev but you're trying to access REACT_APP_NAME so of course it doesn't work
change this: REACT_APP_URL="DEVELOPMENT" to REACT_APP_NAME="DEVELOPMENT and it should work
Related
when I issue below command to start react app facing this error, can anyone help.
npm start
react_template#0.1.0 start
env-cmd -f .env.dev craco start
'env-cmd' is not recognized as an internal or external command,
operable program or batch file.
Did you install cross-env with npm? Try running
npm install
This should work.
its really hard to tell without taking a look at your package.json file. but i see that you're using env-cmd package which provides custom run and build commands and lets you have multiple environment declarations.
here is an example of what you can do with it in your package.json (this example is a nextjs example)
"scripts": {
"dev": "env-cmd -f env/.env.local next dev",
"build:pre": "env-cmd -f env/.env.pre next build",
"start:pre": "env-cmd -f env/.env.pre next start",
"build:stg": "env-cmd -f env/.env.stg next build",
"start:stg": "env-cmd -f env/.env.stg next start",
"build:rc": "env-cmd -f env/.env.rc next build",
"start:rc": "env-cmd -f env/.env.rc next start",
"build:prod": "env-cmd -f env/.env.prod next build",
"start:prod": "env-cmd -f env/.env.prod next start"
},
as you can see i created a build and run command for each environment and i also provided a .env.ENVNAME file for my config. the env/,env.ENVNAME is the path of my .env files. the env folder is in the root of the project.
here is how to run and build the app with env-cmd for above scripts:
npm run build:Env_name
for example for building my stg env:
npm run build:stg
or for starting the app
npm run start:Env_name
for example:
npm run start:stg
in your local you can use npm run dev to run the application and npm run build to build it.
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 :)
In my project I have many git branch names (dev, test, stage ....) and I am building my React app using Docker, and using Jenkins to deploy it.
What I want is to specify my REACT_APP_BASE_URL based on my current branch name because I have several base URLs, for example (https://abc.dev.example, https://abc.test.example ..), and I want to run the matched name.
What I did was:
create .env.dev :
REACT_APP_BASE_URL= 'https://abc.dev.example'
create .env.production :
REACT_APP_BASE_URL= 'https://abc.production.example'
create .env.test :
REACT_APP_BASE_URL= 'https://abc.test.example'
npm install env-cmd --save
My script:
"start": "env-cmd -f .env.dev react-app-rewired start",
"build": "react-app-rewired build",
"build:develop": "env-cmd -f .env.dev react-app-rewired build",
"build:test": "env-cmd -f .env.test react-app-rewired build",
"build:demo": "env-cmd -f .env.demo react-app-rewired build",
It's always looking for the url on .env.production file for all branches because it considers the production during the build process, so how can I solve that?
Any ideas?
For setting the API URL and key value , i have created .env.development and .env.qa for test and QA environment. But how to deploy this file in azure devops,like how to setup the environemtn variable in pipeline.
can someone guide me through steps.
We have a similar setup, multiple dotenv files for each environment. In the package.json, we've defined multiple build scripts:
"scripts": {
"build": "react-scripts build",
"build:test": "env-cmd --no-override .env.tst react-scripts build",
"build:qa": "env-cmd --no-override .env.qa react-scripts build",
"build:prod": "env-cmd --no-override .env.prod react-scripts build"
},
Don't use .env.production or .env.test however, otherwise, these will be used automatically by react-scripts in every build or test command.
I have successfully implemented the feature in Azure Devops.
I have created seperate zip file by creating new task for test and qa,buildid with the suffix mentioning the environment in the Build Pipeline. Similarly we need to mention the given zip folder name in Test and QA task in release pipeline.
How to use .env in react . I can get access to .env.development and .env.production with
"start":"react-scripts start",
"build": "react-scripts build",
How to get access to another like .env.staging ?
I gave like this
"build_staging": "set REACT_APP_ENV=staging & react-scripts build",
but not working.
Any suggestions please.
To keep things consistent across linux(my production server) and windows(my development server) I use cross-env
npm install --save cross-env
and my scripts look like this
"scripts": {
"dev": "cross-env NODE_ENV=development node server",
"build": "cross-env NODE_ENV=production next build ",
"start": "cross-env NODE_ENV=production node server"
},
so to set a custom env like REACT_APP_ENV you'll need to
"build_staging": "cross-env REACT_APP_ENV=staging react-scripts build",
and you can access it in your javascript code using
process.env.REACT_APP_ENV
also to start a staging server you might want to add
"start_staging": "cross-env REACT_APP_ENV=staging react-scripts start"
more about this here
[CONTEXT]
- I've created React project with Create React.
- Running on Windows 10
- Using VSCode IDE
- I have the file .env.development on above /src folder.
- My code has console.log(process.NODE_ENV) and console.log(process.REACT_APP_YOUR_KEY)
[PROBLEM]
When I'm running the program with npm start, the browser prints 'development' for NODE_ENV, but for my React .env variable, it prints undefined.
I try to run npm start with changing the default script of package.json to this start script: set REACT_APP_YOUR_KEY && react-scripts start. Then there isn't any undefined, all works well. 🤨
[SOLUTION]
The cause was that the file .env.development is not detected correctly. My hypothesis is the environment development file, Windows or VSCode don't detect well.
Windows File Explorer files
VS Code explorer. Look up the icon of the files 🤔
You have to change the file name from .env.development to .env.
[SOLUTION]: I've created env.js as shown below.
env.js placement
after that i have added in index.html the script below
my env.js content
NB: i can acces my env.js var without import them (it seems the best way for me)