Host React/Angular/Vue Site on Netlify

Hosting your sites can be difficult if you have not done with any hosting or server related thing.

In this article you going to learn how we can host site on Netlify.

I have a sample site in react and I pushed it on Bitbucket(similar to GitHub).

If you are using GitHub or GitLab it would work fine as well. So let's move further.

Step 1:- Create sample website and push it in GitHub

Step 2:- Sign up to Netlify

Once you have signed up, click to the new site from git button

Screenshot (29).png

Once you click on that button you will navigate to the screen which will look like the below image.

Screenshot (30).png

Step 3 :- Select the platform where you have pushed your code (in my case it will be Bitbucket)

Once you select it, you have to authorize Netlify on that platform. Mostly new window will open, and you just need to give permission.

After authorization, your screen will look like this.

Screenshot (31).png

You can search/select any private/public repo of your GitHub etc. and select it.

Once you select repo/project to deploy, you will see this screen.

Screenshot (32).png

Now you can configure branch(mostly default will be master) as per your project and you can also set command according to the framework.

For react it will be npm run build and for angular it will be ng build and similar you have to find command for other technology and set the build directory path.

Step 4:- Click on deploy site, and you will see same screen as below image.

Screenshot (33).png

Here my site name will be thirsty-hoover-727570.netlify.app, and you can click on domain setting to change your site name.

Subdomain will always be netlify.app if you don't have your custom domain.

You can change domain name in domain setting which will be similar to below image.

Screenshot (34).png

Now click on option and edit the site name, Once you edit it you can access site with your given name(ex. yourdomainname.netlify.app).

You also can give custom domain name and points your site DNS to the provider.

That's it, now you will be able to see your website running live.

You also can update the site and deploy it again to make changes.

I hope you find it useful. Please share it with others and comment below if you still face difficulty to host sites.

Thanks.