ASP.NET Core 1.0 – Create web application using Yeoman and Visual Studio Code

ASP.NET Core 1.0Creating ASP.NET Core 1.0 web applications is very easy using Visual Studio Code along with Yeoman generators. Here in this tutorial will learn about creating web application and running it.

These steps are not confined to Windows environment alone, we can use them on Mac or Linux

This example is for creating basic ASP.NET Core 1.0 empty application without need of Visual Studio IDE.

What we will learn here?

  1. Ensure NPM, Yeoman, Visual Studio Code is installed
  2. Install ASPNET yeoman generator.
  3. Create ASP.NET Core 1.0 empty web application using Yeoman generator
  4. Add Static Files and Default Files packages and DNU restore
  5. Creating index.html file and run application using lite-server

Step 1 : Ensure NPM, Yeoman, Visual Studio Code is installed

NPM(Node Package Manager) is used to install Yeoman, Angular and other packages. NPM can be installed using Installing Node.js and updating npm

yo is the Yeoman command line utility allowing the creation of projects utilizing scaffolding templates (referred to as generators). Yo and the generators used are installed using npm.

Going through GETTING STARTED WITH YEOMAN will help us get Yeoman installed and its usage.

Visual Studio Code (VS Code) is code editor redefining how simpler life can get, esp I liked idea of working with ASP.NET Core 1.0 apps without full fledged Visual Studio IDE.

Quick snapshot of NPM, Yeoman installed. Installing them globally will avoid doing these steps again.

ASP.NET Core 1.0

Verify NPM and Yeoman are installed

Step 2: Install ASPNET Yeoman generator

Now that Yeoman generator is installed, we need to install ASPNET generator for creating ASP.NET Core 1.0 applications.

Recommend reading ASPNET generator for more understanding

Open command prompt and run following command, ensure that you are connected to Internet.

ASP.NET Core 1.0

ASPNET Yeoman Generator installed

Step 3: Create ASP.NET Core 1.0 empty web application using Yeoman generator

There are two ways to create ASP.NET Core 1.0 applications using Yeoman generators itself – Command line option and Visual Studio Code  yo extension option.

Lets create using command line option and check out steps involved

ASP.NET Core 1.0

Create ASP.Core 1.0 applications using Yeoman in Command line

  1. Creating directory which contains all generated code.
  2. Running yo aspnet command to invoke Yeoman generator for ASPNET
  3. ASPNET generators asks us to select various kinds of project to be created like empty, console, web, classlib etc. I choose “Empty Application”.
  4. Naming empty web application as “DemoApp”
  5. Lists all files created using ASPNET generator
  6. After creation of application, its usually better to do DNU restore but we will hold that for moment.

Now lets create using Visual Studio yo extension, (install yo extension first). Checkout GIF below for steps, I will be creating full ASP.Core 1.0 web application instead of an empty application.

ASP.NET Core 1.0

Creating ASP.NET Core 1.0 using VS Code

Step 4: Add Static Files packages and restore

ASP.NET Core 1.0 works on adding packages as needed, add static files package in “project.json” and open Startup.cs class “Configure” method to add following code

After adding “StaticFiles” middleware in dependencies of project.json, then click “Restore” to perform DNU restore.

ASP.NET Core 1.0

Add StaticFiles middleware and click Restore

Step 5: Creating index.html file and run application using lite-server

ASP.NET Core 1.0 has wwwroot folder which directory for all static files like HTML page, CSS, JS files, etc.

Lets create “index.html” in wwwroot of our application like this

ASP.NET Core 1.0

Creating HTML page using Yo ASPNET

Visual Studio Code is just code editor, to run web application we need to use web server. We will install lite-server, just follow link to install lite-server

Now open wwwroot folder in console and run “lite-server”, it opens up browser and displays “index.html“.

These steps can be replicated in Mac OS or Linux environments as Visual Studio Code and ASP.NET Core 1.0 are cross platform open source projects.

You may also like...

9 Responses

  1. Vlad says:

    Helle, I’ve managed to make an ASP.NET Core MVC project generator for yeoman with PostgreSQL support, you can find it here if you are interested: https://github.com/DeathArrow01/generator-aspnetpostgresql

    It’s a quick hack of another project generator but it works.

  2. renanoble says:

    do we use “dotnet run” or dnx web with asp.net core 1.0.

  3. aguafrommars says:

    Actualy we don’t need a web server because kestrel is a web server, just run “dnx web” !

  1. February 19, 2016

    […] Its interesting to know that ASP.NET is not confined to Visual Studio IDE alone, its must to refer Create web applications using Yeoman in Visual Studio Code […]

  2. February 23, 2016

    […] ASP.NET Core 1.0 – Create web application using Yeoman and Visual Studio Code by Mithun Pattankar. […]

  3. March 1, 2016

    […] ASP.NET Core 1.0 – Create web application using Yeoman and Visual Studio Code : Mithun Pattankar 가 Visual Studio Code 와 Yeoman 라이브러리를 이용해서 손쉽게 ASP.NET Core 웹 애플리케이션을 만드는 방법을 소개했습니다. […]

  4. March 1, 2016

    […] ASP.NET Core 1.0 – Create web application using Yeoman and Visual Studio Code : Mithun Pattankar 가 Visual Studio Code 와 Yeoman 라이브러리를 이용해서 손쉽게 ASP.NET Core 웹 애플리케이션을 만드는 방법을 소개했습니다. […]

Leave a Reply