Deploy React on Netlify
Tags: react
Published: 2021-08-12 01:03:53

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](https://github.com/signup))
2. Netlify account ([sign-up here](https://app.netlify.com/signup))
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.

![React.js success installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srujx21q636hdwta30wk.PNG)

## 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](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account).

`cd` to `example-app` and type commands below:
```bash
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.
![Netlify create new site button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cb2gchrxlb4g4xq952k.PNG)
Choose GitHub.
![Upload from GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v48gldqmcv8jy0fbkk18.PNG)

Choose the repository. In this case `example-app`.
![Choose GitHub repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/266jcw9k55mexziw11ry.png)

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.
![Setup Netlify build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otp8lcn22pr61gr4ro7k.png)

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.
![Netlify builds the site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewclygn5724jg11yfbnx.png)

Wait until the process done. By default Netlify will give our application a unique subdomain, but we can change it on `Domain settings`.
![Site is deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0rpp2fla9o8qs2vecvi.png)

Click `Options` and select `Edit site name`.
![Edit site name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55xgxm8eiceqrxj5rnv7.png)

Change your site name and save.
![Choose site name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h40hc5172ht3t3nxtndt.png)

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`.

![app is online](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qpsv445radq6r9f8u6r.png)

Congrats! we successfully deployed our application on Netlify.

<a href="https://www.buymeacoffee.com/thexdev"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a macbook&emoji=💻&slug=thexdev&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff"></a>