Hosting Angular app in Azure using ASP.NET Core

Since I started Angular development (coming from a Microsoft background), I’m constantly struggling how to host my Angular applications.
All of my applications are hosted on Windows Azure, so it makes sense to host my Angular app there as well.
You can simply create an ASP.NET web application and add Angular to it (see https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html), but if you don’t want all the overhead or if you are working on a project where other developers are not used to Visual Studio and ASP.NET, there should be another way.

In my case I’m working on an Angular project on Github and I want to host it somewhere, but it should only be accessible by the employees of the company I work for.
I first tried out Github Pages, but there is no way to make your pages private and I don’t want to add authentication to my Angular App (yet).
So I figured out another way using ASP.NET Core, that will fulfill all my requirements.

First of all you should create the distribution package for your app. There are several ways to do this.
I’m using Angular CLI for my app and can simply run:

$ ng build --prod

This will create a dist folder containing all the porduction files you need for hosting your app.

Next is creating an ASP.NET Core application in Visual Studio.

Select  the empty application and host it in Azure.

You should have something like this

Next copy all files from the dist folder from you Angular app to the wwwroot folder in you ASP.NET Core application.

In the next steps we will add some components to the ASP.NET Core application so it can handle all the functionality the Angular app needs.

First open up the package.json from your ASP.NET Core application and add the ASP.NET Core static files package:

{
 "dependencies": {
 "Microsoft.NETCore.App": {
 "version": "1.0.1",
 "type": "platform"
 },
 "Microsoft.AspNetCore.Diagnostics": "1.0.0",
 "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
 "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
 "Microsoft.Extensions.Logging.Console": "1.0.0",
 "Microsoft.AspNetCore.StaticFiles": "1.0.0"
},
...

Next open the Startup.cs file from the ASP.NET Core application and change the Configure method, so it can handle static files.

 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
 {
     loggerFactory.AddConsole();
     if (env.IsDevelopment())
     {
          app.UseDeveloperExceptionPage();
     }
     //app.Run(async (context) =>
     //{
     //    await context.Response.WriteAsync("Hello World!");
     //});
     app.UseDefaultFiles();
     app.UseStaticFiles();
}

Now you should be able to run your application from Visual Studio (press F5) or deploy it windows azure.
Only thing left is adding the security rule, so it’s not publicly accessible.

You can simply add some middleware to ASP.NET Core to check the IP-address like this.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
	loggerFactory.AddConsole();
	if (env.IsDevelopment())
	{
		app.UseDeveloperExceptionPage();
	}
	app.Use(async (context, next) =>
	{
		if (context.Connection.RemoteIpAddress.MapToIPv4().ToString() == "11.22.33.443" ||  //Your IP
			context.Connection.RemoteIpAddress.MapToIPv4().ToString() == "0.0.0.1") // For dev purposes
		{
			await next.Invoke();
		}
	});
	app.UseDefaultFiles();
	app.UseStaticFiles();
}

Of course you can move the IP security to a seperate class and move the IP addresses to a configuration file, but that’s not part of this article.

For other security options you can also check the ASPNET Core Security package Microsoft created for you .

Enjoy it!