Voiced by Amazon Polly |
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.
Freedom Month Sale — Upgrade Your Skills, Save Big!
- Up to 80% OFF AWS Courses
- Up to 30% OFF Microsoft Certs
Step-by-Step Guide
Account creation:
- 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
- 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:
- In your package.json add a field name with the value:
1 |
"homepage":"." |
Why? Read more here
create a build
- 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:
1 |
/* /index.html 200 |
- 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:
- 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.
- Then give your website a unique name. I’ll type e-com-on-netlify (You can type any name which you like).
- 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.
- 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
- 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!
Freedom Month Sale — Discounts That Set You Free!
- Up to 80% OFF AWS Courses
- Up to 30% OFF Microsoft Certs
About CloudThat
CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.
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.
Comments