I have a React app that I run with the command:
npm run dev
This launches the app and uses the .env.local file.
I want to be able to configure a file called .env.production that will be used instead of .env.local when I run the command npm run prod.
These are my current scripts:
"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
How can I do this?
install npmjs.com/package/env-cmd
"scripts": {
"start": "react-scripts start",
"start:local": "env-cmd -f ./.env.local react-scripts start",
"start:Dev": "env-cmd -f ./.env.development react-scripts start",
"start:QA": "env-cmd -f ./.env.test react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Create a new scripts key and use REACT_APP_ENV :
"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prod" : "REACT_APP_ENV=prod npm run dev"
},
Related
I want to build React project as per environment like development, staging and production.
below is snapshot of scripts section inside package.json file.
"scripts": {
"start development": "REACT_APP_ENV=development react-scripts start",
"start staging": "REACT_APP_ENV=staging react-scripts start",
"start production": "REACT_APP_ENV=production react-scripts start",
"build development": "REACT_APP_ENV=development react-scripts build",
"build staging": "REACT_APP_ENV=staging react-scripts build",
"build production": "REACT_APP_ENV=production react-scripts build",
"build": "react-scripts build",
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
So as per scripts, 'build development' should build project for development environment.
Now as i run following command in project home directory by specifying environment, ( staging builds for staging env)
npm run 'build staging'
below shown error is displayed and command exits
> testapp#0.1.0 build staging
> REACT_APP_ENV=staging react-scripts build
sh: 1: /tmp/build: not found
Interesting thing is that, the command runs perfectly fine on other systems and creates build folder without any issues but it is throwing error on my current system.
All of my systems are running Ubuntu 20.04.4 LTS
Guys any idea about what might be the issue?
Adding cross-env as dependency and changing scripts to use _ instead of space as shown below resolved the issue
"scripts": {
"start_development": "cross-env REACT_APP_ENV=development react-scripts start",
"start_staging": "cross-env REACT_APP_ENV=staging react-scripts start",
"start_production": "cross-env REACT_APP_ENV=production react-scripts start",
"build_development": "cross-env REACT_APP_ENV=development react-scripts build",
"build_staging": "cross-env REACT_APP_ENV=staging react-scripts build",
"build_production": "cross-env REACT_APP_ENV=production react-scripts build",
"build": "react-scripts build",
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Now the following command runs on all platforms without any issues
npm run build_staging
I want to use firefox with create-react-app start, but I keep when I follow the advice of adding.
"scripts": {
"start": "BROWSER='firefox' react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
or (without quotes),
"scripts": {
"start": "BROWSER=firefox react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
I get the error message:
'BROWSER' is not recognized as an internal or external command, operable program or batch file.
So how would I specify the BROWSER variable in my package.json file? I'm using Windows 10.
I have made a React web app: https://github.com/Hamsterland/mal-rewrite
It's gh-pages contains the static files. However, if you navigate to https://hamsterland.github.io/mal-rewrite/ the screen is just black.
I'm not sure what's wrong.
package.json important bits:
"homepage": "https://Hamsterland.github.io/mal-rewrite",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I access my media fine, https://hamsterland.github.io/mal-rewrite/static/media/background.db542337.png works for example.
I am working on a react project, I have several environments, when I run a build for one environment e.g npm run build-sit, the JavaScript files in the build folder contain information about other environments. How do I make sure that the JavaScript files in that build folder only contain information about the environment I am building for.
Here is my scripts in package.json
"scripts": {
"start": "set REACT_APP_ENV=dev && react-scripts start",
"build": "react-scripts build",
"build-test": "set REACT_APP_ENV=test && react-scripts build",
"build-sit": "set REACT_APP_ENV=sit && react-scripts build",
"build-staging": "set REACT_APP_ENV=staging && react-scripts build",
"build-production": "set REACT_APP_ENV=production && react-scripts build",
"build-company1-uat": "set REACT_APP_ENV=company1Uat && react-scripts build",
"build-company2-uat": "set REACT_APP_ENV=company2Uat && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
I have a constants.ts file where I set the urls for the different environments
"scripts": {
"start": "HOST=`0.0.0.0` react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
How to run reactjs in different host;
I am trying to run react inside docker so,
How can i run react on 0.0.0.0:8000
PLease have a look
Expose 8080 port first when you run your container docker run -p 8080:8080.
Add port set in your package.json file, { start: PORT=8080 react-scripts start }