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:
baseis the directory where Netlify will run our build commands. In our case it is in the project root. So this is left empty.
publishoption points to where our build is generated. In the case of Create React App it is the
builddirectory in our project root.
commandoption 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
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!
For reference, here is the code we have so far.Frontend Source :create-a-netlify-build-script