Building Asp.Net Core Applications With an Angular Frontend Using Docker

Ashwin Kumar
Sep 13 · 5 min read

Running .Net Core applications with a frontend SPA framework like Angular or React is now as simple as using one of the built-in templates in Visual Studio. Visual Studio also provides excellent docker support but there can be a few gotchas along the way that we need to be aware of.

In this blog post, we’ll be looking at building an ASP.Net Core application with an Angular SPA for the frontend and creating a ready-to-publish docker image out of it. The first thing we need is to create the project.

In Visual Studio, create a new project using the Asp.Net Core Web Application template and click next. Give the project a name and click create. On the next step, select Angular from the list of templates and click create.

Run the project by hitting F5. You should see the application open with the ‘hello world’ page.

Now to add docker support, we can right click the project and click on docker support under the add menu.

This will create a docker file in the project which looks like this,

Taking a closer look at the sections, we see a multi-stage docker build process with the first section showing a base image (aspnet:3.1-buster-slim) which will contain our application,

The next section shows another image (sdk:3.1-buster) which is used to build our application,

Once the build process is complete, the contents of our application is copied into base, ending the process with an image containing our application.

Lets try to build this image that is ready to publish with docker. On a terminal window, navigate to the root of your project and try to build the image,

Ooops! Errors!

We can see the publish process failed with an error when trying to do an npm install,

Where is the npm install coming from? Upon editing the project file, the target for publish reveals the exact set of commands that are run to build the angular project,

The target named ‘PublishRunWebpack’ is attempting to build the angular project, and the reason for failure is that it cannot find the npm command in the build container since the build image does not come with nodejs installed.

A simple fix would just be to install nodejs in the build container before starting the dotnet build process. To do this, edit the docker file and add the lines to install nodejs,

Note: The node js version is set to 12.x but you can change this to match the nodejs version that you need for your project.

Run the docker build command again and the build should go through successfully.

Although this is working, we can make the process run faster by deploying an image of the build container with nodejs installed in it. This can be made available in your container registry or on docker hub, and we can then use this image in our docker file instead of the official image. I already have a version of this deployed to my docker hub here (Github). Another good addition would be to run the unit tests before the publish step and to add the — no-cache option to the dotnet restore command since docker will take care caching layers. (Thanks Richard Collette for the tip)

To use it, revert the docker file build section to use this image and add the step to run unit tests, like so,

Lets start a container based on this new image,

Open the app at http://localhost:8001 and you should see the app load successfully.

If you have further questions on the topic, feedback on the article or just want to say hi you can hit me up on twitter or linkedin.

The Startup

Medium's largest active publication, followed by +704K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store