26

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

Laura J
  • 361
  • 1
  • 3
  • 7
  • A simple google search yielded this: https://www.netlify.com/docs/continuous-deployment/#build-environment-variables – Sal Sep 27 '18 at 20:33

4 Answers4

40

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/: enter image description here

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: enter image description here

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.

talves
  • 13,993
  • 5
  • 40
  • 63
  • 2
    Have you been able to access the Netlify provided variables, like COMMIT_REF? – Casey Jan 14 '19 at 20:54
  • 6
    Figured out my above question. CRA overrides `process.env` to provide the `REACT_APP` variables. To access the netlify variables, you have to rename them in your build script like so: `REACT_APP_COMMIT_REF="$COMMIT_REF"` – Casey Jan 15 '19 at 14:35
  • Right. During build the client app code will only have access to them if they start with `REACT_APP_` – talves Jan 15 '19 at 14:47
8

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.

Beau Smith
  • 33,433
  • 13
  • 94
  • 101
1

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.

Taku
  • 5,639
  • 2
  • 42
  • 31
0

This is how I added my environment variables from React to Netlify:

  1. On Netlify's website go to your app's page.
  2. Click on Site settings. enter image description here
  3. Go to Build & deploy.

enter image description here

  1. Scroll down to Environment variables and add all variables you have in your .env file in React.

enter image description here

  1. Redeploy your app.
gignu
  • 1,763
  • 1
  • 14
  • 24