Building Projects with Yeoman

By Scott Addie, Rick Anderson and Noel Rice

Yeoman generates complete projects for a given set of client tools. Yeoman is an open-source tool that works like a Visual Studio project template. The Yeoman command line tool yo works alongside a Yeoman generator. Generators define the technologies that go into a project.

Install Node.js, npm, and Yeoman

Note

If you get the error npm ERR! Please try running this command again as root/Administrator., run the following command using sudo: sudo npm install -g yo bower grunt-cli gulp

  • From the command line, install the ASP.NET generator:
npm install -g generator-aspnet

Note

If you get a permission error, run the command under sudo as described above.

  • The –g flag installs the generator globally, so that it can be used from any path.

Create an ASP.NET app

  • Create a directory for the project
mkdir C:\MyYo
cd C:\MyYo
  • Run the ASP.NET generator for yo
yo aspnet
  • The generator displays a menu. Arrow down to the Web Application project and tap Enter:
../_images/yeoman-yo-aspnet.png
  • Use “MyWebApp” for the app name and then tap Enter :

    ../_images/yeoman-yo-aspnet-appname.png

Yeoman will scaffold the project and its supporting files. Suggested next steps are also provided in the form of commands.

../_images/yeoman-yo-aspnet-created.png

The ASP.NET generator creates ASP.NET 5 DNX projects that can be loaded into Visual Studio 2015 or run from the command line.

If you were redirected to this tutorial from Your First ASP.NET 5 Application on a Mac, you can return now.

Setting Grunt as the task runner

Grunt Gulp

The ASP.NET 5 Yeoman generator (generator-aspnet) uses Gulp out-of-the box. This is consistent with how the default ASP.NET web project template works in Visual Studio 2015.

The ASP.NET generator creates supporting files to configure client-side build tools. A Grunt or Gulp task runner file is added to your project to automate build tasks for Web projects. The default generator creates gulpfile.js to run tasks. Running the generator with the --grunt argument generates Gruntfile.js:

yo aspnet --grunt

The generator also configures package.json to load Grunt or Gulp dependencies. It also adds bower.json and .bowerrc files to restore client-side packages using the Bower client-side package manager.

Building and Running from Visual Studio

You can load your generated ASP.NET 5 web project directly into Visual Studio 2015, then build and run your project from there.

  1. Open Visual Studio 2015. From the File menu, select Open ‣ Project/Solution.
  2. In the Open Project dialog, navigate to the project.json file, select it, and click the Open button. In the Solution Explorer, the project should look something like the screenshot below.
../_images/yeoman-solution.png

Note

Yeoman scaffolds a MVC web application, complete with both server- and client-side build support. Server-side dependencies are listed under the References node, and client-side dependencies in the Dependencies node of Solution Explorer. Dependencies are restored automatically when the project is loaded.

../_images/yeoman-loading-dependencies.png
  1. When all the dependencies are restored, press F5 to run the project. The default home page displays in the browser.
../_images/yeoman-home-page.png

Restoring, Building, and Hosting from the Command Line

You can prepare and host your web application using commands dnu (Microsoft .NET Development Utility) and dnx (Micorosft .NET Execution Environment).

Note

For more information on DNX, see DNX Overview

  1. From the command line, change the current directory to the folder containing the project (that is, the folder containing the project.json file):
cd C:\MyYo\MyWebApp
  1. From the command line, restore the project’s NuGet package dependencies:
dnu restore
  1. Also from the command line, build the project assemblies:
dnu build
  1. To run the development web server, use this dnx command:
dnx web

This will execute the corresponding web command in the commands section of the project.json file:

1
2
3
4
"commands": {
  "web": "Microsoft.AspNet.Server.Kestrel",
  "ef": "EntityFramework.Commands"
},

The cross-platform Kestrel web server will begin listening on port 5000:

../_images/yeoman-web-server-started.png
  1. Open a web browser, and navigate to http://localhost:5000.
../_images/yeoman-home-page_5000.png

Adding to Your Project with Sub Generators

You can add new generated files using Yeoman even after the project is created. Use sub generators to add any of the file types that make up your project. For example, to add a new class to your project, enter the yo aspnet:Class command followed by the name of the class. Execute the following command from the directory in which the file should be created:

yo aspnet:Class Person

The result is a file named Person.cs with a class named Person:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace MyNamespace
{
    public class Person
    {
        public Person()
        {
        }
    }
}