Guide to Deploying a React App to Netlify

Introduction

Deployment is the process of moving our code from a source control system to a hosting platform where it gets stored, and can be served as an application to end users. Typically, this is done either in the cloud or on a local server.

Prior to the advent of cloud platforms such as Netlify, hosting was only done by hosting providers who required a re-upload of all static assets (build files generated after running npm run build) every time you make a change. This upload was done using either FTP software or a web hosting management system like cPanel, which can be very stressful and technical.

Netlify is meant to solve that problem! It provides you with three simple methods to deploy an app - drag and drop interface, project import interface, and command-line interface (CLI). Even though all of them are made to be simple, each one is tailored with a different use case in mind.

In this guide, we'll take a look at how to deploy a React app to Netlify and cover the pros and cons of each way to deploy a React app. After that, we'll quickly explain how to deal with the 404 Page Not Found error in Netlify.

Why Use Netlify?

Netlify is a cloud hosting provider which provides serverless backend services for static websites. It is designed to maximize productivity in the sense that it enables developers (especially frontend oriented), and engineers to quickly build, test, and deploy websites/applications.

It works by connecting to your GitHub repository from where it pulls the source code. Following that, it will run a build process to pre-render the pages of our website/application into static files.

There are numerous reasons in favor of using Netlify, here are just a few of them:

• Netlify is less expensive - creating and hosting a static website will save you money in the long run. Netlify boosts site speed significantly through a global distribution and automated pre-rendering.
• Netlify makes it incredibly simple to deploy a website - in fact, the simplest way to accomplish this is to use GitHub, GitLab, or Bitbucket to set up continuous deployment.
• Netlify makes it super easy to launch a website with its built-in DNS management solution.
• We could easily deploy only a specific branch of our Git project - this is useful for testing new features that may or may not make it to the master/main branch, or for quickly determining how a PR will affect your site.
• Netlify allows you to preview any deployment you make or want to make - this allows you and your team to see what changes will look like in production without having to deploy them on your existing site.
• Netlify provides a handy form submission feature that allows us to collect information from users.

Getting Started

In this guide, we'll deploy a color tints and shades application to Netlify. It is a simple React app that pulls tints and shades from the values.js package.

Before we get started, let's go over some of the prerequisites for using Netlify:

• Have an account with any Git provider - GitHub, GitLab, or Bitbucket.
• Have npm installed - it comes preinstalled with Node or Yarn.
• Basic understanding of how to use the terminal (optional).

Pushing Your Code to GitHub

We must first push our project to any Git provider before we can deploy our applications to Netlify. For this guide, we'll use the terminal to push our React app to GitHub.

But let's start with creating a GitHub repository first. Then ensure you fill in the necessary information and click Create repository:

Back in the terminal, let's start by staging all our files, so we can commit them to the repository, then create a new branch main using the following commands:

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main

Once this is done, we can now push to the created remote repository using the following commands:

$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main

Our code should appear when we refresh the repository! Moving on, there are three major methods for making Netlify deployments. Let's look at all of the methods and compare them at the end.

Deploying App to Netlify

Netlify offers a free plan which allows us to create an account or log in using any one of the options listed on the login page (as seen in the image below).

After logging in, we'll be taken to our Netlify dashboard, where we'll use both the drag and drop method and the project import method to deploy our app to Netlify.

Deploy Application to Netlify with Drag and Drop

We'll start by creating a build of our application by running the command below:

$ npm run build

Once this is completed successfully, our build folder will be created, which will contain all of the production-ready files (these are the files we'll be uploading to Netlify using the drag and drop method).

Click "Add New Site" > "Deploy Manually" on our Netlify Overview page. This will take us to the page where we'll drop our static files. We can also access the drop page here as long as we are logged in.

The next step would be to drop the build folder that was generated so it immediately gets deployed to a live URL as seen below:

Deploy Application to Netlify with Netlify's CLI

Netlify's command-line interface (CLI) allows us to deploy our app directly from the command line, as well as configure continuous deployment so that Netlify automatically deploys new versions of our site when we push commits to our connected Git repository.

The first step would be to install the CLI using the following command:

$ npm install netlify-cli -g

This command will install Netlify globally. In case you want to install Netlify CLI locally, run the following command from the root directory of our project:

$ npm install netlify-cli --save-dev

The first step in deploying our React app using Netlify CLI is to authenticate and obtain an access token via the command line by running the following command from any directory:

$ netlify login

This will open a browser tab in order to authenticate us and grant us access to the Netlify CLI:

Once this is successful, we can now deploy our app using the deploy command:

$ netlify deploy

This will prompt some questions, regarding the setup:

Since we already have our react app hosted on GitHub, then we just need to "Link this directory to an existing site". This will now bring up the next question:

This folder will be linked to the GitHub repository where we pushed our code, and it will appear automatically as long as it is added as the remote origin. After that, our site will be created and deployed to a draft URL, which we can view by copying and pasting the URL into the browser:

According to our console, "if everything looks good on your draft URL, deploy it to your main site URL with the --prod flag." This allows us to preview any deployment we make so that we and our team can see how changes will look in production without having to deploy them on our existing site.

So, to make our app live, we'll execute the following command:

$ netlify deploy --prod

Once this is completed successfully, we'll be given two important URLs: the Unique Deploy URL (which represents the unique URL for each individual deployment) and the Live URL (which always displays your latest deployment):

So, each time we update and deploy our website, we'll get a unique URL for that deployment. Essentially, if we deploy multiple times, we'll have multiple unique URLs you can use to direct users to a specific version of your application. However, the live URL always displays our most recent changes at the same URL.

Importing project to Netlify Dashboard

So far, we've seen how to deploy a React app via drag and drop as well as the Netlify CLI. If we don't want to use the CLI, we can do everything manually by importing the project from your Git provider into our Netlify page. This can also perform functions similar to the Netlify CLI.

The first step would be to visit our Netlify team page, then click on "Add new site" > "Import an existing project" as seen below:

After that, it will take us to a page where we can select the Git provider where your site/app's source code is hosted. In our case, we went with GitHub. We can now search for the GitHub repository once it has been authorized:

We can now handle deployment once we've identified the project. This takes us to a page where we can specify which branch we want to deploy, for example, if we're testing a specific release. This page also allows us to specify the build command and the location of the build file (this is automatically handled by Netlify except we wish to change it). When we have finished, we'd click the "Deploy Site" button.

When our deployment is successful, we should get a Live URL. We can also tweak the settings on the settings overview page, such as domain settings, view deployment logs, etc.

Comparing Deployment Options

The first three methods all help us with deployment, but the last two methods help with other features such as continuous deployment, deploying specific branches, handling tests, and so on.

The drag and drop interface is useful when you want to deploy build files quickly without having to push your code to any Git provider. The Netlify CLI and Dashboard perform the same functions under the hood. The Netlify CLI accepts all of the commands through a clean terminal, so you won't have to deal with the unnecessary navigation, and can expect it to change less frequently than a webpage.

Choosing the best is a matter of the personal preference of a developer, with many preferring the CLI because of the lower overhead required - you can use it from the IDE, it's clean and succinct, and doesn't change as much through time.

Handling Page Not Found Error

If we're using a router, such as React Router, we'll need to configure redirects and rewrite rules for our URLs. Because we get a 404 error page when we click on any navigation item to change the page (route) and refresh the browser.

As a result, Netlify makes configuring redirects and rewriting rules for our URLs really easy. We'll need to add a file called _redirects to our app's build folder, for this to happen automatically, we'll put it in the public folder. The following rewrite rule must be included within the file:

/*  /index.html 200

No matter what URL the browser requests, this rewrite rule will serve the index.html file instead of returning a 404. So, in order to see the most recent changes in the live URL, we must re-deploy using any of the preferred methods. We'll no longer see the 404 error page after changing our route and refreshing the app:

Conclusion

Deployment is the process of moving our code from a source control system to a hosting platform where it gets stored, and can be served as an application to end users. Typically, this is done either in the cloud or on a local server.

Prior to the advent of cloud platforms such as Netlify, hosting was only done by hosting providers who required a re-upload of all static assets (build files generated after running npm run build) every time you make a change. This upload was done using either FTP software or a web hosting management system like cPanel, which can be very stressful and technical.

In this guide, we've seen how to easily deploy a React app to Netlify in three ways - via the drag and drop interface, the Netlify CLI and the Netlify Dashboard. We also learned how to fix the 404 error that occurs when your React app uses a router.