Can I use Build Environment Variables in Netlify with Create-React-App? - environment-variables

Question

How do I use Build Environment Variables in Netlify with Create-React-App?

Answer 1

You CAN use environment variables in your create-react-app on Netlify, but all the build constraints of the Create React App will still apply.
By default you will have NODE_ENV defined for you
Any other environment variables starting with REACT_APP_ will be available
Any other variables except NODE_ENV will be ignored
Changing any environment variables will require you to trigger a new build/deploy
IMPORTANT NOTE: No environment variables can be accessed from a create-react-app dynamically from the browser hosted on Netlify! They must be accessed at build time to be used in the static site.
From an example create-react-app repo hosted on Netlify:
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Environment Variables in a Create React App on Netlify</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and commit to your repo.
</p>
<p>NODE_ENV value is "{process.env.NODE_ENV}"</p>
<p>CUSTOM_ENV_VAR value is "{process.env.CUSTOM_ENV_VAR}"</p>
<p>REACT_APP_CUSTOM_ENV_VAR value is "{process.env.REACT_APP_CUSTOM_ENV_VAR}"</p>
<p>TOML_ENV_VAR value is "{process.env.TOML_ENV_VAR}"</p>
<p>REACT_APP_TOML_ENV_VAR value is "{process.env.REACT_APP_TOML_ENV_VAR}"</p>
</div>
);
}
}
export default App;
Produces the following at https://netlify-cra-env-vars.netlify.com/:
Setting Environment Variables in site settings on Netlify.com
In app.netlify.com, CUSTOM_ENV_VAR and REACT_APP_CUSTOM_ENV_VAR were set as follows:
Setting Environment Variables in netlify.toml
The netlify.toml environment variables were set as:
[build]
command = "yarn build"
publish = "build"
[context.production.environment]
TOML_ENV_VAR = "From netlify.toml"
REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"
[Extra] Setting environment variables in .env
You could set environment variables in a .env file at the root of your project and commit to your repository. The following is available with react-scripts#1.1.0 and higher which takes your version value of your package.json file.
.env
REACT_APP_VERSION=$npm_package_version
Note: the version (and many other npm exposed environment variables) can be accessed.
Do not put secret keys into your repository.

Answer 2

While there are many ways to accomplish this, the simplest way I found to get Netlify Environment variables into my React app was to create an .env file at the root of the project with the following content:
# React Environment Variables
# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
# Netlify Environment Variables
# https://www.netlify.com/docs/continuous-deployment/#environment-variables
REACT_APP_VERSION=$npm_package_version
REACT_APP_REPOSITORY_URL=$REPOSITORY_URL
REACT_APP_BRANCH=$BRANCH
REACT_APP_PULL_REQUEST=$PULL_REQUEST
REACT_APP_HEAD=$HEAD
REACT_APP_COMMIT_REF=$COMMIT_REF
REACT_APP_CONTEXT=$CONTEXT
REACT_APP_REVIEW_ID=$REVIEW_ID
REACT_APP_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
REACT_APP_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
REACT_APP_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
REACT_APP_URL=$URL
REACT_APP_DEPLOY_URL=$DEPLOY_URL
REACT_APP_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
Display all these env variables by placing this in a visible components:
<pre>{JSON.stringify(process.env, undefined, 2)}</pre>
Important! You will need to re-start (or re-build) the app in order to set these environment variables anytime they change.

Answer 3

The fastest way to test/accomplish this in create-react-app is
package.json
{
...
"scripts": {
"build": "export REACT_APP_COMMIT_REF=\"$COMMIT_REF\" && react-scripts build",
}
...
}
config.ts
if (!process.env.REACT_APP_COMMIT_REF) {
throw new Error("`REACT_APP_COMMIT_REF` not set")
}
console.log("REACT_APP_COMMIT_REF is", process.env.REACT_APP_COMMIT_REF)
export const config = {
GIT_SHA: process.env.REACT_APP_COMMIT_REF,
}
Thanks to Netlify's automatic deploy preview, you can verify commit SHA is shown in the application console.

Answer 4

This is how I added my environment variables from React to Netlify:
On Netlify's website go to your app's page.
Click on Site settings.
Go to Build & deploy.
Scroll down to Environment variables and add all variables you have in your .env file in React.
Redeploy your app.