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.
- 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:
code --install-extension ms-azuretools.vscode-docker
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
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…