Skip to content

[ASP.NET Core 6.0 | Angular] Hosting with Ionos

Georg Höller
Georg Höller
3 min read
[ASP.NET Core 6.0 | Angular] Hosting with Ionos
Photo by Taylor Vick / Unsplash

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. Create two new folders - one for backend (api) and one for frontend (client):

Now switch back to your Ionos Domains & SSL page and open the details from your domain:

Create a new subdomain within the subdomain tab. In my case I called it api.ngmug.dev. Wait a few minutes and let ionos create the subdomain.
Open the details of the subdomain and check if the usage type is set to web space. Afterwards change the target to your newly created (api) folder.

Do the same for the frontend folder - create a new subdomain or just use the main domain and change the target to the client folder!

ASP.NET Core 6 Release

Edit your .csproj file and add the PublishWithAspNetCoreTargetManifest tag:

<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<PublishWithAspNetCoreTargetManifest>false</PublishWithAspNetCoreTargetManifest>
</PropertyGroup>
Source: https://www.ionos.com/help/hosting/net/using-net-core-with-windows-hosting-packages/

Publish your project to a folder and copy the files to the FTP api folder. Everything should work at this moment - go and check!

Angular Release

Build your angular project and copy the files to your frontend FTP folder. Now create a new file and call it '.htaccess' and add the following content to it: (don't forget to change the placeholder url to your website's url)

RewriteEngine On
RewriteBase /
# Redirection to HTTPS:
RewriteCond %{SERVER_PORT} !=443
RewriteRule ^(.*)$ <https://YourPage.com>/$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]

The file should be placed on the same level as index.html.

And you are done - check if your angular app is running!

Connect MSSQL Database to your Backend

Navigate to your ionos hosting dashboard and click manage at the MSSQL database tile. You can create a new database in the next view - set a password and a description and go!

While ionos creates the database we can take care of our connection string. Mine looks like the following - don't forget to insert your ionos database information:

// Pattern
data source=<SERVERNAME>;Initial Catalog=<DATABASENAME>;Integrated Security=false;User ID=<USERNAME>;Password=<PASSWORD>;TrustServerCertificate=true;

// Mine
"data source=db946921223.hosting-data.io;Initial Catalog=db946921223;Integrated Security=false;User ID=dbo946921223;Password=;TrustServerCertificate=true;"

I could not get it to work without "TrustServerCertificate=true" - if you have a better solution, please let me know!

Publish your project and the database connection should work! If you have troubles, don't forget to open your web.config file and set "stdoutLogEnabled" to true - the log files are very helpful!

Unfortunately you can not connect any data studio client to the ionos sql database (like Azure Data Studio or SSMS). This means you have only two ways to apply your migrations - automatically by code or you upload a locally created backup file.

Example Source:

GitHub - Georg632/ngmug
Contribute to Georg632/ngmug development by creating an account on GitHub.
If you have further questions about this topic or need help with a problem in general, please write a comment or simply contact me at yesreply@georghoeller.dev :)
AngularC#Developer

Comments


Related Posts

Members Public

[Angular] Routing Helper - a Typesafe Routing Attempt

It always bothered me that you have to define the routing paths as strings. If a route changes, you have to change all references manually. There must be a better way! Routing Constants The constants are for your specific app - here you can define a class which represents your

[Angular] Routing Helper - a Typesafe Routing Attempt
Members Public

Transition from Windows to Mac - Frontend Developer

My Windows journey started with Windows 98 I think, maybe Windows 95. Now it is the end of 2022 and I was in need for a new laptop. I have been searching for weeks for a suitable windows notebook, tested an Asus ROG X13 but sent it back because hardware

Transition from Windows to Mac - Frontend Developer
Members Public

[Tailwind | Angular] Responsive breakpoints in typescript

Tailwind breakpoints in typescript with an easy angular component

[Tailwind | Angular] Responsive breakpoints in typescript