Angular + ASP.NET Core Quick Start with .NET Core CLI

Almost a year ago I created the Angular 2 + ASP.NET Core QuickStart using Visual Studio Code. In that quickstart I used the Yeoman generator for ASP.NET core apps to scaffold base the ASP.NET Core application. I then showed you how to manually configure TypeScript, configure and install client dependencies, configure ASP.NET Core, and more. It was a lot of work for a simple quick start!

Fortunately, things have become much easier since then, and we can now do all of this automatically by using the Microsoft.AspNetCore.SpaTemplates package and the .NET Core CLI.

Prerequisites

Ensure that you meet the prerequisites before continuing further:

  • Check your version of Node.js by running node -v
  • Check your version of dotnet by running dotnet --info

Install the project templates

First we need to install the Microsoft.AspNetCore.SpaTemplates package. This package contains Single Page Application (SPA) templates for ASP.NET Core that plugs directly into the .NET Core CLI and will work on Windows, Mac, and Linux.

To install the new project templates, execute the following command:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Create the project

Next, we will create the project. Navigate to the folder where you would like to create the project. Execute the following commands:

mkdir QuickStart
cd QuickStart
dotnet new angular
dotnet restore

Building and running the application

Execute the following command to build and run the application:

dotnet run

When you navigate to http://localhost:5000/ you will see the following quick start application:

Next Steps

In this post I showed you how simple it is to create a Angular + ASP.NET Core application using the Microsoft.AspNetCore.SpaTemplates package and the .NET Core CLI. In summary, you just run dotnet new angular and you are ready to start coding! There’s a lot more to learn, so please check out the following resources:

Thanks for reading, please feel free to post any questions or comments below.

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Thiago Sobral
7 years ago

So much easier, hey! And it’s the same Steve Sanderson’s template, isn’t it? Cheers

Jason Taylor
7 years ago
Reply to  Thiago Sobral

Yep. 🙂 Check out the first link under Next Steps for a detailed overview of the template.

trackback

[…] Angular + ASP.NET Core Quick Start with .NET Core CLI […]

trackback

[…] February I wrote a quick post titled Angular + ASP.NET Core Quick Start with .NET Core CLI. Within that post, I introduced ASP.NET Core JavaScript Services and demonstrated how to create a […]

cikin my
cikin my
6 years ago

hi Jason, I am so new to this..I try your tutorial, but a after I go to my http://localhost:5000/ , I got blank page, why is that? . thanks in advance!