How To Deploy Your Angular Project in Hostinger

Alayna Johnston — Tue, 20 Aug 2024 20:33:52 +0000

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.

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

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.

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.

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.

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.

Finding the Best Web Host as a Beginner

Alayna Johnston — Tue, 20 Aug 2024 20:31:32 +0000

Finding a web host can be challenging. The wording is confusing, the prices are all over, you just simply want to upload your code and have a website already!

Here, I will gather details about various hosting platforms from price and perks. I’ll focus on the 2 bottom tiers to keep costs low for beginning websites and only picking out Web Hosting. First, let’s clear the air on some terms we’ll see.
Website Builder vs. Web Hosting

This is the difference between plans that you are able to buy. Website Builders are the ones that allow you to use their templates that you build upon, often with very limited amount of pages you can use for lower plans. Web Hosting is where you can upload your own project code files to use the website that you built from scratch yourself. I recently learned the difference as I had my website on a Website Builder wondering why I’m spinning my gears trying to figure out how to upload my own code. Turns out it was the type of plan that I had.
What is SSL and its related certificate?

Secure Sockets Layer. Websites rely on SSL certificates, digital credentials that verify their identity and scramble data for secure communication. This encryption safeguards user information, confirms website ownership, and prevents imposters from creating replicas, ultimately building trust with visitors. An SSL protects your users so you should have one.
What is a CDN?

Content Delivery Network. “A network of interconnected servers that speeds up webpage loading for data-heavy applications” [AWS]. “While a CDN does not host content and can’t replace the need for proper web hosting, it does help cache content at the network edge, which improves website performance. Many websites struggle to have their performance needs met by traditional hosting services, which is why they opt for CDNs. Almost all websites and applications rely on a CDN to help serve content to their users.” [CloudFare]
Host Sites

GoDaddy

Here is the host that I am currently using and didn’t fully understand the package that I got at the time. I am on what’s called the ‘Website Builder’ plan which, no… doesn’t allow you to build your own website in the code way like I assumed. This package allows you to use the templates only, and the base plan only comes with 2 pages…

Web Hosting Economy : $9.99/mo (currently $6.99 & pay $83.88 today then renew $219.87)

1 website
10 databases
25 GB storage
free domain
free email
free SSL certificate — 1 year

Web Hosting Deluxe : $13.99/mo (currently $9.99 & pay $119.88 today then renew $167.88)

10 websites
25 databases
50 GB storage
shared RAM and vCPU resources
free domain
free email
free unlimited SSL for all websites

Hostinger

Free website migration → Fineprint: for qualified domains only. Otherwise, $10 which will be annual.

Premium : $11.99/mo (currently $2.99 for 48 months + 2 months free and renews at $7.99)

100 websites
unlimited free SSL
Unlimited database
free email
free domain — first year
no free CDN
no IP address
some WordPress tools (store up to only 10 products)
No-code website builder -> so no code option?
Security
Service and Support

Business : $13.99 (currently $3.99 for 48 months + 2 months free and renews at $8.99)

100 websites
unlimited free SSL
unlimited database
free email
free domain — first year
free CDN
No dedicated IP address
WordPress related tools (like eCommerce up to 100 products and 100 orders/mo)
No-Code website builder tools -> so no code option?
Security
Service and support

Turbify

Basic : $5.59 (currently $1.99/mo for 5-year plan)

100 GB storage
100 GB bandwidth
free domain (first year)
250 Email addresses
25 subdomains
5 mySQL databases
AWS infrastructure
Free SSL certificate
Security
website builder and tools (WordPress)
Service and Support

Advanced : $9.99 (currently $2.99/mo for 5-year plan)

500 GB storage
500 GB bandwidth
free domain (first year)
500 email addresses
50 subdomains
10 mySQL databases
AWS infrastructure
free SSL Certificate
Malware Protection (Scan)
other security
Website building tools (WordPress)
Service and Support

BlueHost

Basic : $2.95/mo for 1 year (renews at $11.99)

1 website
10 GB SSD storage
Free CDN
free domain 1st year
email free trial
Custom WP Themes
Free SSL — 1st year

Choice Plus : $5.45/mo for 1 year (renews at $21.99)

3 websites
40 GB SSD storage
free CDN
free domain 1st year
email free trial
custom WP themes
free SSL
Daily website backups — free 1st year
domain privacy — free 1st year
Malware scanning

DreamHost

Shared Starter : $2.59/mo (renews at $5.99)

1 website
free domain included
unlimited traffic
WordPress installer
Free automated WP migrations
WP Website builder
fast SSD storage
Free SSL certificate
add email starting $1.67/mo

Shared Unlimited : $3.95/mo (renews at $10.99)

unlimited websites
free domain included
unlimited traffic
WP installer
free automated WP migrations
WP website builder
Fast SSD storage
free SSL certificate
unlimited email @ domain

Some details weren’t found out until you add to the cart.
Summary

Cheapest low tier now : Turbify Basic at $5.59 (currently $1.99/mo for 5-year plan)
Cheapest low tier upon renewal : Turbify Basic at $5.59 (currently $1.99/mo for 5-year plan)
Cheapest 2nd tier now : Turbify Advanced at $9.99 (currently $2.99/mo for 5-year plan)
Cheapest 2nd tier upon renewal : Hostinger Business at $13.99 (currently $3.99 and renews at $8.99)
Best perks low tier : GoDaddy Economy, Turbify Basic, & Hostinger Prem
Best Perks 2nd tier : Hostinger Business
Worst perks low tier : DreamHost — lacks detail (db’s, storage, CDN all unknown)
Worst perks 2nd tier : DreamHost — lacks detail (db’s, storage, CDN all unknown)

Personally, I’m going to give the Hostinger Business tier a go after the sufficient detail and comparisons to other hosts.

Host comparisons side-by-side

Notes to add after I chose my host:

GoDaddy’s customer service chat is a PAIN to work with and had me going in circles- I did not solve any problem with them.
Hostinger’s customer service chat was GREAT and straight to the point.
Hostinger charged me roughly $10 that will be annually to use my domain that I purchased from GoDaddy (only qualified domains from sites like WordPress are free to transfer, I guess?)

Thanks for checking out my post! I hope this helps and would love to hear what hosting site you decided to go with and your reasons why.

DEV Community: Alayna Johnston

How To Deploy Your Angular Project in Hostinger

Finding the Best Web Host as a Beginner