ASP.NET 5 With Open Source - Part 1

In this article I will explain about using Visual Studio Code Editor for ASP.NET 5 open source with npm & Yeoman.

Using Visual Studio Code Editor for Open Source

As all of us know that ASP.NET 5 is now open source but to write the code for ASP.NET 5 we need editors. There are a lot of editors available in the market which can be used but as we are much familiar with Visual Studio we will prefer to use Visual Studio. So Microsoft has created a free editor for it which is known as Visual Studio Code.

Visual Studio Code is an Editor created by Microsoft which is open source and can be used with Windows, Linux and OS X. Debugging, IntelliSense (intelligent code completion), embedded Git control are supported by Visual Studio Code. Visual Studio Code provides us a lot of customizations like changing the Editor’s theme, editor's preferences, editor’s keyboard shortcut and many more customization.

To download Visual Studio Code please visit the URL.

download Visual Studio Code

From this website you can download it for Windows, Linux x64, 32 bit Version and Mac OS X.

I am downloading it for windows.

It will redirect you to a new URL where it will provide a downloadable file as well as having a video for complete details how to use Visual Studio Code.

use Visual Studio Code

Save the setup file and you can also watch the video being displayed on the page while downloading the setup. This video provides very helpful information.

After downloading the setup file install it,

setup file install

install

The setup is very small in size (42.2 MB approx.) and it gets installed within few minutes.

After installation first time it will open the Visual Studio Code like the following screenshot,

Visual Studio

Visual Studio Code

Some more screenshots of Visual Studio Code.

Explore

Explore

Search

Search

Git

Git

Debug

Debug

If any update is available it will be displayed like the following screenshot. To update it you need to click on Update Now or you can choose the option “Later”. You can also read the Release Notes.

Later

File Menu

File Menu

Edit Menu

Edit Menu

View Menu

View Menu

Goto Menu

Goto Menu

Help Menu

Help Menu

Opening Visual Studio Code from Command Prompt.

Run (Window Key +R) - cmd, then write code and press enter

Go to run

cmd code

Windows 10

In Windows 10 just write code in search box and press enter,

Windows 10 just write code

Splitting the Editor

Splitting the Editor

The Visual Studio Code Editor provides the feature to split the Editor window. You can find the Split Editor button at the top right corner of the editor.

Run

Installing Yeoman for scaffolding, package manager & build tool

npm install yo -g

I am using -g to indicate that yeomen will be installed globally i.e. it will be installed for all the users.

The Yeoman workflow is comprised of three core tools for improving your productivity and satisfaction when building a web app. These tools are:

  • Yo - the scaffolding tool from Yeoman.
  • A package manager, such as bower or npm.
  • A build tool, such as Grunt or Gulp.

Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective. Let’s walk through what these binaries can do.

projects

You can see that it is displaying a message:

'npm' is not recognized as an internal or external command, operable program or batch file.
The command prompt is displaying this message, node package manager is not installed on this PC. So first I need to install node package manager.

Installing Node Package Manager

The Node Package Manager can be downloaded from the following link.

Node Package Manager

Custom Setup

Node JS

Now reopen the command prompt and run the following command,

npm install yo –g

It will start installing and will be installed in few minutes.

start installing

Finally Yeoman is installed after few minutes

Yeoman is installed

Now write “yo” on command prompt and press enter.

yo

If anything is deleted or you have cleaned the “~/APPData/Roaming/~” folder then you may get error something like the following,

APPData

Installing ASP.NET 5 using npm

To install ASP.NET 5 using npm you need to run the following command,

npm install generator-aspnet -g

npm install generator-

When ASP.NET is installed successfully then write “yo” on command prompt.

It will show you that a generator Aspnet is installed.

Aspnet is installed

Press enter again on the command prompt then console window will look something like the following screenshot,

command prompt

You can see in the above screenshot that it is saying that this generator can also be run with “yo aspnet”.

Let’s run “yo aspnet” on command prompt.

yo aspnet

To select different type of projects you need to use up and down arrow of your keyboard.

You can also use numbers starting from 1 to select a type of application.

Suppose I have to create a console application then I will press 2. It automatically moves cursor to Console Application and now press enter.

It will ask the application name. Let me give it “MyFirstConsoleApplication”.

application

As it is saying to change the directory by typing cd "MyFirstConsoleApplication”.

MyFirstConsoleApplication

You can also see the file generated by it.

file generated

To open the code in Visual Studio Code Editor write “code”.

cmd

It will open the project in new Visual Studio Code Editor.

Code

Output

To see the output of this application you can use dnx command,

  1. Run—cmd—it will open console window.
  2. Go to the current directory (in my case current directory is, “D:\VSCode\MyFirstConsoleApplication”).
  3. Write dnx MyFirstConsoleApplication (name of your console application).

It will show you the output in the console window,

output

I know that some parts of this article should be explained in more depth but the article is already long so I will explain those things in next tutorial.