10 Minutes to Create & Run .NET Core Angular SPA in Docker

In this article, I’ll demonstrate how to create an ASP.NET Core Angular single-page application using the .NET Core CLI, create a Docker image, and run it as a container. The entire process is just 4 steps, each of which takes about a minute to perform–although creating the Docker image takes a couple minutes to complete. Note, also, that these same steps work from both Linux and Windows.

1. Create Angular application
2. Create Dockerfile
3. Create Docker image
4. Run container

Before you start, make sure you have the following prerequisites installed.

• .NET Core SDK
• Visual Studio Code with Docker extension
• Docker

Installation can be verified by running these commands:

dotnet --version
code --version
code --install-extension ms-azuretools.vscode-docker
docker --version

Create the Application

We begin by creating our Angular application using the dotnet new command and specifying the angular template. The -o argument will cause the new project to be created in a sub-folder named my-app. This will create a .NET Core ASP.NET project with an Angular app in its ClientApp folder. After running the command, go into the new directory and launch Visual Studio Code.

dotnet new angular -o my-app
cd my-app
code .

Add Docker Files

With the Docker extension for VS Code installed, you can add Docker files easily via the command palette. Open the command palette using ctrl+shift+P or View > Command Palette menu options, and run the command Docker: Add Docker Files to Workspace. (Tip: type “docker” to filter commands.)

Selecting the command will ask you a series of questions:

• Application Platform: ASP.NET Core
• Operating System: Linux
• What port(s) does your app listen on? 80, 443

If you’re running Docker on Windows, it’s important to make sure Docker is configured to run the right type of containers (Windows vs Linux). I answered “Linux” above, and I can confirm that my Docker for Windows is configured to run Linux containers by clicking the Docker icon in my system tray, as shown in the screenshot below. It shows “Switch to Windows containers” which means it’s currently using Linux containers. It’s fine to use Windows containers, too, but you’ll need to adjust installation instructions for NodeJS in the Dockerfile further down.

Once you’ve answered the Docker extention’s questions, a Dockerfile is generated. One modification is needed to also install NodeJS for our client app. The lines needed to do this are highlighted in the complete Dockerfile below.

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
WORKDIR /src
COPY ["my-app.csproj", "./"]
RUN dotnet restore "./my-app.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "my-app.csproj" -c Release -o /app/build
RUN apt-get update && \
    apt-get install -y wget && \
    apt-get install -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_10.x | bash - && \
    apt-get install -y build-essential nodejs
    
FROM build AS publish
RUN dotnet publish "my-app.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "my-app.dll"]

Build the Image

When you’re done editing your Dockerfile in VS Code, save changes and head back to the command line. Run the following command to build your image:

docker build -t my-app .

Verify that the image was created by running another command:

docker image ls my-app

Run a Container

Now we’ll use the docker run command to run a container using our image. We’ll specify two arguments: -d to run in detached mode and -p to map ports on the local machine to the container.

docker run -d -p 5000:80 my-app

Verify that the app is running by browsing to the localhost:5000:

Author: Adam Prescott

I'm enthusiastic and passionate about creating intuitive, great-looking software. I strive to find the simplest solutions to complex problems, and I embrace agile principles and test-driven development. View all posts by Adam Prescott