Angular + .NET Core + SQL on Azure - How to Deploy a Full Stack App to Microsoft Azure

In this tutorial we're going to setup a production ready web server from scratch on Microsoft Azure running Windows Server and IIS, then deploy a full stack Angular + ASP.NET Core + SQL Server application to it that supports user registration and authentication.

The Angular front-end app and ASP.NET Core back-end api will both be hosted on an Azure Virtual Machine instance running Windows Server and IIS, and the Azure SQL Database service will be used for storing and managing data in the cloud.

Scope of this deployment tutorial

This tutorial will be focused on setting up the web server and SQL database on Azure, then deploying and configuring the Angular front-end app and ASP.NET Core back-end api to work together. For more in-depth information about the Angular app or ASP.NET Core api used in this post, check out the following tutorials which cover them in detail:

• Angular 8 - User Registration and Login Tutorial & Example
• ASP.NET Core 3.1 - Simple API for Authentication, Registration and User Management

Azure Deployment Tutorial Contents

• Create a new Windows Server on Microsoft Azure
• Connect to Azure Windows Server instance via RDP
• Setup web server with IIS (Internet Information Services)
• Create Azure SQL Database
• Build and Deploy ASP.NET Core Back-end API
• Build and Deploy Angular Front-end app
• Configure IIS to serve API and front-end
• Test the Angular + ASP.NET Core + SQL Server app in a browser

Create a new Windows Server on Microsoft Azure

 Watch this step on YouTube

Before doing anything we need a server that we can work on, follow these steps to spin up a new Windows Server 2019 instance using the Azure Virtual Machines service.

1. Sign into the Azure portal at https://portal.azure.com/. If you don't have an Azure account yet you can create a free one at https://azure.microsoft.com/free.
2. Go to the Virtual Machines service section.
3. Click "Add" to create a new virtual machine.
4. Basics
   • Resource group - Click "Create new" and enter a name for the resource group (e.g. my-resource-group).
   • Virtual machine name - Enter a name for the virtual machine (e.g. my-server).
   • Image - Select "Windows Server 2019 Datacenter".
   • Size - Click "Change size", select "B1ms" and click the "Select" button. This VM has 2GB of RAM which is about the minimum you want to run for Windows Server.
   • Username - Enter the administrator username for the server.
   • Password - Enter the administrator password for the server.
   • Confirm password - Re-enter the administrator password for the server.
   • Select inbound ports - Allow "HTTP (80)" and "RDP (3389)" traffic through to the server.
5. Management - Set boot diagnostics monitoring to "Off".
6. Review + create - Click "Create".

Connect to Azure Windows Server instance via RDP

 Watch this step on YouTube

Once the Azure Windows Server VM is ready you can connect to it via RDP (Remote Desktop Protocol). If you're on Windows you should have an RDP client installed by default, if you're on Mac OSX you can install an RDP client from the app store here.

1. When your deployment is complete click "Go to resource" to get to the Azure VM Overview page.
2. On the Azure Virtual Machine Overview page click "Connect".
3. Click "Download RDP File".
4. Open the downloaded RDP file. If you see a message that the publisher can't be identified click "Connect".
5. Enter the username and password from the previous step and click "OK". If you see a message that the identity of the remote computer cannot be identified click "Yes", this warning is just because it's a self signed SSL certificate and nothing to worry about.

Setup Web Server with IIS (Internet Information Services)

 Watch this step on YouTube

When you first connect to the Azure Windows Server instance via RDP you should see the Server Manager interface.

1. Server Manager
   • Click "Add roles and features".
   • Installation Type - Select "Role-based or feature-based installation" and click next.
   • Server Selection - Leave default and click next.
   • Server Roles - Check box for "Web Server (IIS)" then click "Add Features" button in popup window and click next.
   • Features - Leave default and click next.
   • Web Server Role (IIS) - Leave default and click next.
   • Role Services - Leave default and click next.
   • Confirmation - Click install.
   • Results - Wait for installation to complete and click close.
2. Download and install the .NET Core Hosting Bundle from https://www.microsoft.com/net/permalink/dotnetcore-current-windows-runtime-bundle-installer. Do this either by downloading the file to your local machine and copying it to the server via remote desktop, or by adding https://*.microsoft.com to the "Trusted sites" in the Internet Explorer security settings on the server to allow the file to download.
3. Restart IIS with the command net stop was /y && net start w3svc
4. Download and install the IIS URL Rewrite module from https://www.iis.net/downloads/microsoft/url-rewrite. Do this either by downloading the file to your local machine and copying it to the server via remote desktop, or by adding https://www.iis.net and https://webpihandler.azurewebsites.net to the "Trusted sites" in the Internet Explorer security settings on the server to allow the file to download.

Create Azure SQL Database

 Watch this step on YouTube

Next we'll create a new SQL Server database for the application in the cloud using the Azure SQL Database service.

1. Go to the SQL Databases section of the Azure portal, you can find this by entering "SQL" in the main search bar and selecting the "SQL databases" service.
2. Click "Add" or "Create SQL Database".
3. Basics
   • Resource group - Select the same resource group that the Windows Server Virtual Machine is in (e.g. my-resource-group).
   • Database name - Enter a name for the SQL database (e.g. my-sql-db).
   • Server - Click "Create new".
     • Server name - Enter a globally unique name for the server, it will be used to create the URL to the Azure SQL server: <server-name>.database.windows.net.
     • Server admin login - Enter the administrator username for the Azure SQL server.
     • Password - Enter the administrator password for the Azure SQL server.
     • Confirm password - Re-enter the administrator password for the Azure SQL server.
     • Location - Select the same region as the Windows Server Virtual Machine.
   • Compute + storage - Click "Configure database" then select "Basic" and click the "Apply" button.
4. Networking
   • Connectivity method - Select "Public endpoint".
   • Allow Azure services and resources to access this server - Select "Yes".
5. Review + create - Click "Create".

Build and Deploy ASP.NET Core Back-end API to Azure

 Watch this step on YouTube

Follow these steps to clone and build the ASP.NET Core API on your local machine then deploy it to the server.

1. Clone the ASP.NET Core API project to a folder on your local machine with the command git clone https://github.com/cornflourblue/aspnet-core-3-registration-login-api.git. If you don't have the Git CLI installed it can be downloaded from https://git-scm.com/downloads.
2. Update the database connection string to point to the new Azure SQL Database:
   • In the Azure Portal go to the overview page for the SQL database created in the previous step.
   • Click "Show database connection strings" and copy the "ADO.NET (SQL authentication)" connection string.
   • Open the ASP.NET Core app settings file (/appsettings.json) in a text editor.
   • Replace the value of the WebApiDatabase connection string with the one you just copied, so it looks something like this:

     "ConnectionStrings": {
       "WebApiDatabase": "Server=tcp:jw-sql-server.database.windows.net,1433;Initial Catalog=my-sql-db-2;Persist Security Info=False;User ID=jason;Password={your_password};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
     },

   • Inside the connection string replace {your_password} with the Azure SQL server admin password you created when setting up the database.
3. Update the JWT token signing secret:
   • Open the ASP.NET Core app settings file (/appsettings.json) in a text editor.
   • Replace the value of the app settings Secret with your own random string, a quick and easy way is to generate a couple of GUIDs and join them together to make a long random string (e.g. from https://www.guidgenerator.com/).
4. Build the API with the command dotnet publish --configuration Release from the project root folder (where the WebApi.csproj file is located). If you don't have the .NET Core SDK installed it can be downloaded from https://www.microsoft.com/net/download/core.
5. Copy the files from the aspnet-core-3-registration-login-api\bin\Release\netcoreapp3.1\publish directory to the C:\Projects\back-end directory on the server via remote desktop.

The ASP.NET Core API files are now deployed to the server but the API isn't up and running yet, this will happen when we configure IIS shortly.

Build and Deploy the Angular Front-end app to Azure

 Watch this step on YouTube

Follow these steps to build the Angular application on your local machine and then deploy it to the Azure server.

1. Clone the Angular project to a folder on your local machine with the command git clone https://github.com/cornflourblue/angular-8-registration-login-example.git. If you don't have the Git CLI installed it can be downloaded from https://git-scm.com/downloads.
2. Navigate into the cloned directory and install all required node packages with the command npm install. If you need to install Node.js (which includes npm) it can be downloaded from https://nodejs.org/.
3. Update the app to use real backend API:
   • Open the Angular app module file (/src/app/app.module.ts) in a text editor.
   • Delete the following lines from the file to remove the fake backend that the Angular app uses by default:

     // used to create fake backend
     import { fakeBackendProvider } from './_helpers';

     // provider used to create fake backend
     fakeBackendProvider

4. Configure the path to API:
   • Open the webpack config file (/webpack.config.js) in a text editor.
   • Change the apiUrl config property to '/api' like below:

     // global app config object
     config: JSON.stringify({
         apiUrl: '/api'
     })

5. Build the Angular app with the command npm run build.
6. Copy the files from the angular-8-registration-login-example\dist directory to the C:\Projects\front-end directory on the server via remote desktop.

Configure IIS to serve the Angular front-end and ASP.NET Core API

 Watch this step on YouTube

Since our Angular + ASP.NET Core application is made up of two separate projects that both need to be accessed via the same port (HTTP on port 80), we're going to configure a single site in IIS to serve the Angular front-end app from the base path (/), and create a child application for the ASP.NET Core API that handles all requests beginning with the path /api.

Follow these steps to configure IIS for the Angular + ASP.NET Core full-stack app.

1. Open IIS on the server.
2. Remove the "Default Web Site" in Sites and "DefaultAppPool" in Application Pools.
3. Right click the Sites folder and select "Add website".
4. Enter site name (e.g. my-app).
5. Set the physical path to the Angular app directory (C:\Projects\front-end).
6. Leave the host name empty and click "OK".
7. Right click the new site and select "Add Application".
8. Enter the alias "api" (without quotes).
9. Set the physical path to the ASP.NET Core api directory (C:\Projects\back-end).
10. Click "OK".
11. In Application Pools, right click the app pool for the new site and select "Basic Settings". Change the .NET CLR version to 'No Managed Code', the .NET CLR is not required by .NET Core applications.
12. Create a file named "web.config" inside the Angular front-end folder (C:\Projects\front-end) and add the below configuration into it:

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <system.webServer>
            <staticContent>
                <remove fileExtension=".js" />
                <mimeMap fileExtension=".js" mimeType="application/javascript; charset=UTF-8" />
            </staticContent>
            <rewrite>
                <rules>
                    <rule name="Angular" stopProcessing="true">
                        <match url=".*" />
                        <conditions logicalGrouping="MatchAll">
                            <add input="{REQUEST_URI}" pattern="^/api/.*" negate="true" />
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        </conditions>
                        <action type="Rewrite" url="/" />
                    </rule>
                </rules>
            </rewrite>
        </system.webServer>
    </configuration>
    

The <staticContent> config sets the character encoding to "UTF-8" for javascript files which prevents any unicode characters in your javascript from being converted before being sent to the browser which can cause errors (e.g. invalid regular expression errors).

The <rewrite> config creates a rewrite rule that enables refreshing of the Angular app without getting 404 errors.

Test your new Angular + ASP.NET Core + SQL Server application running on Azure

 Watch this step on YouTube

Enter the public IP address of your Azure Windows Server in a browser to access and test your new Angular + ASP.NET Core + Azure SQL Server full stack application.

The public IP address can be located on the virtual machine overview page in the Microsoft Azure portal.