Introduction

React offers a way of storing environment secrets inside the process.env. object which are only populated into JavaScript code during run time and hence can not be accessible unless one has access to the server to which the React application is deployed on.

The process.env object.

To store an environment secret, create a .env file in your project root. Due to security reason do not push this file to version control.

React offers a process.env object which reads values from the .env file with the following rules:

  1. Environment variable must start with a REACT_APP_ prefix to make it accessible

With the above rule:

// Inside app
const IPFS_URL = process.env.REACT_APP_IPFS_URL

// Inside app
const IPFS_URL = process.env.REACT_APP_IPFS_URL

In our .env file:

REACT_APP_IPFS_URL="ipfs.io"

Never commit environment secrets(hardcoded in actual code) or the .env file as this exposes your application to security risks.

The process.env object provided by React can not be destructured, so:

// Does not work

const {IPFS_URL} = process.env

does not work.

Read more about environment secrets in Reactjs https://reactjs.org/docs/javascript-environment-requirements.html