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.
- Create Angular application
- Create Dockerfile
- Create Docker image
- Run container
Before you start, make sure you have the following prerequisites installed.
- .NET Core SDK
- Visual Studio Code with Docker extension
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:
- Operating System:
- What port(s) does your app listen on?
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
One thought on “10 Minutes to Create & Run .NET Core Angular SPA in Docker”