There are many platforms out there that will Host a React App either for free like GitHub Pages or with some hosting charges like Hostinger. But Netlify falls into the free category as it provides us free hosting of not only React Apps but Apps made using any languages, and not only Dynamic apps but Static ones too can be hosted for free.
In netlify, not only hosting is free, but an SSL certificate is also free, but you have to purchase your custom domain if you want to have one and netlify will host your website/app on that domain.
In this blog, we will see how to host a React App from GitHub repo using Netlify dashboard in 4 easy steps with an SSL certificate and last but not least with a custom domain.
Index
- Creating a Netlify account
- Connecting Netlify with GitHub
- Starting the deployment Process
- Error Handling
- Changing the name of our site
- Adding a Custom Domain
Let’s begin…
Step I – Creating a Netlify Account
Creating an account on Netlify is very easy, just sign up and fill in the details, and we are good to go.
After successfully signing in to your Netlify account, the Netlify dashboard will appear from which you can start hosting your React App.
Step II – Connecting Netlify with GitHub
In this blog, we will host our first React App on Netlify, and that’s why our dashboard is only showing one button, click on it.
We will be directed to a dashboard where we have to select a version control tool on which we have the repository that needs to be hosted.
-> You should have an account on at least one of the three VCS and must have a repo of the app you want to host through Netlify.
After we have selected the VCS of our choice, we will be asked to link both the accounts, and clicking the install button will just do that.
But in the above image, we have two options, either we can give Netlify access to all our GitHub’s repositories in one click, or we can only give it access to read-only that repository that we want to deploy.
Choose Wisely and click install.
As it says in the image below, Netlify doesn’t store your GitHub access token on our servers. If you’d like to know more about the permissions Netlify requests and why we need them, you can visit our documentation on Git provider permissions.
If you want to give netlify access to all your repositories, it’s fine but don’t forget to select the repository that you wish to host using it.
By clicking on the repository we want to host, we will be directed to the last dashboard of deployment where we will check all our settings and click on deploy.
It is advised not to change anything on this page or the site might not deploy
Step III – Deployment process Begins
After clicking the deploy button, we will see a new dashboard with a name like ‘jolly-3e03ty’. It’s the name given to us by Netlfy, we can very easily rename our app after we have completed the deployment process.
We can start the deployment process by clicking on the app’s name under the site that will open a new page where the deployment will be going on.
If you are a Yarn user, it might take longer as it will first install yarn from your Repo and then will begin the deployment process
Once the deployment phase is over, we will see a link below the name of our App given to us by Netlify.
Step IV – Error Handling
Sometimes we face some errors during our deployment phase. It’s generally not common to get an error as we developers check and resolve every error by checking the console after every step, but sometimes it may occur. What to do then?
Simply click the Deploy Settings button, and the settings page will open where we will do some changes with the deploy settings.
We will make changes in the Build Command under Build Settings.
Just replace the command yarn build with CI= yarn build or from npm run build to CI= npm build and without making any other changes save it and click the button Clear Cache and Deploy site under Retry Deploy.
This time the app will be deployed and a link will appear like last time that is the URL for our site with a free SSL certificate.
Step V – Changing the name of our site
After the successful deployment of our React App on Netlify, it’s time to change that boring and confusing name with a new name.
Just click on your site and click site settings and we will be redirected to the settings page of our site where we can change our site’s name.
But netlify has its naming convention that does not include any spaces and caps in the name of the app, but numbers, small letters, and special characters are allowed
Click the change site name button, and we can change the name of our site. When done. Click on Save, and the site name with its URL will be changed as well.
Step VI – Adding a custom domain
Before we set our custom domain we have to set its DNS properties, and you can do so by reading Netlify’s official documentation about custom domains.
We have our custom domain ready to be used. We can set it into our App by going to the Domain Settings and then clicking Add a custom Domain button.
Type the custom domain we have just purchased in the box and click verify. and Yes, add the domain, and the domain will be added
And we are good to go with our custom domain. Remember it might take some time to set up completely with SSL Certificate but once completed, our app will be hosted on a custom domain, not any random domain.
If you are having any problems with the DNS server, watch this video to understand step by step how to add a custom domain in Netlify.
Conclusion
Netlify is one of the many platforms out there which will host our React App for free which will help us while giving our interviews, and also when we want to showcase our skills with React to our potential clients.
It not only gives us free hosting but a free SSL certificate and a way to enable or use a custom domain for our apps as well.
