Installing and Using Yeoman

ASP.NET uses a tool called yeoman to assist in the development of applications for the web by generating the base project file structure and configurations so you can get to work quickly; rather than fiddling around with the same things every time you need to create a new project.

You can install Yeoman using the following command:

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode>npm install yo -g
C:\Users\Nathan\AppData\Roaming\npm\yo -> C:\Users\Nathan\AppData\Roaming\npm\node_modules\yo\lib\cli.js

> yo@1.5.0 postinstall C:\Users\Nathan\AppData\Roaming\npm\node_modules\yo
> yodoctor


Yeoman Doctor
Running sanity checks on your system

√ Global configuration file is valid
√ NODE_PATH matches the npm root
× Node.js version

Your Node.js version is outdated.
Upgrade to the latest version: https://nodejs.org

√ No .bowerrc file in home directory
√ No .yo-rc.json file in home directory
× npm version

Your npm version is outdated.

Upgrade to the latest version by running:
npm install -g npm

Ensure that you used the -g flag to tell the system you want Yeoman available globally.

Next we can install the ASP.NET templates using the following command: (include the -g again for global)

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode>npm install generator-aspnet -g

You can now run the ‘yo’ cmdlet to view the current installed generators on your system:

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode>yo
? 'Allo Nathan! What would you like to do? (Use arrow keys)
  Run a generator
> Aspnet
  ──────────────
  Update your generators
  Install a generator
  Find some help
  Get me out of here!
  ──────────────

You can see we have Aspnet installed and listed. Run this generator by using the following cmdlet:

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode>yo aspnet

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |   marvellous ASP.NET 5   |
    ( _´U`_ )    |        generator!        |
    /___A___\    '--------------------------'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of application do you want to create? (Use arrow keys)
> Empty Application
  Console Application
  Web Application
  Web Application Basic [without Membership and Authorization]
  Web API Application
  Nancy ASP.NET Application
  Class Library
  Unit test project

At this point we want to generate a Web Application, so you can either use the arrow keys, or simply type 3 which corresponds to the third entry; then hit Enter

You will be asked to specify a name for the project, I’ve just chosen to call it TheWorld

? What's the name of your ASP.NET application? TheWorld

Have a look into the directory you generated the files into and you’ll notice all the standard project files are generated for you.

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode\TheWorld>dir
 Volume in drive C has no label.
 Volume Serial Number is 2A20-B603

 Directory of C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode\TheWorld

12/12/2015  04:17 PM    <DIR>          .
12/12/2015  04:17 PM    <DIR>          ..
12/12/2015  04:17 PM                33 .bowerrc
12/12/2015  04:17 PM             3,090 .gitignore
12/12/2015  04:17 PM               167 appsettings.json
12/12/2015  04:17 PM               198 bower.json
12/12/2015  04:17 PM    <DIR>          Controllers
12/12/2015  04:17 PM               146 Dockerfile
12/12/2015  04:17 PM             1,189 gulpfile.js
12/12/2015  04:17 PM    <DIR>          Migrations
12/12/2015  04:17 PM    <DIR>          Models
12/12/2015  04:17 PM               203 package.json
12/12/2015  04:17 PM             1,884 project.json
12/12/2015  04:17 PM             2,722 README.md
12/12/2015  04:17 PM    <DIR>          Services
12/12/2015  04:17 PM             4,116 Startup.cs
12/12/2015  04:17 PM    <DIR>          ViewModels
12/12/2015  04:17 PM    <DIR>          Views
12/12/2015  04:17 PM    <DIR>          wwwroot
              10 File(s)         13,748 bytes
               9 Dir(s)  43,917,889,536 bytes free

Using Visual Studio Code (VS Code)

Next we want to open this project in VSCode. This can easily be done by simply typing:

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode\TheWorld>code .

You will be greeted with the lightweight visual studio code suite with the files we just generated loaded into the Working File menu.

Go ahead and open the project.json file (you’ll recognize this file from the previous tutorial) and have a look at its contents.

The first block is some of the simple project specifications relating to version and namespace.

{
  "version": "1.0.0-*",
  "userSecretsId": "aspnet5-TheWorld-8d40ceab-225c-43dd-b17b-c58e50e50d29",
  "compilationOptions": {
    "emitEntryPoint": true
  },
  "tooling": {
    "defaultNamespace": "TheWorld"
  },

The next block is one we’ll be using quite regularly, the dependencies for the project listing the NuGets we’re going to use when building our application.

"dependencies": {
  "EntityFramework.Commands": "7.0.0-rc1-final",
  "EntityFramework.SQLite": "7.0.0-rc1-final",
  "EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final",
  "Microsoft.AspNet.Authentication.Cookies": "1.0.0-rc1-final",
  "Microsoft.AspNet.Diagnostics.Entity": "7.0.0-rc1-final",
  "Microsoft.AspNet.Identity.EntityFramework": "3.0.0-rc1-final",
  "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
  "Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
  "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
  "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
  "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
  "Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
  "Microsoft.Dnx.Runtime":"1.0.0-rc1-final",
  "Microsoft.Extensions.CodeGenerators.Mvc": "1.0.0-rc1-final",
  "Microsoft.Extensions.Configuration.FileProviderExtensions" : "1.0.0-rc1-final",
  "Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final",
  "Microsoft.Extensions.Configuration.UserSecrets": "1.0.0-rc1-final",
  "Microsoft.Extensions.Logging": "1.0.0-rc1-final",
  "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
  "Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final"
},

Finally we’ve got some specified commands and housekeeping code.

"commands": {
  "web": "Microsoft.AspNet.Server.Kestrel",
  "ef": "EntityFramework.Commands"
},

"frameworks": {
  "dnx451": { },
  "dnxcore50": { }
},

"exclude": [
  "wwwroot",
  "node_modules",
  "bower_components"
],
"publishExclude": [
  "**.user",
  "**.vspscc"
],
"scripts": {
  "prepublish": [
    "npm install",
    "bower install",
    "gulp clean",
    "gulp min"
  ]
}
}

Next open up the Startup.cs file. You’ll notice along the top bar that there will be unresolved dependencies which you’ll be asked to resolve by clicking Restore.

A terminal windows will spring open and begin downloading and installing all the required NuGet packages. If this is your first time using these NuGet packages, there’s a good chance it’ll take some time to install.

Restore complete, 167284ms elapsed

NuGet Config files used:
    C:\Users\Nathan\AppData\Roaming\NuGet\nuget.config

Feeds used:
    https://api.nuget.org/v3-flatcontainer/

Installed:
    265 package(s) to C:\Users\Nathan\.dnx\packages

You will now get intellisense on most of your project! Yay!.

Just back into the project.json file and have a look at the code between the ‘commands’ braces. You should see two:

"web": "Microsoft.AspNet.Server.Kestrel",
"ef": "EntityFramework.Commands"

So let’s give one of them a go. Open your terminal windows again and run the following:

C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode\TheWorld>dnx web

Near the end of the output you’ll see the following lines that indicate that you have a webserver running on port 5000 hosted on the local machine.

Hosting environment: Production
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

Go ahead and open your web browser to the specified location and you’ll be greeted with a wonderful splash screen that is actually your ASP.NET instance running from the command line. You can view live requests chains in the terminal windows as you navigate around the splash screen.

info: Microsoft.AspNet.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/js/site.min.js'. Physical path: 'C:\Users\Nathan\OneDrive\02 - Code\15 - ASP.NET\vscode\TheWorld\wwwroot\js\site.min.js'
info: Microsoft.AspNet.Hosting.Internal.HostingEngine[2]
      Request finished in 0.3562ms 200 image/png
info: Microsoft.AspNet.Hosting.Internal.HostingEngine[2]
      Request finished in 0.375ms 200 image/png
info: Microsoft.AspNet.Hosting.Internal.HostingEngine[2]
      Request finished in 0.1687ms 200 image/png
info: Microsoft.AspNet.Hosting.Internal.HostingEngine[2]
      Request finished in 0.1484ms 200 application/javascript
info: Microsoft.AspNet.Hosting.Internal.HostingEngine[2]
      Request finished in 0.2016ms 200 image/png

Summary

We’ve learned how to generate code using Yeoman and edit/view it in Visual Studio Code. In the next lesson we’ll be learning how to do the same thing, from scratch in Visual Studio 2015. Hopefully I’m not going into too much detail, but I think it’s beneficial to have the whole process documented instead of assuming everything will understand exactly what’s going on.