I have a development environment file .env.development and a production .env file for my React web app.
The .env.development has a value REACT_APP_NAME=My Test App and the .env file has the value REACT_APP_NAME=My Blue App.
This works if there is only one customer (called Blue) that uses my app. The .env has the customer address and more customer specific values as well.
Now I want to deliver the app to multiple customers with multiple customer specifications in multiple env files.
My idea is to store customer specific env files:
.env.blue
.env.red
.env.yellow
When I now (somehow) build the app, I'll get three folders
build_blue
build_red
build yellow
and each folders consumed the specific environment for the build.
Is this somehow possible?
My current workaround would be:
Rename .env.blue to .env
yarn build
publish to ftp server
Rename .env to .env.blue
Rename .env.red to .env
yarn build
...
I build a little shell script that does the job.
I'd like to share it, as someone else forces the same solution:
mv .env env
for CURR in .env.red .env.blue .env.yellow
do
mv $CURR .env
yarn build
mv build build_$CURR
cp .env build_$CURR/.env
mv .env $CURR
done
mv env .env
After that you can load the different build folders to the different servers and move the .env file to the root.
Related
I created a headless CMS project that can have different uses, now I run 2 websites on 1 server but in order to do I have 2 different folders with the same project and the only difference between them is the .env file which holds databases name, ports, and all the required data. this will cause performance usage of the server.
now I wanna run 1 express server project multiple times with different .env files. I know that we can run the server by changing 1 variable in .env like ("NODE_ENV=production node ./server.js") but I want to run the project with a totally different .env file, so in the folder, I will have .env1 .env2 .env3 and so when I run the project it run multiple time on multiple ports with multiple databases and finally I can run several websites at the same time by only 1 project.
thanks in advance for your help
You can try and use dotenv
https://www.npmjs.com/package/dotenv
You can specify which .env file path to use via the path option with something like this:
require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` })
Then run your script with that the right environment variable to get the right .env file.
You can change the path as you want, as long as it points to the right path for the right file.
Edit 1:
https://github.com/toddbluhm/env-cmd
For CLI level solution, you could use this.
npm install -g env-cmd
Then in your package.json
{
"scripts": {
"server": "env-cmd ./env1 node index.js",
"server2": "env-cmd ./env2 node index.js",
...
}
}
I am building a react app using cra, so the problem is the application just has the client side code which means there is no nodejs part.
I have two different environments one is development and one is production, as cra tells there is a order of preference:
.env
.env.development
.env.production
So if .env.production file is there in repo it will take that one and use that config based on the script that I give, if I use npm run build it will use .env.production and if I use npm start it will use .env.development if the file is there.
So I can add .env, .env.development, .env.production, but when I build the image in the Docker I can give only one command either it should be npm start or npm run build. So how should I solve this?
Install a local development environment; typically your only host dependency will be Node itself. Use the .env.development file there, via something like the Webpack dev server, with a command like yarn start.
Use Docker principally as a deployment mechanism. Your Dockerfile can build your application using the .env.production file, and then copy it into something like an Nginx container that doesn't need Node at all. It should follow the pattern in the CRA Creating a Production Build docs. Loosely,
FROM node:lts AS build
WORKDIR /app
COPY package.json package.lock .
RUN npm install
COPY . .
ENV NODE_ENV=production
RUN npm run build
FROM nginx
COPY --from=build /app/build /usr/share/nginx/html
# Base image provides default EXPOSE, CMD
This pattern gets around all of the difficulties of trying to make Docker act like a local development environment (filesystem permissions, node_modules not updating, live reloading being flaky, ...) by just using an actual local development environment; but at deployment time you get the benefits of a self-contained Docker image with no host dependencies.
I used a create-react-app.
And created environment variable files. .env.local, .env.development.local
I found that .env.development ispreferred over .env.local
And env.development.local seems to have prioty over .env.development.
If so, .env.development.local is used to override .env.development what is the purpose of .env.local?
Here's the priority of the files for the development build and the production build:
Dev.: (npm start): .env.development.local, .env.local, .env.development, .env
Prod.: (npm run build): .env.production.local, .env.local, .env.production, .env
If you ever want to use something in your local environment without being specific to the development build or the production build, you can add some variables to your .env.local file.
Source : https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
In .env.local you can set up environment variables that are specific to your local machine and it doesn't have to be on development mode to work, so variables there will work for both development and production.
In my gatsby-config.js I've used the dotenv package to set env vars
require("dotenv").config({
path: `.env.${process.env.DEPLOY_ENV}`,
});
and then in my package.json a script to deploy to different environments
"deploy:staging": "DEPLOY_ENV=staging gatsby build --prefix-paths && s3-deploy ..."
In my src/html.js, I have an asset that I want to include
<script src={`//${process.env.ASSET_HOST}/app.js`}></script>
When I log the DEPLOY_ENV from gatsby-config.js it is set to staging, however, when I log process.env in src/html.js, ASSET_HOST is set as the one in my .env.production file, so when I deploy to staging it uses assets from my production host.
I think DEPLOY_ENV (as NODE_ENV) is a reserved environment variable. That's why DEPLOY_ENV=staging is not working in your case.
The Gatsby docs on environment variables advices to use a secondary environment variable for additionnal environement support.
You can add a .env.staging file in your root folder, where you put your ASSET_HOST env var.
Then run gatsby with ACTIVE_ENV=staging gatsby develop
This is clearly something I'm misunderstanding but I'm desperately struggling to find an answer.
I've been teaching myself React with create-react-app, I've run "npm run build" to spit out my finished project, and I have the project pushed to a private bitbucket repo.
My expectation would be to then SSH to my server, and git clone the /build directory in order to make this project live. Obviously that is possible (if I removed /build from .gitignore), but since the /build directory is in .gitignore this clearly isn't the intended/desired behaviour.
So, my question is - what is? How does one publish a completed build to server without pulling from git (and obviously without FTP)?
Thanks!
The build directory is in .gitignore as it can be generated from the existing files.
To minimize upload/download time only essential items should be kept in the git repo. Anything that can be generated need not be in the repo (The build directory in this case).
If you are working on a server that has node (AWS, Heroku etc) you can git clone the entire repo on the server and then run npm run build there (after npm install). Then you can do something like
npm install -g serve
serve -s build
The serve module serves static files and you pass the build folder as a parameter.
If you are working on a more old style server like Apache static hosting with cPanel etc then you will need to upload the entire build directory containing static files and index.html.