I am building an ReactJs application that has many profiles.
The application will run in a development environment, qa environment and a production environment.
Given this, I would like to set on the host machine some environment variables and be able to get this on the .env file.
My need is to do something like:
.env file
REACT_APP_BASE_SERVICEX_URL=${ENV_ON_HOST_BASE_SERVICEX_URL}
REACT_APP_BASE_SERVICEY_URL=${ENV_ON_HOST_BASE_SERVICEY_URL}
Is this possible?
PS: The application will be running in Kubernetes.
1- Install env-cmd package from npm
2- Make a file called .env.envName in your project root, sush as .env.staging, .env.production, ... to differentiate between variables in each environment.
3- Inside the env file add your variables in key/value representation with prefix of REACT_APP
4- Inside your package.json. change the scripts builds.
"scripts": {
"start": "env-cmd -f .env.staging react-scripts start",
"build:staging": "env-cmd -f .env.staging react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
5- -f flag is for custom env file paths as the default is in the project root otherwise you should specify the actual path
"start": "env-cmd -f ../../.env.staging react-scripts start",
Are you just asking how to handle environment variables?
You can put any variables that you need in the .env, .env.local, .env.development or .env.production file and then copy them over to the .env file when deploying.
It is custom to fully capitalize variables within the .env file. To use them within the code you place process.env prior to it.
In .env file :
DB_URL = http://fwohfjiowjfwefjpw
In react :
const DBURL = process.env.DB_URL
.env file
REACT_APP_BASE_SERVICEX_URL=HOST_BASE_SERVICEX_URL
And where you want to use the env variable, use this in the following way -
const URL = process.env.REACT_APP_BASE_SERVICEX_URL
Related
I’ve deployed a Nextjs app using docker to AWS infrastructure. The index page (/) loads fine, however, the content of index is loaded for every other route including the api routes as well as the js and css resources.
I’ve attempted running the app with just next start as well as building a standalone version and running node server.js. Both ways result in the same thing.
Dockefile looks like this
FROM node
ARG VERSION
ENV VERSION=${VERSION}
ARG COMMIT_REF
ENV COMMIT_REF=${COMMIT_REF}
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED 1
WORKDIR /usr/src/app
RUN apt-get update
RUN apt-get upgrade -y
RUN rm -rf /var/cache/apt/lists
COPY src ./src
COPY node_modules ./node_modules
COPY package.json ./
COPY next.config.js ./
COPY next-env.d.ts ./
COPY babel.config.js ./
COPY tsconfig.eslint.json ./
COPY tsconfig.json ./
COPY types.d.ts ./
COPY public ./public
RUN npx next build
ADD ./docker/start.sh /start.sh
RUN chmod +x /*.sh
ENTRYPOINT ["/start.sh"]
Has anyone seen this behaviour before?
Not sure if this helps but,
we have a web app in react and we did have this problem also.
The problem you are facing probably isn’t in your Dockerfile but in your build/config file.
We've fixed the issue by adding GENERATE_SOURCEMAP=false to the build tag script in package.json eg.
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And then we ran a npm run build command.
Hope this helps!
Here is the way in which I set up different API URL based on the current environment:
Development and Production, on npm, commanded setup env.
Is there are some more elegant solution cus my URLs are long:
Package.json
"scripts": {
"start": "REACT_APP_BASE_URL=http://test-dev-1323211.us-east-1.elb.amazonaws.com/api/3.0 react-scripts start",
"build": "REACT_APP_BASE_URL=http://test-1323211.us-east-1.elb.amazonaws.com/api/3.0 react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "husky install",
},
You can use .env files using dotenv library.
See: https://create-react-app.dev/docs/adding-custom-environment-variables
EDIT:
From the docs
Adding Development Environment Variables In .env
To define permanent environment variables, create a file called .env in the root of your project:
REACT_APP_NOT_SECRET_CODE=abcdef
Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.
You can read more at the CRA docs or at DotEnv docs.
Solution
Basically you can use .env and .env.development.local to separate the URLs.
.env:
REACT_APP_BASE_URL=http://test-1323211.us-east-1.elb.amazonaws.com/api/3.0
.env.development.local:
REACT_APP_BASE_URL=http://test-dev-1323211.us-east-1.elb.amazonaws.com/api/3.0
My react app is running on http://localhost:3000 and I wanted to setup the env variable for the different environment development, production, staging and local.
my react app url for different environment are(I am mocking my urls)
local = http://localhost:3000
development = http://react.developmet.com
production = http://react.production.com
stage = http://react.stage.com
looking for a solution how i can setup the env var for different environment.
Adding my approach to the same thing just wanted to know is this approach is good or not.
and how I can achieve same for staging environment
I have created an environment.js file.
let BASE_URL = http://localhost:3000
//check for environment
if (process.env.REACT_APP_ENV = "development") {
BASE_URL = "http://react.developmet.com"
}
if (process.env.REACT_APP_ENV = "production") {
BASE_URL = "http://react.production.com"
}
export {BASE_URL}
and also updated my run scripts
"scripts": {
"dev":"REACT_APP_ENV=development npm start",
"prod":"REACT_APP_ENV=productionnpm start",
"build:dev":"REACT_APP_ENV=development npm run-script build",
"build:prod":"REACT_APP_ENV=production npm run-script build",
}
You can use env-cmd to manage your build for multiple env files:
Installation:
yarn add env-cmd -D
Create env files
Create a folder envs at root project level
Create .env files (as many as you need)
e.g. envs/.env.dev, envs/.env.prod, envs/.env.staging etc
A Sample .env (e.g. envs/.env.prod) file
REACT_APP_API_HOST=http://my-prod-api.example.com
REACT_APP_ANY_OTHER_VAR=some_value
Configure scripts in package.json file:
"scripts": {
"start": "react-scripts start",
"eject": "react-scripts eject",
"dev": "env-cmd -f envs/.env.dev react-scripts build",
"prod": "env-cmd -f envs/.env.prod react-scripts build",
"staging": "env-cmd -f envs/.env.staging react-scripts build",
},
Make the build:
$ yarn dev // to make build for dev env
$ yarn prod // to make build for prod env
$ yarn staging // to make build for staging env
PS: You can use npm commands as well. I used yarn only for example purpose.
When I do: npm run build I would like to create a folder inside the build folder and move all build output inside that folder.
At this moment I'm doing this:
"prebuild": "npm run build:clean",
"build": "react-scripts build",
"postbuild": "mkdir dest && cp -r build/* dest && npm run build:clean && mv dest build",
"build:clean": "rimraf build/*",
Clear build folder
Build app
Create dest folder
Copy all that is inside in build folder in dest folder
Clear build folder
Move dest folder inside build folder
How can I reduce it?
Simple answer is: you can't change it.
Build output is fixed in create-react-app and can't be changed, and this decision has its roots in philosophy of CRA.
Citing Dan Abramov, co-author of create-react-app:
I don’t think it is strange this feature is missing. Largely, it is intentional. It ensures most people have similar setups, and people can build tools (e.g. for deployment) assuming the same directory structure.
However, you can use trick backed-up by him, which is using mv to move build output:
"build": "react-scripts build && mv build {YOUR_PATH}"
I obtained already existing React project and I'm supposed to continue with it.I never used React before. I need to use web worker in the project - there's a project that suits my needs: Worker Loader
The suggest one adds this to their webpack.config.js:
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
Then use worker like this:
import Worker from './file.worker.js';
const worker = new Worker();
But even though I can see that my React project uses webpack and babel o the background, there is no .babelrc or webpack.config.js in the project. This is how I run the project:
npm start
That actually runs react-scripts start based on what I see on package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Neither webpack nor babel are in package.json dependencies, so I really have no idea how are they run by React. I would really appreciate if someone explained to me how does it work and how to configure webpack to use worker loader.
You need to run npm run eject first.
This command will copy all of your configuration files into your project(including webpack.config.js). However, run this command only if you MUST because although you will have full control over your configuration, you'll be on your own. React won't manage the configuration for you anymore.
Not sure 100%, but I think this app was created using react starter kit called Create React App and it comes with a package called react-scripts which is a wrapper around the build tools -- webpack being one of them. So lookup that stuff in npm. It might be all taken care of for you
Also, see what you have under node_modules directory --i am guessing it's all there