DEV Community

Alayna Johnston
Alayna Johnston

Posted on • Edited on

1

How To Deploy Your Angular Project in Hostinger

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay