How to Deploy a React Monorepo to Netlify Using Lerna and GitHub Actions

A step-by-step guide on how to deploy a simple React App Monorepo to Netlify using Lerna and GitHub Actions

Photo by Сергей Христинич from Pexels

Deploying web apps has never been easier. With continuous integration and delivery (CI/CD) solutions increasingly available for developers worldwide, there’s no reason for you not to use them. Automation is here to save you precious time; stop SSH-ing to your server, and let’s start using it.

It’s very easy to host your front-end app. You only need to code the app using JavaScript. Usually a framework, build it, and upload it to a hosting service like Netlify or Vercel. In this tutorial, you will learn how to deploy a React app to Netlify, but there’s a catch. You will deploy this app from a Monorepo using Lerna and Github Actions!

Now, without further ado, let’s get to it.

Creating Your Netlify Site

This section will cover using the Netlify CLI to establish a blank Netlify site. Then, it will be installed for us by npm. In my scenario, the host OS for the npm installation is Ubuntu 20.04.

1. Install the Netlify CLI

Install the Netlify CLI by running the following:

npm install netlify-cli -g

Run this command to verify that it was correctly installed when the installation is finished:

netlify

2. Log in to Netlify from the CLI

Netlify requires you to verify yourself before you can use the CLI.

netlify login

Then you will be redirected to:

Authorize CLI.

3. Creating a blank site

Use this command to create a blank site once you’ve finished logging in:

netlify sites:create --name <site name>

4. Retrieving your Site ID and personal access token

Your site ID and personal access token are needed for continuous remotely-development.

Retrieve the site ID in the site settings—image by the author.

You can retrieve your site ID by:

1. Going into the site settings.
2. Copy the API ID value.

The personal access token would then be obtained as the next step.

Go to the user settings—image by the author.

Go to the user settings.

Get a new access token—image by the author.

You have to make a new access token:

1. Go to the Applications tab.
2. Click “New access token.”

You’ll need the access token displayed on the screen. Copy it and save it.

Retrieving the GitHub Access Token

A personal access token is necessary to automate GitHub Actions deployments. You’d need to open your GitHub Developer Settings here.

GitHub developer settings. Image by the author.

Open your developer settings page:

1. Go to the personal access tokens page.
2. Create a new token for GitHub Actions.

Generating a new personal access token. Image by the author.

Configure your personal access token:

1. Input a name for your Token.
2. Check the workflow to give access to GitHub Actions.
3. Scroll to the bottom of the page.
4. Click the “Generate token” button.

The Token was successfully generated. Image by the author.

Copy and save the access token somewhere for later use.

Set Repository Secrets

After we’ve retrieved the access tokens and site ID, we’ll save them inside the repository secret.

Note: Why do we need to use repository secrets? To prevent sensitive IDs or tokens from being pushed to the repository.

Open your repository settings—image by the author.

In the repository settings:

1. Click Secrets➜Actions on the left-side tab.
2. Click “New repository secret.”

Create a new secret. Image by the author.

On the “New secret” page, input the secret name and value. When finished, click the “Add secret” button. You’ve added three secrets: the GitHub personal access token, the Netlify personal access token, and the Netlify site ID.

Creating the CI/CD Workflow

In a monorepo, you must be more creative in utilizing Lerna to install and build your app. Adding scripts in the root package.json file is a viable solution for this.

Because you will be using Yarn, you run yarn to install the dependencies of the root package.json file with the ignore-scripts and silent flags to install without executing the post-install scripts and to suppress the output of the installation.

Running lerna bootstrap will install all the dependencies inside the sub-packages.

Finally, running lerna run build will run every single build script inside every package.json file in the sub-packages.

The next step is to use GitHub Actions to establish a CI/CD workflow. It demands that we create a YAML workflow.

GitHub Actions workflow that triggers push/pull requests to the main branch.

Assuming that all deployments will come from the main branch, you must enable builds to start after pushing to the main branch to begin your workflow.

Workflow to install and build React web projects using Lerna

You can use an action by borales to execute Yarn while building. You can check the Yarn Actions detail here.

The results of the build will be in the ./packages/react-webapp/build folder (assuming that you named your React subpackage react-webapp).

Workflow to push React web builds to Netlify.

In this last workflow, you can access the secrets we previously kept on our repository settings. After a successful build, manually upload the files to Netlify. Here is a snippet from nwtgck that you can use. You can examine the Netlify Actions package here.

This gist below allows you to copy the complete workflow:

The entire gist of React web workflow

You should have completed your CI/CD workflow. Save the process within. Try executing it on your own by pushing your YAML file to .github/workflows!

Summary

Using GitHub Actions, we successfully built a CI/CD pipeline for React. To sum up our actions:

1. Make a brand-new Netlify website.
2. Obtain the site ID and personal access token from Netlify.
3. Get the GitHub personal access token.
4. Set the repository settings to include the secrets.
5. Created a script to install and build React using Lerna.
6. Create a GitHub Action YAML file inside the .github/workflows directory.

Voila! You have completed the tutorial. Now that you have an open playbook, you may use GitHub Actions to publish subsequent React/JavaScript web apps using Lerna.

Level Up Coding

Thanks for being a part of our community! Before you go:

• 👏 Clap for the story and follow the author 👉
• 📰 View more content in the Level Up Coding publication
• 🔔 Follow us: Twitter | LinkedIn | Newsletter

🚀👉 Placing developers like you at top startups and tech companies