I want to try the serve package with a React App by doing the following step:
npm install serve --s
then replace the npm start command in package.json like this:
scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then I run npm start i got the error in the console "Uncaught SyntaxError: Unexpected token '<'" etc
however if I uninstall serve --s and put back the package.json like this :
scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then run npm start again it work fine on my local machine, so i think i am doing something wrong in the process and i would like to know why I have issue with the serve package.
Looks like you haven't built your /build folder with app bundle. It must be like this:
npm start - to run and edit code
npm run build - to build a bundle(creates/rebuild a /build folder)
serve -s build - serve/start the /build folder
In my project environment variables are defined in package.json start script which works fine in Mac but not on windows. Is there standard way to make commands OS agnostic?
"scripts": {
"start": "MY_PATH='' MY_SHA=`git rev-parse --short HEAD` react-scripts start",
"build-local": "MY_PATH='' MY_SHA=`git rev-parse --short HEAD` GENERATE_SOURCEMAP=false react-scripts build",
"build-pcf": "MY_PATH=/abcd/web MY_SHA=`git rev-parse --short HEAD` GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Another problem is git commands(ex: git rev-parse --short HEAD) are not parsed in windows unless I point npm shell to bash location. It is a work around.
To use env variables the best approach is to use a .env document. React will automatically get the variables of that file. You can define your variables this way:
SECRET=YOUR_SECRET_HERE
This is for development ONLY, because you could leak that information if you deploy your app that way. You can get additional information here
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?
I have a react application that connect to micro services. I have different micro services urls per environment. I therefore have multiple env files: .env, .env-develoment-local, env-development,...
When I start the app locally, the app pick up the setting in the .env.development-local which is expecetd.
When I do npm run build I noticed that since it creating a production build, it picks up the .env file.
My question is how can configure the build such a way that it picks other .env files like .env.development or .env.qa, etc... ?
I was able to get this working using https://github.com/toddbluhm/env-cmd
I did the following:
npm install --save-dev env-cmd
Then updated package.json accordingly:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.env.stage npm run-script build"
}
Then run the following command:
npm run build:stage
I'm using the following environment variable in my create-react-app:
console.log(process.env.REACT_APP_API_URL) // http://localhost:5555
It works when I run npm start by reading a .env file:
REACT_APP_API_URL=http://localhost:5555
How do I set a different value like http://localhost:1234 when executing a npm run build?
This is my package.json file:
{
"name": "webapp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.9.0"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I imagine you got this working by now, but for anyone else that finds this, you set your default environment variables in a .env file at the root of your "create-react-app" project.
To separate out the variables used when using npm start and npm run build you can create two more env files - .env.development and .env.production.
npm start will set REACT_APP_NODE_ENV to development, and so it will automatically use the .env.development file, and npm run build sets REACT_APP_NODE_ENV to production, and so it will automatically use .env.production. Values set in these will override the values in your .env.
If you're working with other people, and have values specific to your machine only, you can override values in .env.development and .env.production by adding those values to a new file - .env.development.local and .env.production.local respectively.
EDIT: I should point out that the environment variables you have set must start with "REACT_APP_", eg. "REACT_APP_MY_ENV_VALUE".
EDIT 2: if you need more than just development, and production, use env-cmd, as specified by this comment.
You can use the process.env.NODE_ENV like so:
const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;
You would need to have REACT_APP_PROD_API_URL and REACT_APP_DEV_API_URL set.
Or, if the production URL is always the same, you could simplify it:
const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;
Create React App sets the NODE_ENV to 'production' for you on build, so you don't need to worry about when to set it to production.
Note: you must restart your server (e.g. run npm start again) to detect environment variable changes.
If you'd like to have separate dotenv files for building and/or deploying to separate environments (stage, prod) then you can use env-cmd like so:
npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build
Then just update your package.json accordingly:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.stage.env npm run-script build"
},
Then to build you'd just run this shell command:
npm run build:stage
Also, it can be done without additional dependency:
"scripts": {
"build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
"build:staging": "REACT_APP_ENV=staging npm run build",
"build:production": "REACT_APP_ENV=production npm run build"
},
And have .env.staging, .env.production files accordingly
install 'env-cmd' package
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build",
"start:qa": "env-cmd -f .env.qa react-scripts start",
"build:qa": "env-cmd -f .env.qa react-scripts build"
},
in local if we want to run qa environment use
npm run start:qa
If you are using Heroku for deployment, then follow this:
Go to your app settings >> click on 'Reveal Config Vars' button
Add your variables
Use them in the app in the same way as you are using previously ex. process.env.REACT_APP_VARIABLE_NAME
Re-Deploy the app
and that's it...