Publishing ASP.NET Core 2 Web API + Angular 6 + SQL Database application to Azure platform

Photo by Matt Botsford on Unsplash

There you are, at the end of project’s journey. You have finished your program. And now you want to share with others. I will show you step by step how to publish your application to Azure platform.

Requirements:

• Activated Azure account (You can sign up and activate your account for free)
• Git repository of application’s source code

I. Set up Azure environment

Create web app

1. Login to your Azure account
2. Click “Create a resource” -> Networking -> Web App
3. Fill required fields and click “Create”. Wait until new app is added to your dashboard

Adding environment variable

You will use your new environment variable later to conditionally select database based on the environment in which your application is running

Go to application settings and create new variable called ASPNETCORE_ENVIRONMENT(under Application settings menu) with Production value

Click “Save”

Creating Azure SQL Server

1. Click “Create a resource” ->Databases -> Sql Database
2. Fill required fields and click “Create” (create sql server if you don’t have one)

II. Set up Visual Studio Team Services environment

VSTS will check your application’s repository for new commits and will run essential tasks for building and starting your app. Then VSTS will deploy compiled files to azure

Create new build pipeline

1. Sign in to Visual Studio Team Service account with the same account you used to sign in to azure portal
2. Create new project
3. Click “Build and release” dropdown and select Builds
4. Click “New pipeline”

Select source provider

You can select whatever source provider you like. I selected GitHub

Click “Continue”

Select template

Click “Empty process”

Start adding tasks to pipeline

Stop web app on azure

1. Add “Azure app service manage” task
2. Set the same options as below

Install angular dependencies

Add “npm” task

Building angular app in production mode

You will add “build-prod” script to angular app configuration file later

Add second “npm” task. This will build your project in production mode. Set arguments to build-prod

Install SDK Core

Add “.NET Core Tool Installer” task . To get your SDK version number. Open “Windows Powershell” and type

dotnet --version

Add “NuGet tool installer” task and leave fields with default parameters

Add “.NET Core” task and set command field to restore

Add another “.NET Core” task . This will build your project

Set arguments to: --configuration release --no-restore

You need to specify “no-restore” parameter because you have already done the restore in the previous task

Add one more “.NET Core” task and set Command to publish. This task will take your final results from previous task(build). Set arguments to

--configuration release --output $(build.artifactstagingdirectory)

Add “Publish Build Artifacts” task. Set path to publish to $(build.artifactstagingdirectory) because that has been the output in the previous step. Set Artifact name to drop .

Add “Azure App Service Deploy” task. Set Package or folder to $(build.artifactstagingdirectory)/**/*/.zip

Add “Azure App Service Manage” task and set Action to Start App Service

Now your task list should look like it is shown below

III. App configuration

Now you should configure your app for two different environments: development and production.

Web API configuration

Add connection string to your Azure Database. Open appsettings.json in your Web API project folder. Add new connection string to your configuration file. Your connection string must look like it is shown below.

Server=tcp:{azure_sql_server};Initial Catalog={azure_sql_database};                                 Persist Security Info=False;                                        User ID={your_username}; Password{your_password};
MultipleActiveResultSets=False; Encrypt=True;
TrustServerCertificate=False; Connection Timeout=30;

Now in ConfigureServices method of your Startup class you can conditionally select relevant database thanks to the environment variable.

Angular configuration

Find and open package.json file in angular project folder. Add "build-prod":"ng build --prod"under the “scripts” node.

When building app with --prod argument, angular will load environment.prod.ts file instead of environment.ts file. You can find them in /src/environments folder.

You can export data from environment file and use it in your program. For example, to change your Api Url from localhost to Azure.

When you are ready, you can push your changes to the remote repository. VSTS will get the updates, process your code through build pipeline and deploy changes to Azure.

I hope you will find this helpful.