[Angular] Hosting with IONOS

Georg Höller -

Update:

[ASP.NET Core 6.0 | Angular] - Hosting with Ionos
Update for my previous posts about hosting an angular frontend and ASP.NET Core 6 backend. Prerequirements: * active ionos windows hosting subscription * asp.net core 6 project * buildable angular project Ionos Setup Open up your favorite FTP client and connect it to your ionos webspace. Cre…
Georg HoellerGeorg Höller

In the previous post from this series we learned how to host an ASP.NET Application with IONOS.

At the moment I'm working mainly as an Angular developer. So in this post, we will learn how to host an Angular App with IONOS.

Requirements

  • a buildable Angular App
  • an IONOS Account with a subscription

Angular App

You can use any buildable Angular App for this. For this tutorial, I will use my current landing page state. It's a simple landing page app with an image on top and three links underneath.
If you don't have a buildable Angular App you can use the tour of heros from the angular team.

Now change to the terminal and build your angular app:

ng build --prod

For my project the result in the dist folder looks like the following:

We are done with that for now - let's continue with IONOS.

IONOS Settings

I'm using a "Webhosting Essential Windows"-Subscription for this tutorial. If you have another subscription the steps may differ.

The landing page should be the first thing a visitor sees.
So, first I created a new folder with the name "landing" in the IONOS webspace. You can use the built-in WebFiles Explorer or use a third-party FTP client. (I'm using WinSCP)

Afterward, I switch to the Domains & SSL section in the IONOS menu and selected my blog-hub.net domain.
The website mode should be "Webspace". The target should be the previously created folder - for me, it's "/landing".

Publish

Now you go back to your Angular dist folder and copy all the files to your newly created webspace folder.
Open your browser and check if the site is working :)

Angular Router

If you ever hosted an Angular App with IIS you are surely familiar with the "IIS rewrite module". Unfortunately, IONOS doesn't have it installed, so we have to use the RewriteEngine and create a ".htascess" file. (IONOS Docs)

My final ".htaccess"-File looks like the following:

RewriteEngine On
RewriteBase /
# Redirection to HTTPS:
RewriteCond %{SERVER_PORT} !=443
RewriteRule ^(.*)$ https://blog-hub.net/$1 [R=301,L]

# Redirection of requests to index.html
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^.*$ - [NC,L]
# Redirect all non-file routes to index.html
RewriteRule ^(?!.*\.).*$ /index.html [NC,L]

With this config, you have to place the .htaccess file on the same level as index.html.

The base was provided by this great generator, maybe it can help you: ngx-htaccess-generator