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
Related
I have a project from github and it has the recoil function. I'm trying npm install to run npm but it's not working:
Then I tried npm install --legacy-peer-deps, and got
61 vulnerabilities (4 low, 5 moderate, 39 high, 13 critical)
If I write npm start I got
Debugger attached.
> tgp-core-api#0.1.0 start
> PORT=3006 react-scripts start
'PORT' is not recognized as an internal or external command,
operable program or batch file.
Waiting for the debugger to disconnect...
It still says your debugger attached when you run "npm install".
Try to stop debugging (Debug > Stop Debugging or Shift+F5).
well i found out that inside my package.json i had :
"scripts": {
"start": "Port=3006 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
so i deleted Port=3006, with that i got:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
and it worked!
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
Im running a react-app on localhost and this error popped out. I have installed the correct dependencies with npm install, but for a reason i don't know it doesn't find the command react-scripts.
Nice to meet you.
Please check your node version.
After setup your node.exe.
And set the below contents to your package.json file.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Then please execute the command line.
"npm start"
Best regards.
I want to deploy my react app to production (using heroku). When the app is deployed, React dev tools indicates that my app is running in development mode
I pushed the application to heroku : https://lesamisdhubert.herokuapp.com/
I tried to set an environment variable :
heroku config:set NODE_ENV=production
however, when I console.log(process.env.NODE_ENV), It returns development
I also tried npm run build before pushing to production but it hasn't worked
here are my scripts in the package.json file :
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
however console.log('node env --->', process.env.NODE_ENV); returns 'development'
Does anybody knows how I can set my react app into production mode ? Is this a problem with npm run build ?
Thanks a lot, I really don't understand where this can come from ...
I replaced in package.json :
"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
}
I also created a new heroku app and it seems to work
When configuring enviroment vars in heroku you have to append REACT_APP_VARIABLENAME and then set its value otherwise you can't have access to the env variable.
take a look at: https://github.com/mars/create-react-app-buildpack#compile-time-configuration
you can do this in the heroku client
hi I am a newbie in reactJS and am learning reactjs recently by kickstarting from the create-react-app and modifiying it . My doubt is that how the create-react-app detects the changes in files and autimatically rebuilds them . I used a normal nodejs + react + webpack app and in that i have to manually specify the npm run build and node start in the package.json like as
"scripts": {
"build": "webpack",
"start": "node server"
},
in case the above for the create-react-app differ as
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "npm run build-css && run-p -ncr watch-css start-js",
"start-js": "react-scripts start",
"build": "run-s -n build-css build-js",
"build-js": "react-scripts build",
"test": "run-s -n build-css test-js",
"test-js": "react-scripts test --env=jsdom",
"build-css": "node-less-chokidar src",
"watch-css": "node-less-chokidar src --watch",
"eject": "react-scripts eject"
}
What makes the create-react-app and a normal node+webpack+react app differ in rebuilding the source ? (Starting the server seems not a deal because once its started it will be runing on a port for both cases . For Server restart both apps needed to kill the process and start again . So building the source is my only concern) . Any help is appreciated .