by

ASP.NET Core Yeoman Generator

Hi Friends,

In this section, I will talk about my new Yeoman generator. In this Yeoman Generator, I have published ASP.NET Core scaffolding template with Angular 2 and TypeScript. This will enable developers to get started with Single Page App (SPA) development quickly. One point to note here is, this template is align with new ASP.NET Core changes where it embraces .csproj system rather than .xproj.

13th

Here is the NPM Site link:- https://www.npmjs.com/package/generator-aspnetcore-angular-2. Here, also you will find all the details about how to install the generator. You can also discover the same on Yeoman site as well.  Obviously, these templates are completely node and yeoman driven, hence it is needless to say that these are per-requisites. With that being said, let’s go ahead and discover the same with sample installation. Since, I have already installed Yeoman globally, hence no need to install that again. Hence, I started with step 2. Upon successful installation of generator, it will show some warning, but that’s ok, you can skip that.

11th

Then, yo need to install the template with below shown command either at the same location or some other location.

2nd

Once, you run the same, it will start creating the required files as shown below.

3rd

Here, I will answer the all questions and then hit enter. Like in template selection, I will simply hit enter, as currently I am keeping one template, in coming versions, will have more templates.

4th

5th

 Once the same gets created successfully, then it will look like

6th

Then, I need to traverse in the working directory where my proj files are sitting like shown below. Then, I need to say dotnet restore. This will restore all the dependencies from nuget feed.

8th

Now, I will run the same using dotnet run and then I navigate to http://localhost:5000. This will produce me the below result.

9th

And, when I click on Fetch Movies link, it will produce me below page.

10th

However, When I open the same in Visual Studio Code, it will look like

12th

 

 

 

 

 

 

 

 

 

 

 

As you can see, this is based on the new changes around ASP.NET Core. Sample project can be opened in VS-2017 and it work there as well.

Note:- Run webpack –watch from command line to make changes and see changes live.

Generator Link:- https://github.com/rahulsahay19/generator-aspnetcore-angular-2

Demo:-

I hope, you would have liked this post. Thanks for joining me.

Thanks,
Rahul Sahay