Apps Development, Cloud Computing

4 Mins Read

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

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

Step2

package.json update:

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

Why? Read more here

create a build

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

Step4

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:
  1. 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.

Step5

Command Line Prompts:

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

Step7

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

Step8

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

Step9

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

Step10

Now the last step is – deploy prod

  1. 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.”

Step11

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.

Step11

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

Step11b

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.

Step12

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.

Customized Cloud Solutions to Drive your Business Success

  • Cloud Migration
  • Devops
  • AIML & IoT
Know More

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!

Get your new hires billable within 1-60 days. Experience our Capability Development Framework today.

  • Cloud Training
  • Customized Training
  • Experiential Learning
Read More

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.

FAQs

1. Is it free to deploy a React app to Netlify?

ANS: – Yes, it is free to get started with Netlify. You can deploy your React app for free, and Netlify offers a generous free plan with many features and integrations that you can use to build and manage your app. If you need more advanced features or larger bandwidth and storage, you can upgrade to a paid plan at any time.

2. How do I update my React app once it is deployed to Netlify?

ANS: – Netlify offers continuous deployment, which means that it will automatically rebuild and deploy your app whenever you push changes to your Git repository. Simply make your changes, commit them to your Git repository, and push them to your remote branch. Netlify will detect the changes and automatically rebuild and redeploy your app, making your updates live for users.

3. Can I use other build tools, like Webpack or Babel, with Netlify?

ANS: – Yes, you can use a variety of build tools, including Webpack and Babel, with Netlify. Netlify provides a flexible build environment that allows you to use your preferred tools and libraries to build and deploy your app. You can specify your build settings in a netlify.toml file or use Netlify’s user interface to configure your build settings.

WRITTEN BY Sneha Naik

Sneha works as Software Developer - Frontend at CloudThat. She is a skilled Front-end developer with a passion for crafting visually appealing and intuitive websites. She is skilled in using technologies such as HTML, CSS, JavaScript, and frameworks like ReactJS. Sneha has a deep understanding of web development principles and focuses on creating responsive and user-friendly designs. In her free time, she enjoys staying up to date with the latest developments in the industry and experimenting with new technologies.

Share

Comments

    Click to Comment

Get The Most Out Of Us

Our support doesn't end here. We have monthly newsletters, study guides, practice questions, and more to assist you in upgrading your cloud career. Subscribe to get them all!