Yeoman generators for ASP.NET 5

Sayed Ibrahim Hashimi

Hi everyone, this post is in my name but it’s authored by Sourabh Shirhatti. He was a **Program Manager Intern **from the University of Texas at Austin that I’ve had the pleasure of working with this summer. This post is long overdue, we should have posted this a while back. Better late than never 🙂

Building complex modern web applications used to be difficult because of the lack of tooling to maintain and develop client-side code. Recent Open Source projects have made it easier to manage complex client-side code. Writing Coffeescript/Typescript has made Javascript more manageable. Likewise, SASS/LESS have alleviated many of the pain points of CSS.

However, this has resulted in a more involved build process to prepare an application for deployment. In addition to compiling your Coffeescript and SASS, readying an application for deployment involves bundling and minification of CSS, minification and possibly inlining of Javascript among other tasks.

Task runners like Grunt and Gulp can help perform most of the the mundane work for you after you’ve configured them, but configuring them is no trivial task. Take a look at a sample GruntFile

Additionally, package managers like npm and bower help manage dependencies for increasingly complex client-side code.

Setting up all these tasks for every new project can be a daunting task. That’s where yeoman comes in handy.

Introducing Gulp, Grunt, Bower, and npm support for Visual Studio is a good read about task runner support in Visual Studio

What’s yeoman?

Yeoman is a client-side stack of tools that help building web applications. The Yeoman workflow is comprised of three tools:

1. a scafolding tool (yo)
2. a task-runner/build tool (Grunt, Gulp); and
3. a package manager (Bower, npm)

According to the yeoman homepage, “Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive”.

What’s yo?

As the Yeoman website succintly puts it, “yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.”

Why do we care about yeoman?

Yeoman runs as a command-line interface written in Node.js providing cross-platform support for Mac, Windows and Linux. A Yeoman generator for ASP.NET 5 emphasizes our continued effort to enable cross-platform development of ASP.NET.

How do I get started with Yeoman?

Install Node.js

1. Since yeoman runs on Node.js, you can get started by installing the binaries from the Node.js website or using a package manager (brew, apt-get, yum, etc).

   Note: You might want to install nodejs-legacy on Debian systems to prevent conflicts with Amateur Packet Radio node Program

OSX / Linux

In a terminal you can execute the following command.

if (if ! (which node > /dev/null); then echo “Node.js not found”; fi && if ! (which npm > /dev/null); then echo “npm not found”; fi) then echo “Looks like you have both Node.js and npm installed”; fi

Windows

In a PowerShell prompt you can execute the following command.

if(!(get-command node -ErrorAction SilentlyContinue)){‘node not found’ | Write-Error } if(!(get-command npm -ErrorAction SilentlyContinue)){‘node not found’ | Write-Error }

**Install yo **

1. Let’s use npm to install yo as well as the ASP.NET 5 generator using the following command

   npm install -g yo generator-aspnet
   

How do I scaffold a new ASP.NET 5 application?

To get started with the Yeoman generator for ASP.NET, launch a Terminal (or powershell) window and type the following command

$ yo aspnet

You should see a response similar to the following.

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

? What type of application do you want to create? (Use arrow keys)
❯ Console Application 
  Web Application 
  MVC Application 
  Nancy ASP.NET Application 

You can use the arrow keys to select a template type. In this article I will be creating a MVC Application.

Next, you will be prompted to name your application

[?] What's the name of your ASP.NET application? (MvcApplication1)

I am going to use the default name MvcApplication1, but you are free to rename your application.

On proceeding, the generator will create an empty application the following layout

.
├── MvcApplication1
│   ├── Controllers
│   │   └── HomeController.cs
│   ├── Models
│   │   └── User.cs
│   ├── Startup.cs
│   ├── Views
│   │   ├── Home
│   │   │   └── Index.cshtml
│   │   └── Shared
│   │       └── _Layout.cshtml
│   └── project.json
└── NuGet.config

6 directories, 7 files

Note you may want to install ASP.NET 5 runtime to get the command line tools.

How do I contribute to this project?

This project is hosted on GitHub at omnisharp/generator-aspnet and we accept pull requests from the community.

Sourabh Shirhatti

Sayed Ibrahim Hashimi Principal Product Manager, Visual Studio

Follow