A Guide to Deploy a React App to `Netlify`

Introduction

Netlify is a cloud-based platform that makes it easy for developers to deploy and host web applications. It offers a range of features and tools that are designed to simplify the process of building, deploying, and managing web applications, making it a popular choice for developers who need to create and maintain modern web applications.

After making our apps look wonderful, we want to show them off to the world!

Let’s host our React App using Netlify.

Step-by-Step Guide

Account creation:

1. Netlify offers a free plan. So first, go to Netlify and create an account using any one of the options (Github, Gitlab, Bitbucket, Email).

There are two ways to deploy your application to Netlify.

Drag & Drop

So here we just have to drag and drop our build folder into their online app, and our application will get deployed to a live URL.

installation of netlify cli

2. Netifly also offers a command line interface that allows you to deploy apps directly from the command line. We will do it now.

Install the netlify CLI (command line interface) using the following command

package.json update:

3. In your package.json add a field name with the value:

Why? Read more here

create a build

4. Start by creating a build of your application. So go to your React App folder in the command line and run the command:

This will do all the work necessary to have your app ready for deployment. (If you can’t get routes because of BrowserRouter, you can use HashRoute, which works fine when deploying Netlify.)

• If you have react-router-dom installed, then you need to do an additional step of setting redirects on netlify
• In your build folder, create _redirects
• Add the following to your _redirects file:

5. Now you are ready to deploy. To deploy the application, we have to make sure that we’re in the project folder, and then we will run the following command and visit the link it provides to verify your account.

Command Line Prompts:

6. So here, in the console, it says, “This folder isn’t linked to a site yet. What would you like to do?”. It wants to know whether to associate this directory with an existing site or create and configure a new site. Since this is a new site, it gives you some options, we’ll select Create & configure a new site.

Select a team. This usually corresponds to your Netlify ID.

7. It gives you the option to name your website.

8. Then give your website a unique name. I’ll type e-com-on-netlify (You can type any name which you like).

9. Now, as the deploy path, we need to specify our project’s build directory which contains the assets for deployment. So, type build and press enter.

10. Your draft should be live on the Website Draft URL: Visit the link and make sure your application is working correctly.

Now the last step is – deploy prod

11. When I go back to the console, it says, “If the draft URL looks good, deploy it to the main site URL with the –prod flag.”

If your application is working, we’ll run the following command shown on the command line to deploy the application. The deploy path should be built.

You will be asked to enter the deployment path (build folder) for the live build again.

Now, we get two URLs in the console output, A Unique Deploy URL, which represents the unique URL for each deployment, and a Website URL which always displays your latest deployment.

Each time you update and deploy your website, you are provided with a unique URL for that deployment. With multiple deployments, you always have multiple unique URLs so that users can refer to specific versions of your application. However, the live URL always shows the latest changes on the same URL.

Conclusion

In conclusion, deploying a React app to Netlify is a straightforward and efficient process. By following the steps outlined in this blog, you can easily take your React app from a local development environment to a live, production-ready site that is accessible to users around the world.

Netlify offers a variety of features and integrations that make it an attractive platform for hosting your React app. It is free to get started, and the intuitive user interface makes it easy to manage and monitor your app once it is live. Additionally, Netlify’s continuous deployment capabilities allow you to update your app quickly and easily with new features and bug fixes, without having to worry about the underlying infrastructure.

Give it a try today and see the benefits for yourself!

About CloudThat

CloudThat is also the official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner and Microsoft gold partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best in industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

Drop a query if you have any questions regarding Netlify and I will get back to you quickly.

To get started, go through our Consultancy page and Managed Services Package that is CloudThat’s offerings.