Deploy Angular App On Hostinger Shared Hosting

Published 3 November 2023 by Jarvis Silva

Looking to deploy angular app on shared hosting but don't know how then you are at the right place. In this tutorial, I will show you how to deploy angular app on Hostinger shared hosting plan so read till the end.

Angular is a popular framework used to create web applications. It is widely used for creating single page applications. Whereas Hostinger is a popular web hosting service which offers the best affordable shared hosting plans.

I will use Hostinger's premium web hosting plan to host angular app, I used the premium shared hosting plan because it gets you a free domain and many other things or else you can go with the single shared hosting plan.

Here is a special Hostinger discount link for you if you don't have a hosting at Hostinger use it and you will get around 70% discount with 2 months free.

So now let's see how to deploy angular on Hostinger step by step.

1. Create Production Build Of Your Angualr App

To deploy angular app on a shared hosting we need to first create a production build version of angular project using angular build command, It will compile, minify and bundle all angular code in one folder.

Use below command to create build version of angular project:

ng build --configuration production

After running this command it will start building production version of your angular app and after finishing it will create a new folder called dist and inside that another folder with the name of your project, below is how it will look like.

Now we just need to put all the files from the dist/project-name-folder folder to our hosting.

2. Setting up Hostinger and domain

In this step we will see how to setup hostinger hosting and domain if you already have hostinger account and a domain connected then you can skip this and go to the next step.

1. Sign up for a Hostinger Account

Use this special Hostinger discount link you will get web hosting at discounted price, You can either go with Hostinger's single or premium shared hosting, I would suggest you go with the premium as you will get you a free domain and can host upto 100 websites.

Complete the registration process by providing the necessary details and selecting a payment method.

2. Configure Domain Settings

Once you have successfully created your Hostinger account, log in to the control panel which is the hpanel and under the Domains section, click on "Add Domain." Here, you have two options: register a new domain or use an existing one.

Register a New Domain

With hostinger premium shared hosting you can register a free domain and you don't have to do any domain configuration if you have a domain registered with Hostinger.

Or use an Existing Domain

If you already have a domain with another provider then you can use that domain you just need to point it to hostinger nameservers.

To update your nameservers follow this guide: Setup domain in hostinger or contact hostinger support for help if you are facing problems with domain configuration.

You can also create a subdomain and host your angular app, to create a subdomain in Hostinger follow this tutorial: How to create a subdomain in Hostinger.

3. Uploading Angular Build Code To Hostinger

Now we just need to upload the code from the dist/project folder to Hostinger to do that go to your Hostinger hpanel and click on the file manager button.

It will show you option to access your files of your website click on it and it will open file manager where you will see a public_html folder inside which you will put all your code files.

So go inside public_html folder and now drag and drop everything from the angular build folder inside public_html folder it will look like below.

Now if you configured your domain properly and if you visit your domain at domain.com you should see your angular app loaded and showing up. So we successfully deployed angular website in Hostinger. I hope you found this article helpful and useful.

Also Read: Host React App On Hostinger

If you are not yet able to view your deployed angular app then make sure your domain is configured properly or contact Hostinger customer support they will be there to help you.

Thanks you for reading, Have a nice day 😊