Skip to content

[Angular] Hosting with IONOS

Georg Höller
Georg Höller
2 min read
[Angular] Hosting with IONOS
Photo by Luca Bravo / Unsplash

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

AngularDeveloper

Comments


Related Posts

Members Public

[ngrok | Angular] External Access to your Local Test Environment

Sometimes you have to test your local hosted API or website with multiple different devices. They may be on the same network and you can open your local ports in some way to get it working but most of the time it's a messy solution. Tech Stack * Angular * ASP.NET

[ngrok | Angular] External Access to your Local Test Environment
Members Public

[Angular | Capacitor] Interact With Your Native Calendar

Recently I had do to implement a simple task: When the user presses the 'save appointment' button, the app should add this event to the native calendar. My first thought was saving an .ical file and open it, till i recognized that this isn't the most user friendly way. After

[Angular | Capacitor] Interact With Your Native Calendar
Members Public

[Angular] Native iOS and Android App - Capacitor

In this blog post we will go through the initial process of how to convert an existing angular project into a cross-platform project. Our focus is on iOS and Android. In addition to this, I show you how to speed up developing and especially testing the app. Setup * Code Editor

[Angular] Native iOS and Android App - Capacitor