Deploy Your React App Using Netlify

Deploy Your React App Using Netlify

Really easy and its completely free

ยท

2 min read

๐Ÿ‘‹ 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 and create a free account following their directions.

Netlify Sign Up Page

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

Connect To GitHub

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

Import Section

Pick your repository

Pick the project repository you wish to deploy:

Pick A Repository Screen

Configure Build Settings

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

Build Settings

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

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

๐Ÿ‘Œ 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

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee ๐Ÿ˜ƒ

Did you find this article valuable?

Support Blake Yeboah by becoming a sponsor. Any amount is appreciated!

ย