I have a web app created with create-react-app. Instead of having just one build folder generated via "yarn build" I need to have multiple build folders each using a different configuration file (for database connection etc).
How can I do that?
Yes, it is possible. Just define another build script.
Find script in package.json something like this:
"scripts": {
"start": "node scripts/start.js",
"build": "npm run git-info && node scripts/build.js",
"test": "git-info && node scripts/test.js --env=jsdom",
"git-info": "git log -1 --pretty=format:\"%h%x09%x09%ad%x09%s\" > src/static/gitInfo.txt"
},
You can define something like this:
"scripts": {
"build": "npm run git-info && node scripts/build.js && node scripts/build2.js && node scripts/build3.js",
},
When you call yarn build , its called all commends in build section (npm run git-info && node scripts/build.js && node scripts/build2.js && node scripts/build3.js)
(yarn or npm...)
In your build script scripts/build.js, scripts/build1.js, ... you can define what you want (output folders, etc...)
Assuming you have one configuration file per environment, you could have a build script that takes the config as an argument or that reads from process.env and then you load the right .env file for each build.
"scripts": {
"build": "dotenv-cli -e .env.production node build.js",
"build:staging": "dotenv-cli -e .env.staging node build.js",
"build:dev": "dotenv-cli -e .env.dev node build.js",
}
Here, build.js would be a custom JS file that you wrote and it would build your app.
Keep in mind that you'd need to output the built files in a way that they don't overwrite each other as you build for different environments.
Related
So, we have a React project. We have 3 branches: development, qa and staging. This is the code for the API URL in the 3 envs:
development:
const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-development.com/api' : '/api';
qa:
const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-qa.com/api' : '/api';
staging:
const API_URL = process.env.NODE_ENV === 'development' ? 'https://our-website-staging.com/api' : '/api';
Of course this has a problem: we have this conflict everytime we move things between environments.
So I want to move this to ENV variables.
But I have some doubts about how to implement it. I have some questions.
Option 1: have three .env files (.env.development, .env.qa, .env.staging) each one with the correct URL, push this file to the three branches, and then add scripts to start the project like npm start development or npm start qa.
Option 2. have only one .env file and don't push it to the project, make it static for every environment. This would mean having to manually change the endpoint url everytime I switch branches when developing.
Is there a better option?
Option 1 with some change will do the job. Keep 3 environment files and instead of using them in 3 branches, keep 3 npm tasks for start and build. While building ,keeping separate folders will be useful. Let me know if you need examples for this idea. I am using env-cmd to hook my .env files to my tasks.
Update:
Below is my scripts from Package.json, where I have 2 environments test and production,
"scripts": {
"start": "set PORT=41100 && env-cmd -f .env.test react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"build:test": "env-cmd -f .env.test npm run-script build && DEL /S /Q test && move build test",
"build:production": "env-cmd -f .env.production npm run-script build && DEL /S /Q production && move build production",
"test": "react-scripts test",
"format": "prettier --write src/**/*.ts{,x}",
"lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
},
I am using Windows for development. If you are not this post may help to adjust your scripts,
Use custom build output folder when using create-react-app
Configurations flies are .env.test and .env.production and contents will look like,
REACT_APP_SOME_API = "https://myurl/api/resource"
I am running a server and a React site on the same Heroku app. My server.js is able to access the $PORT environment variable fine, but my React app is not getting anything from it (the variable is blank).
I need to be able to access the PORT environment variable because thats what my server (Radiks) is running on. From what I've read, React environment variables are only allowed if they are prefixed by REACT_APP_, so in the build script in package.json, I added a new environment variable that takes on the same values as $PORT.
My Procfile:
web: REACT_APP_PORT=$PORT node src/server.js
In package.json:
...
"scripts": {
"start": "node server.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build",
"build": "REACT_APP_PORT=$PORT react-scripts build",
"test": "react-scripts build",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
...
In my React app (App.js):
...
console.log("Connected to server:" + process.env.REACT_APP_PORT);
configure({ apiServer: process.env.REACT_APP_PORT || "http://localhost:1260", userSession})
...
(This ends up only printing out Connected to server:)
Any help would be greatly appreciated, thank you in advance!
From what I've read, React environment variables are only allowed if they are prefixed by REACT_APP_, so in the build script in package.json, I added a new environment variable that takes on the same values as $PORT.
That's new to me. I looked it up and also saw the passage that said this so I'm going to take your word for it.
web: REACT_APP_PORT=$PORT node src/server.js
Seems plausible.
"build": "REACT_APP_PORT=$PORT react-scripts build",
You are building your html, js, css files here. The port is never used. Heroku's $PORT value is dynamic. It changes from time to time. So when you are building your static files it still references a variable instead of a hardcoded value.
configure({ apiServer: process.env.REACT_APP_PORT || "http://localhost:1260", userSession}
Should be:
configure({ apiServer: "http://localhost:" + process.env.PORT || process.env.REACT_APP_PORT || 1260, userSession}
Just in case $PORT works I put it in there. If it does not exist it will pick $REACT_APP_PORT.
Your previous code was missing protocol and host.
I want to disable the source maps so that my code will not appear in the deployment link source. As you will see on the screenshot I changed the build and I created .env file but still it does not work and the code is still visible. Also the .env file won't be committed and it says Untracked Files.
Try removing map files after a build.
"scripts": {
...
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
...
}
I replace the current "build" with "build": "react-scripts build && rm build/static/js/*.map && rm build/static/css/*.map" and it works. I twill remove the js and css from the sources.
I'm trying to figure out how to run a react application (created through create-react-app) with different profiles.
That is, suppose I have several environments (local, dev, prod) and I have a fetch that refers to the backend (which is deployed on another server).
The backend has its own address for each environment. I need to somehow set global variables for different launches.
For example, in Springboot this can be done via application-"profile".properties.
I run the application through npm install -g serve & serve -s build. How to do it?
When working with create-react-app, you can configure your app using environment variables.
It is explained in detail in the documentation here: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
All environment variables need to be prefixed with REACT_APP_.
You can define profiles with different environment variables using .env files.
For example, to set an API URL in production, create a file .env.production with the following contents:
REACT_APP_API_URL=https://my.beautiful.api/
…and as default (for local development), create a file .env:
REACT_APP_API_URL=http://localhost:3001/
The environment variables from the .env.production file will be used when you build your project with npm run build
The environment variables from the .env file will be used when you work on your project in local dev mode with npm start
Example for using the environment variable in your app's code:
fetch(process.env.REACT_APP_API_URL)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
The way i handle this case is by using package react-native-config and i have create .env file (.env.dev, .env.staging, .env.prod) and i have define some scripts in the package.json. I am using react-native init project though.
as below
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h",
"clean": "cd android && gradlew clean",
"feature": "node scripts/createfeature.js",
"component": "node scripts/createcomponent.js",
"android": "cd android && gradlew app:assembleDebug && gradlew installDebug",
"storybook": "storybook start -p 7007",
"prestorybook": "rnstl",
"android-dev": "SET ENVFILE=.env.dev && react-native run-android",
"android-staging": "SET ENVFILE=.env.staging && react-native run-android",
"android-prod": "SET ENVFILE=.env.prod && react-native run-android",
"ios-dev": "ENVFILE=.env.dev react-native run-ios",
"ios-staging": "ENVFILE=.env.staging react-native run-ios",
"ios-prod": "ENVFILE=.env.prod react-native run-ios",
"build-android-prod": "SET ENVFILE=.env.prod && cd android && gradlew assembleRelease"
},
I have the following in my package json that is responsible for building and running the Angular 2 application. May I know the meaning of each of the flags in the targets ? This for deploying an Angular 2 application in IBM Bluemix
"build": "rimraf dist && webpack --progress --profile --bail",
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" "
The answer to your questions are located in the documentation for each of the node js libraries:
https://www.npmjs.com/package/rimraf
https://www.npmjs.com/package/concurrently
https://www.npmjs.com/package/tsc
https://www.npmjs.com/package/webpack
https://www.npmjs.com/package/lite-server
The build script is deleting the dist folder, then building your app with webpack.
The start script is compiling your typescript and then running the typescript compiler in watch mode and then starting lite-server concurrently.