Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET

ASP.NET Core Yeoman Generator

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
17 Dec 2016CPOL2 min read 7.5K   2   1
My new Yeoman generator

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 aligned 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, there is 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, you need to install the template with the 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 all the 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, 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 the below result:

9th

And, when I click on Fetch Movies link, it will produce the 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. The sample project can be opened in VS-2017 and it works 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Publicis Sapient
India India
Hey there, it's Rahul Sahay! I'm thrilled to be a platform specialist at Publicis Sapient, where I get to work on some exciting projects. I've been honing my skills in various aspects of the software development life cycle for more than 15 years, with a primary focus on web stack development. I've been fortunate to have contributed to numerous software development initiatives, ranging from client applications to web services and websites. Additionally, I enjoy crafting application architecture from scratch, and I've spent most of my time writing platform agnostic and cloud agnostic code. As a self-proclaimed code junkie, software development is more than just a job to me; it's a passion! And I consider myself lucky to have worked with an array of cutting-edge technologies, from .NetCore to SpringBoot 3, from Angular to React, and from Azure to AWS and many more cousin technologies...

- 🔭 I’m currently working @ below tech stacks
- Microservices,
- Distributed Systems,
- Spring Boot
- Spring Cloud
- System Design,
- Docker,
- Kubernetes,
- Message Queues,
- ELK Stack
- DotNetCore,
- Angular,
- Azure

- 💬 Ask me anything about my articles [My View](https://myview.rahulnivi.net/)
- 📫 How to reach me: [@rahulsahay19](https://twitter.com/rahulsahay19)
- 📫 Github: [@rahulsahay19](https://github.com/rahulsahay19)

Comments and Discussions

 
QuestionNice. Thank you... Pin
Matt Slay17-Dec-16 14:45
Matt Slay17-Dec-16 14:45 
Article looks nice. Thanks. Especially glad to see you are supporting the new csproj structure...

Wanted to point out one small correction you should make to spelling. Change "per-requisites" to "pre-requisites"

Actually, the word is not hyphenated at all, so it really should be "prerequisites".
Matt

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.