How To Build SPA Application With ASP.NET Core And Angular 2 Using Yeoman

Yeoman is nothing more than a template generator. It’s the scaffolding tool that the folks in the Node.js community use. Let’s understand pre-requisites first. (Here, I am assuming you already have node.js, .NET Core SDK, and tooling).

Prerequisite 1 - Install Yeoman’s aspnetcore-spa

npm install -g yo generator-aspnetcore-spa

This command will install both Yeoman and generator for the ASP.NET SPA framework. Yo is the reference for the Yeoman tool. -g indicates that these tools are available in global cache no matter where I am on my machine.

Prerequisite 2 - Install Webpack

The other tool that I need is Webpack. To install webpack, we can use the below command.

npm install -g webpack

Webpack is a library minification and concatenation tool similar to gulp and grunt etc. This will take care of the task of concatenating and minifying our CSS and JavaScript components. This is the new recommendation in Node.js community.

Now, we can begin with actual project generation steps.

Step 1 Initiate new project generation with aspnetcore-spa template

To start, navigate to directory where you want to create your project and then, use the below command.

yo aspnetcore-spa

This is going to start the Yeoman generator and allow me to go and start choosing frameworks.

Step 2 Choose Angular2 Framework

In this step, I will choose Angular 2 Framework, as shown below.

Step 3 Select type of project

Using Yeoman, you can create ASP.NET Core project using project.json as well as .csproj. In this tutorial, I will be selecting project.json.

Step 4 Include unit tests

In this tutorial, I am going to skip unit tests, hence, select ‘N’ for this option.

Step 5 Mention Project Name

In this step, you need to specify project name.

Step 6 Installing Dependencies and Restoring Package

Once you specify project name and hit ENTER, Yeoman generator will start installing npm dependencies and restoring NuGet packages. In case you get an error, you can do these steps manually using ‘npm install’ and ‘dotnet restore’ commands.

After successful installation of npm dependencies and NuGet packages, you will see the following screen.

Step 7 set development environment

Before starting the application, we need to set the development environment. This can be done using ASPNETCORE_ENVIRONMENT variable. Use ‘set ASPNETCORE_ENVIRONMENT=Development’ command to set development environment.

Step 8 Run application

Now, I'm going to run application using ‘dotnet run’ command, and it's going to start up and boot my application here. As you see in the below screenshot, it is listening on port 5000.

Type http//localhost5000/ in browser and hit ENTER.