How To Deploy Your Angular Project in Hostinger

Alayna Johnston - Aug 20 - - Dev Community

Okay, so you have your web hosting platform setup on Hostinger, you have your code started and looking good, so… now what? This guide is specific to uploading your own code to Hostinger.

  1. Add useHash to code: In your app-routing.module.ts file, add ‘useHash: true’ to the imports.

Image description

  1. Generate deployment/production files: In your node.js terminal in your Angular project, enter the command: ng build --configuration production. This is what I found to be the most crucial step.

In your dist folder, you’ll now see a sub-folder with the same name as your project.

Image description

  1. Upload: Open this folder in your File Explorer.

Method 1: In Hostinger, navigate to the file manager and into the public_html folder where your code goes.

Image description

Back in File Explorer, open your folder (dist/[project name]) to view the contents & select them all. Then, drag directly into the folder on the website. If you already have files there, you’ll have to delete them.

Method 2: Right click your folder and send to a compressed folder. Once you have your compressed file, navigate in Hostinger to the ‘upload website’ page and upload it.

Image description

Test out your website and you should be good to go!

Some of the information I gave came from this video by AyyazTechwhich I found to be the most helpful in my own search.

. .