Deploy React on Netlify

When building an application with React, we often ask how to make our application online. In this context our React application.

There are many ways to deploy React application, but this article will cover the Netlify way.

Honestly, you can deploy your application on VPS even on a shared host, but they have trades off like you need to manually setup the CI/CD and other tools which sounds scary.

Netlify comes with built-in CI/CD and other useful tools to make our application easy to deploy. We just need to push our code into cloud repository like GitHub or GitLab and Netlify does the rest until our application online.

Enough for the introduction, let's start it out!

Requirements

1. GitHub account (sign-up here)
2. Netlify account (sign-up here)
3. Git
4. NodeJS

Setup - React.js project

I assume you have registered on GitHub and Netlify. We'll not create an entire app instead we just create simple app using CRA.

On your working directory, type npx create-react-app example-app to install our application. Then, let's verify our application is successfully installed using this command yarn start.

Open http://localhost:3000 in your preferred browser. If you see something like image below, it's mean we're ready to go.

Setup - GitHub

Maybe you have a question "why we need GitHub?", right?.

So, we need GitHub to host our project and trigger Netlify to build our site and make it online whenever we push a new feature or changes into our repository.

Now let's upload our application to GitHub!

First, we need to create a new public or private repository. After that copy the repository URL.

Note:
The repository URL has two types. HTTPS and SSH. HTTP requires you to insert GitHub username and password every time you push changes. Where SSH requires you to setup SSH-Key between your computer and GitHub.

Read this documentation to setup your SSH-Key.

cd to example-app and type commands below:

git remote add origin git@github.com:natively-project/example-app.git
git push -u origin main

Setup - Netlify

Now, login to your Netlify account and create new site.

Choose GitHub.

Choose the repository. In this case example-app.

Make sure you provide the right value on each field.

Branch to deploy is the branch (on GitHub) that Netlify will pull, build and publish our application. It's commonly your production branch.

Build command is a command that Netlify will execute to build our application.

If you sure with your settings, then click the Deploy site button to start build and publish our application.

You will redirected and see something like image below.

Wait until the process done. By default Netlify will give our application a unique subdomain, but we can change it on Domain settings.

Click Options and select Edit site name.

Change your site name and save.

Now, let's visit our application!

Open your site name in your preferred browser. In this case my application name is example-app.netlify.app.

Congrats! we successfully deployed our application on Netlify.