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.
Customized Cloud Solutions to Drive your Business Success
- Cloud Migration
- Devops
- AIML & IoT
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!
Get your new hires billable within 1-60 days. Experience our Capability Development Framework today.
- Cloud Training
- Customized Training
- Experiential Learning
About CloudThat
CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.
CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 850k+ professionals in 600+ cloud certifications and completed 500+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, AWS GenAI Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, Amazon ECS Service Delivery Partner, AWS Glue Service Delivery Partner, Amazon Redshift Service Delivery Partner, AWS Control Tower Service Delivery Partner, AWS WAF Service Delivery Partner, Amazon CloudFront Service Delivery Partner, Amazon OpenSearch Service Delivery Partner, AWS DMS Service Delivery Partner, AWS Systems Manager Service Delivery Partner, Amazon RDS Service Delivery Partner, AWS CloudFormation Service Delivery Partner, AWS Config, Amazon EMR and many more.
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