How To Install Yeoman Code Generators

Yeoman is a code generator tool that enables you to create simple software projects. Yeoman works by presenting you with a few questions in a wizard-like command line interface, and then uses your responses to generate the code files for your starter project.

In this article, you will learn how to install Yeoman and install the ASP.NET Core generators for Angular. Then, you will create an ASP.NET Core application with a C# back-end and an Angular Front End.

Note: For those who are not familiar with .NET Core, it is a cross platform version of .NET that can be developed on Windows, MacOS or Linux.

yeoman-angularjs-and-d3-a-solid-stack-for-web-apps-12-638.jpg

In this short section, you will install the Yeoman generators with .NET CORE 1.1. For newer version scroll to the bottom.

  1. Open Visual Studio Code, and then, on the File menu, click Open Folder.
  2. In the Select Folder dialog, navigate to the “AzureToolkit” folder that you created during the lab configuration steps, and then click Select Folder.
  3. On the View menu, click Integrated Terminal.
  4. To install Yeoman, type npm install -g yo and then press Enter.Yeoman is a program that allows us to get some pre-generated ASP.NET Core sample code. The “-g” that we included in the install command above will install Yeoman globally (rather than installing to a specific local folder). You can find out more about Yeoman at http://yeoman.io/

    YO

    Note: When you run this command, it may take 5-10 seconds before you see anything on screen. Just give it a chance.

  5. To install the ASP.NET Core generator, type npm install -g generator-aspnetcore-spa and then press Enter.Once the ASP.NET Core generator is installed, you will be able to generate some sample code simply by running a command in the Terminal panel.

     

     

     

    CodeGenNote: You may see warnings in your console when you run this command. This is expected and is part of the npm process when restoring packages that may or may not be the latest version. You can safely ignore these.

  6. At the command prompt, to launch the Yeoman code generator, type yo aspnetcore-spa and then press Enter.When you run the yo aspnetcore-spa command, Yeoman will ask a series of questions to determine what technologies to use and how to set up your project.
  7. To select the Angular framework, ensure that the option for Angular is selected, and then press Enter.For this project we’ll be using Angular, but you can see that there are templates for many other popular frameworks.
  8. To specify that you don’t want to include unit tests, type n and then press enter.In reality you should always include unit testing, but to keep this course simple we’re not going to include them.

## Please use “dotnet new” templates instead

As of .NET Core 2.0, it’s no longer necessary to use Yeoman to create new Single-Page Application projects.

Using the .NET Core 2.0 SDK, you can run any of the following commands in an empty directory, without needing to install any external packages first:

* dotnet new angular
* dotnet new react
* dotnet new redux

Or, if you want to create an Aurelia, Knockout, or Vue application, you should run dotnet new –install Microsoft.AspNetCore.SpaTemplates::* first. This will add aurelia, knockout, and vue templates to dotnet new.

### This Yeoman generator is DEPRECATED

Please don’t use generator-aspnetcore-spa to create new projects. Its output is outdated and no longer maintained. Instead, use dotnet new as described above (or if you’re on Windows and use Visual Studio, you can just
use File->New Project to create Angular, React, or React+Redux projects).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.