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.
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.
After creating a new web app with create-react-app (CRA), I need to include some environment files for configuring various endpoints. Noticed that CRA comes with the cool dotenv package all ready to go. There's only one problem with that - I would like to have dotenv read these files from within my ./environments directory and not the root directory. Is there any way to load the .env, .env.local, .env.test, etc... files in a directory separate from the root directory?
Noticing I can achieve this in my express backend server.js by simply importing like so:
require('dotenv').config({ path: `./environments/` })
Can I do the same with my client-side code in React? If so, where should I put this import? Doesn't seem to work for me.
If you created your project using CRA and want to configure dotenv to change the path from where it loads the env files, you will have to do npm eject.
Alternatively, you can use env-cmd to achieve the same:
Installation:
npm i env-cmd
Add scripts in package.json, for example:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"dev": "env-cmd -f envs/.env.dev react-scripts build",
"qa": "env-cmd -f envs/.env.qa react-scripts build",
"demo": "env-cmd -f envs/.env.demo react-scripts build"
},
After creating .env.dev, .env.qa, .env.demo in envs/ directory.
Now, you can run:
$ npm run dev // it will use envs/.env.dev file
$ npm run qa // it will use envs/.env.qa file
$ npm run demo // it will use envs/.env.demo file
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?
npm run build creates production build of the project. How do I create development build? I'm using gradle-node-plugin to build the artifact. The project has standard create-react-app configuration.
This is not really doable with just create-react-app, there is an open issue Here and it doesn't look like it will be added anytime soon.
However, you can use a package called dotenv for that, following are the steps you should take:
Install dotenv (make sure to add save dev) npm install dotenv-cli --save-dev
In package.json scripts section add new script: "build:dev": "dotenv -e .env.development react-scripts build",
And you can build for development with npm run build:dev
PS: if you want to avoid mistakenly deploying dev builds to production (as mentioned here) you can add build:prod to package.json and disable the regular build command, see code:
"build:dev": "dotenv -e .env.development react-scripts build",
"build:prod": "dotenv -e .env.production react-scripts build",
"build": "echo \"Please use build:dev or build:prod \" && exit 1",
Also note that process.env.NODE_ENV will still be production but it'll load your .env.development file
Thanks, #Moses. This is an extension to the answer posted by Moses Schwartz. You can also make the build pick the environment files dynamically by exporting the value of the environment(development, test, production) in the bash shell. And then you don't have to have different build commands for different environments.
You can use this in your package.json
"start": "dotenv -e .env react-scripts start",
"build": "dotenv -e .env.${REACT_APP_ENVIRONMENT} react-scripts build",
So when your run npm start, it will pick the environment values from .env
and when you run npm run build, it will pick the environment values from .env.{REACT_APP_ENVIRONMENT}
To define the REACT_APP_ENVIRONMENT, you can do:
export REACT_APP_ENVIRONMENT="development" or
export REACT_APP_ENVIRONMENT="test" or
export REACT_APP_ENVIRONMENT="production"
Hope this helps. This will help in staging the react application for multiple environments.
Thanks to #Tx_monster comment
github.com/Nargonath/cra-build-watch
A script for create-react-app that writes development builds to the disk
npm install -D cra-build-watch
package.json:
{
"scripts": {
"watch": "cra-build-watch"
}
}
npm run watch