Deploy Angular App On Hostinger Shared Hosting

Looking to deploy angular app on shared hosting but don't know how then in this tutorial, I will show you how to deploy angular app on Hostinger shared hosting plan.

Angular is a popular framework used to create web applications. It is widely used for creating single page applications.

I will use Hostinger's premium web hosting plan to host angular app, It is one of the best shared hosting plan you will get.

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, To do that follow below steps:.

• Use below command to create build version of angular project:

ng build --configuration production

• After running this command it will create a production version of your angular app and store it in a dist folder.

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.

• 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.

Also Read: Host React App On Hostinger

If you are still not 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 😊