react-inject-env-crypto

react-inject-env-crypto is a tool that allows you to inject your environment variables after building the static files, allowing you to deploy the same build to multiple environments quickly. This tool is build on top of react-inject-env and adds capability of encrypting the environment variables on server side and which then can be decrypted on the client-side. This makes sharing of sensitive environment variable more secure.

Usage

1. Install Dependencies

• Install react-inject-env-crypto

npm install react-inject-env-crypto --save-dev
yarn add react-inject-env-crypto --dev

• Install crypto-js

npm install crypto-js
yarn add crypto-js

2. Update code on frontend-side

• Add the following to index.html

<script src='/env.js'></script>

• Create a new file called env.js and copy the following code:

import CryptoJS from 'crypto-js'

const decryptEnv = (content, key) => {
  try {
    if (!key || !content) return {}
    const decryptedContent = CryptoJS.AES.decrypt(content, key).toString(CryptoJS.enc.Utf8)
    const result = JSON.parse(decryptedContent)
    return result
  } catch (err) {
    return {}
  }
}

const getWindowEnv = () => {
  const source = window['env']
  if (typeof source === 'string') {
    return decryptEnv(source, 'YOUR_SECRET_ENCRYPTION_KEY') || {}
  }
  if (typeof source === 'object') {
    return source || {}
  }
  return {}
}

const env = { ...process.env, ...getExtraEnv() }

export { env }

• Replace all instances of process.env with the newly created env variable

import { env } from './env'

export const App = () => {
  return (
    <div style={{backgroundColor: env.REACT_APP_COLOR}}>
      <span>{env.REACT_APP_MAIN_TEXT}</span>
    </div>
  )
}

3. Build your static files

If you are using create-react-app, the command should be npm run build or react-scripts build.

4. Inject environment variables

[env variables] npx react-inject-env-crypto set --key YOUR_SECRET_ENCRYPTION_KEY

Pass in all your environment variables.

# with a black background
REACT_APP_COLOR=black REACT_APP_MAIN_TEXT="Black Background" npx react-inject-env-crypto set --key YOUR_SECRET_ENCRYPTION_KEY

# with a blue background
REACT_APP_COLOR=blue REACT_APP_MAIN_TEXT="Blue Background" npx react-inject-env-crypto set --key YOUR_SECRET_ENCRYPTION_KEY

# for windows
set REACT_APP_COLOR=navy&& set REACT_APP_MAIN_TEXT=Navy Background&& react-inject-env-crypto set --key YOUR_SECRET_ENCRYPTION_KEY

Additional options

-d / --dir: The location of your static build folder. Defaults to ./build

-n / --name: The name of the env file that is outputted. Defaults to env.js

-v / --var: The variable name in window object that stores the environment variables. The default is env (window.env). However if you already have a variable called window.env, you may rename it to avoid conflicts.

.env / dotenv

.env files are supported. react-inject-env-crypto will automatically detect environment variables in your .env file located in your root folder.

Note: Environment variables passed in through the command line will take precedence over .env variables.

Docker / CICD

npx react-inject-env-crypto works well with both Docker and CI/CD.

FROM node:16.10-slim
COPY . /app
WORKDIR /app

RUN npm install
RUN npm run build

EXPOSE 8080

ENTRYPOINT npx react-inject-env-crypto set && npx http-server build

docker build . -t react-inject-env-sample-v2

docker run -p 8080:8080 \                   
-e REACT_APP_COLOR=yellow \
-e REACT_APP_LOGO_URL=./logo512.png \
-e REACT_APP_MAIN_TEXT="docker text" \
-e REACT_APP_LINK_URL=https://docker.link \
react-inject-env-sample-v2

Information

Why do I need this?

A typical CI/CD process usually involves building a base image, followed by injecting variables and deploying it.

Unfortunately React applications does not allow for this workflow as it requires environment variables to be present before building it.

There have been a few workarounds, with the most common solution being to load environment variables from an external source. However this now causes the additional problem that environment variables can only be accessed asynchronously.

Why do I need react-inject-env-crypto over react-inject-env

In case you want to have addtional layer of security in passing env.js, you should use react-inject-env-crypto. Otherwise, simply use react-inject-env.

Goals

react-inject-env-crypto attempts to solve this problem in the simplest, and most straightforward way with the following goals in mind:

1. Does not require a rebuild
2. Minimal code change required
3. Allows synchronous access of environment variables
4. Encrypted way of serving environment variables to react app.
5. Supports a wide amount of tools and scripts
6. Works with command line environment variables
7. Simple and straightforward

Compatibility

react-inject-env-crypto was built with support for both create-react-app and dotenv.

However due to the simplicity of it, it should work with almost all scripts and tools.

Reference

It is an extension of awesome tool react-inject-env.