# Deploy Your React App Using Netlify

👋 Hey All,

Today I'm going to show you how to deploy a react application with a service called Netlify. This method is completely free and allows you to automatically publish your web app by committing to your GitHub repo.

Lets get started!

# Create A Netlify Account

Firstly, head over to [Netlify's website](https://www.netlify.com/) and create a free account following their directions.

![Netlify Sign Up Page](https://cdn.hashnode.com/res/hashnode/image/upload/v1646638751460/FFmvFo-zH.png)

> Image: Netlify's sign up page

# Import Project From Git

Click on the `Import from Git` button under the "sites" heading on the overview page:

![Sites Section](https://cdn.hashnode.com/res/hashnode/image/upload/v1646639055537/lqr9EUOz1.png)

# Connect To GitHub

Then, connect to GitHub by clicking on the "GitHub" option:

![Import Section](https://cdn.hashnode.com/res/hashnode/image/upload/v1646639123535/Xa1lnoT1k.png)

# Pick your repository

Pick the project repository you wish to deploy:

![Pick A Repository Screen](https://cdn.hashnode.com/res/hashnode/image/upload/v1646639245792/1KVtX7-nW.png)

# Configure Build Settings

Before clicking deploy, make sure that your settings are correct under the `Basic build settings` header:

![Build Settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1646639348551/ndMLkPm3e.png)

Make sure the **build command** is set to `yarn build` or `npm build`.

Make sure the **publish directory** is set to `build`.

> I believe Netlify automatically detects a React app and configures these settings for you but check to be safe 😀

# Deploy site

Click on the `Deploy Site` button and your react app will start building and then be deployed.

![Deploy Site](https://cdn.hashnode.com/res/hashnode/image/upload/v1646639531135/Cph_1A4R9.png)

The site will be deployed on a weird domain name ending with `.netlify.app`. You can change the site name in site settings which will also adjust the domain for you.

# Benefits Of This Method

By deploying your react app on Netlify, you:

- Get automatic deploys from your GitHub repo

- Get a free SSL certificate that is automatically setup

- Can connect your custom domain to your application (topic for another article)

- Get access to cool features like forms (for handling form submissions), identity (authentication), analytics (paid unfortunately) and many more 😀

# Take Away

In this article, you've learned how to deploy your React application to Netlify for free. 

![Awesome Gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646639870937/UoEISa7Ow.gif)


👌 Thanks for reading this article! 

If you like what I do and would love to see more related content, follow me on my other social platforms:

**GitHub:** [Blake-K-Yeboah](https://github.com/Blake-K-Yeboah)

**LinkedIn:** [Blake Yeboah](https://www.linkedin.com/in/blake-yeboah/)

**Twitter:** [Blake Yeboah](https://twitter.com/BlakeYeboah)

You can also show your support by buying me a coffee 😃
 
<a href="https://www.buymeacoffee.com/blakeyeboah"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=blakeyeboah&button_colour=855ff6&font_colour=ffffff&font_family=Cookie&outline_colour=ffffff&coffee_colour=FFDD00"></a>