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.
![]()