Login
January 11, 2023Voiced 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.
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.
Helping organizations transform their IT infrastructure with top-notch Cloud Computing services
- Cloud Migration
- Devops
- AIML & IoT
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 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.
PREV
Comments