Before we can add our project to Netlify we just need to set up a build script. If you recall, we had configured our app to use the REACT_APP_STAGE build environment variable. We are going to create a build script to tell Netlify to set this variable up for the different deployment cases.

Add the Netlify Build Script

Start by adding the following to a file called netlify.toml to your project root.

# Global settings applied to the whole site.
# “base” is directory to change to before starting build, and
# “publish” is the directory to publish (relative to root of your repo).
# “command” is your build command.

[build]
  base    = ""
  publish = "build"
  command = "REACT_APP_STAGE=dev npm run build"

# Production context: All deploys to the main
# repository branch will inherit these settings.
[context.production]
  command = "REACT_APP_STAGE=prod npm run build"

# Deploy Preview context: All Deploy Previews
# will inherit these settings.
[context.deploy-preview]
  command = "REACT_APP_STAGE=dev npm run build"

# Branch Deploy context: All deploys that are not in
# an active Deploy Preview will inherit these settings.
[context.branch-deploy]
  command = "REACT_APP_STAGE=dev npm run build"

The build script is configured based on contexts. There is a default one right up top. There are three parts to this:

  1. The base is the directory where Netlify will run our build commands. In our case it is in the project root. So this is left empty.

  2. The publish option points to where our build is generated. In the case of Create React App it is the build directory in our project root.

  3. The command option is the build command that Netlify will use. If you recall the Manage environments in Create React App chapter, this will seem familiar. In the default context the command is REACT_APP_STAGE=dev npm run build.

The production context labelled, context.production is the only one where we set the REACT_APP_STAGE variable to prod. This is when we push to master. The branch-deploy is what we will be using when we push to any other non-production branch. The deploy-preview is for pull requests.

Commit the Changes

Let’s quickly commit these to Git.

$ git add .
$ git commit -m "Adding a Netlify build script"

Push the Changes

We are pretty much done making changes to our project. So let’s go ahead and push them to GitHub.

$ git push

Now we are ready to test our frontend workflow!