Host ReactJs application using Netlify
Make reactjs application LIVE and ready for public use in under 5 minutes with Netlify.
This blog post will look at how we can deploy ReactJs application within 5 minutes to the Netlify platform and make the application Production-Ready and LIVE accessible globally.
What is Netlify?
As per official documentation
Netlify is a web development platform that multiplies productivity. By unifying the modern decoupled web elements, from local development to advanced edge logic, Netlify enables a 10x faster path to much more performant, secure, and scalable websites and apps.
It is more than simple deployment too, gives products like Netlify Edge, Netlify Dev, Analytics, FaaS, Identity management, etc.
Pre-requisites
- Working ReactJs application. (We will create a minimal one in this blog post.)
- Github Account.
- Netlify Account. (no credit card required during the sign-up process)
Netlify provides good Continuous deployment, hence we will use Github so every push to master or main branch triggers deployment on Netlify. Gitlabs and Bitbucket are other alternative for github.
Minimal Sample React Application (Optional - For blog purpose)
We use below command to scaffold basic React application :npx create-react-app react-netlify-blog
Post that we will just remove unwanted files and update the basic body and test the application locally.
React application by default runs on port 3000
Locally all good, we push our code to GitHub repository created for deployment purpose on Netlify which we will in last part of the blog soon.
Our code used for the blog is available here if you want to just give it a try :)
Deploy React Site/Application to Netlify
- Login to Netlify. We are using the Free tier where there are limitations which can be upgraded, for basic open-source or demo purposes you can use without issue. It has a decent number of resources for the Free tier which resets every month.
It will show dashboard as below:
Click on "New site from Git"
- Select Git provider of your choice, we are using GitHub in this case. If it asks for authorization please provide permission for the same.
- Once authorized it will show all repositories against your GitHub account, a select repository containing your react application we will select "react-netlify".
- Now select the branch you want to deploy. We are selecting "main" in this case.
- If you want to configure few build settings you can do it, we will keep default as is and Click "Deploy Site".
- Once done it will take you to the New Site dashboard, by default it generates a random name for the site (in this case sad-mccarthy-563e7b is the name of the site ) as below:
Immediate build trigger ...
- If no errors or issues during the build, the build will be published and the Site will be LIVE.
Successful Build ...
You can visit the application by clicking on the below link:
- Now you and anyone can access your application. Your application is LIVE in Production with less fuss. We have just built and deployed Production ready application in under 5 minutes. :)
You can set up a custom domain easily too, with an SSL certificate taken care of. Apart from this, Netlify offers more features like FaaS, Analytics, Auto Scale Cluster, CDN Configuration, Security, HA, and lots more, etc.
You can upgrade if you want to scale or utilize more features. Netlify pricing plans.
Useful Resources
Thank you for reading, If you have reached it so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback and suggestions!