How to deploy a React application with Netlify in two simple ways
Tags: beginners, react, tutorial, frontend
Published: 2023-09-02 10:47:50

Netlify is a service which offers a development platform that automates builds, deployments and manages your websites. It’s one of the fastest and easiest deployment solutions out there.

In this article, you will learn how to deploy your React application with Netlify in two simple ways. 

Before we get started, let's get you signed up to netlify!

## Signup to Netlify
Use the following steps to sign up to netlify:
**Step 1:** Go to [app.netlify.com](https://app.netlify.com/) and click the signup button.

You can choose any of the options to signup to netlify, for this example we will use GitHub

![netlify sign up page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i44jco3z3b1yeuxelfcf.png)

**Step 2:** You will be taken to the authentication page. Input your Github `username` and `password` to continue to netlify

![netlify auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c0k109flfum2vcci5g8.png)

You would be asked to verify your email (email associated with your GitHub account):

![verify Github account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6261r33g6cv9e2noaht9.png)

After that, you should see something like this but not exactly, because the image below is an already existing account, hopefully you get the idea:

![netlify user dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnb7e8ey0zrvmk0cp7df.png)

## Deploy to Netlify
Netlify offers three methods you can use to deploy your app, but we are going to focus on just two.

### 1. Drag and Drop
Use the following steps to deploy your app using `drag and drop`
method:

**Step 1:** Go to the react app you want to deploy in your code editor and run the following command:

```
npm run build
```
The command above will build your react app for production.

![Building for production](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s33etltrz1agyimbbds1.png)

After that a build folder named `dist` will get generated. The folder contains all the production-ready files of your application.

![Dist folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra830zmlbiiafriplam2.png)

**Step 2:** Go to your netlify dashboard, click the `Add new site` button and choose `Deploy manually`

![netlify dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9uuihou5n2q3dmkbw00.png)

You will be taken to the `drag and drop` page where you will upload the `dist` folder generated earlier.

![drag and drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84mlkwb54k661zr5c40j.png)

After uploading your dist folder, wait a few seconds and you should see something like this: 

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nudmioxg5f6vt2b9dtn0.png)

Click the `open production deploy` button to see your deployed app!

#### Redeploying App
To redeploy your app after making any changes to your code, use the following steps:
**Step 1:** Rebuild your app again as we have done earlier.
**Step 2:** Go to your site dashboard (your existing deployed site) and click the` Deploys` option
**Step 3:** Scroll down and re-upload your app `dist` folder again

![redeploying app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr4mywmjc44pok314u16.png)

#### Changing Site Name
To change your site name, Use the following steps:
**Step 1:** Click the `Options` button and go to `Deploy settings`
**Step 2:** Navigate to `Domain management` option and click it:

![Domain management](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j96mr945at75r0808uld.png)

**Step 3:** Under `Production domains`, click the `Options` button and edit your site name:

![edit site name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70300o7829m51nwym8k0.png)


### 2. Continuous Deployment
According to netlify:
> Continuous deployment works by connecting a Git repository to your Netlify site and keeping the two in sync. When you push to Git, we run your build tool of choice on our servers and deploy the result.


Similar to what we have done earlier, go to your dashboard, `click add new site` button and select `import an existing project`

After doing so, use the following steps to deploy from an existing project:

**Step 1:** Choose any of the options provided by netlify. For this example, we will choose `Deploy with GitHub
`

![continuous deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwxpcke49kgvxpfmpb3b.png)

After that, you will be asked to authorize your netlify to deploy any of your GitHub repository.

**Step 2:** Select the repository you want to deploy

![Select repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/532f5ijrbylfb1at1mdf.png)

**Step 3:** Select the branch you want to deploy from and configure your build settings, we will use the default settings for this example.

After that, scroll down, click the `Deploy` button to deploy your app

![deploying app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/631ez19ji6dr9z3lfi3x.png)


## Conclusion
In this article, you have learned two ways you can deploy your react application with netlify through practical steps. This process can also be used to deploy any other frontend JavaScript libraries like Angular, Vue and more.

If you've gotten to this part and you found this article to be helpful, kindly react and comment on it, doing so will help me in writing better articles.