Creating ASP.NET 5 Web Application With Visual Studio Code

 

In this article I am going to explain about creating a web application in ASP.NET 5 with Visual Studio Code and Yeoman. If you are not aware about Yeoman & Visual Studio Code then please read these articles:

• ASP.NET 5 With Visual Studio Code: Part 1
• ASP.NET 5 With Visual Studio Code: Part 2
• Visual Studio Code Keyboard Shortcut

To create ASP.NET 5 web application with Visual Studio code do the following things,

Go to command prompt (Window key +R – cmd then press enter),

Change the directory and go to the folder from where you want to create application i.e. on command prompt go to your current working directory.

Type yo aspnet.



Type 3: It will select web application and press enter.

It creates all the required files and folders and I cannot display all those list in screenshot so I have taken 2 screenshots, first one is the screenshot of top and 2nd one is from bottom.

Top Screenshot



Bottom Screenshot



You can see in the above screenshot it is saying that,

Your project is now created, you can use the following commands to get going,

cd "ASPNET5FirstWebAppWithVSCode"
dnu restore
dnu build (optional, build will also happen when it's run)
dnx web

Use cd "ASPNET5FirstWebAppWithVSCode" to go to the current directory of your application then type code .



It will open Visual Studio Code Editor,



dnu restore

Now type “dnu restore” on command prompt to resolve all the dependencies,

D:\VSCode\ASPNET5FirstWebAppWithVSCode>dnu restore

and press enter. The following is the log data written on console window:

D:\VSCode\ASPNET5FirstWebAppWithVSCode>dnu restore
Microsoft .NET Development Utility Clr-x86-1.0.0-rc1-16231

CACHE https://www.nuget.org/api/v2/
Restoring packages for D:\VSCode\ASPNET5FirstWebAppWithVSCode\project.json
GET https://www.nuget.org/api/v2/FindPackagesById()?id='System.Net.Sockets'
OK https://www.nuget.org/api/v2/FindPackagesById()?id='System.Net.Sockets' 4238ms
Writing lock file D:\VSCode\ASPNET5FirstWebAppWithVSCode\project.lock.json
Restore complete, 47244ms elapsed

NuGetConfig files used

C:\Users\DELL INSPIRON 15\AppData\Roaming\NuGet\nuget.config

Feeds used

 https://www.nuget.org/api/v2/

D:\VSCode\ASPNET5FirstWebAppWithVSCode>

You can notice one thing that it has created a new file “project.lock.json”. You can also find the same in the log of “dnu restore”



In NuGet v3 all packages are downloaded only once to a user level packages directory. The project.lock.json provides the package information to the build system to allow it to only pick packages from the global location that are relevant for the project it is building.

It stores the list of files and relevant content for compilation and runtime so that the build system only has to read a single file instead of many nuspec files.

dnu build

Now run “dnu build”
D:\VSCode\ASPNET5FirstWebAppWithVSCode>dnu build
It will build the application

dnx web

Now run “dnx web”
D:\VSCode\ASPNET5FirstWebAppWithVSCode>dnx web

It will host and run the application,



Hosting environment: Production
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
Open the browser type the url and you can see that application is running.



To close the application go to the command prompt window on which application is running and press “Ctrl+C”.

Now Refresh the browser and you will get the message, This webpage is not available.

ERR_CONNECTION_REFUSED



Or any other custom messages depending on your browser and locale. After creating the build you can notice that there are some warnings.



After clicking on this warning it will show you the details of warnings,



Click on any warning it will go to the file from where warning is related,



Click on Live code analysis (light bulbs) then click Remove Unnecessary Usings

 

You can notice that it will remove all the 3 namespaces which are not being used i.e. it will remove these lines from using directive,

using System;
using System.Collections.Generic;
using Microsoft.Data.Entity;

So in this way you can remove all the 99 warnings. While removing warning you can notice that Visual Studio Code Editor is displaying a separate section “WORKING FILES”.



In the above screenshot you can notice 3 points,

 

1. “Working Files” section is saying that 14 files are unsaved and also displaying all the list of file with scroll bar.
2. A save button to save all the unsaved files.
3. On explore button of sidebar it is displaying 14 (the count of unsaved files).

Creating ASP.NET 5 application with Visual Studio 2015

Let’s create the same thing using Visual Studio 2015, Open Visual Studio 2015,

I am using Visual Studio 2015 Service Pack 1,

Click File, New, then Project,





Now run the application by clicking on Run Button (IIS Express)



It will open the application in web browser. You can see that the output being displayed in web browser is same with Visual Studio code and with Visual Studio 2015. The ASP.NET 5 web application created Visual Studio Code and in Visual Studio 2015 it is almost same because Microsoft is intended to do the same thing with Visual Studio Code which is happening with Visual Studio.

Now change the running option from IIS express to Web in Visual Studio 2015 and run it.



When clicking on Run (web) it opens a console window and run dnx.exe for this application.



In the above screenshot you can see that it is doing the same thing which we have done in Visual Studio Code using console window because it uses the same command which we have used which running the application of Visual Studio Code i.e. “dnx web”.

You can see the title bar of the console application it is saying that dnx.exe is running from the path:

C:\Users\DELL INSPIRON 15\.dnx\runtimes\dnx-clr-win-x86.1.0.0-rc1-update1\bin\dnx.exe

The path will differ depending on current user path i.e. the relative path will be

<Userdirectory>\.dnx\runtimes\<dnx version>\bin\dnx.exe

In my Windows 10 OS I have installed 4 different versions of DNX runtimes and they are the following,

dnx-clr-win-x64.1.0.0-rc1-update1
dnx-clr-win-x86.1.0.0-rc1-update1
dnx-coreclr-win-x64.1.0.0-rc1-update1
dnx-coreclr-win-x86.1.0.0-rc1-update1

You can see the list of DNX runtimes using “dnvm list” command.

C:\Users\DELL INSPIRON 15>dnvm list,

Active Version Runtime Architecture OperatingSystem Alias,
------ ------- ------- ------------ --------------- -----
1.0.0-rc1-update1 clr x64 win
* 1.0.0-rc1-update1 clr x86 win default
1.0.0-rc1-update1 coreclr x64 win
1.0.0-rc1-update1 coreclr x86 win
C:\Users\DELL INSPIRON 15>

If you want to change the default dnx runtime environment then you can use the command,

 

dnvm use <DNX Version> -r <Runtime> -arch <Architecture>

e.g. dnvmuse 1.0.0-rc1-update1 -r coreclr -arch x64,

It will add “C:\Users\DELL INSPIRON 15\.dnx\runtimes\dnx-coreclr-win-x64.1.0.0-rc1-update1\bin” to process PATH.

In the same way we can use any other DNX runtimes as default runtime i.e.

“dnvm use 1.0.0-rc1-update1 -r clr -arch x64” for dnx-clr-win-x64.1.0.0-rc1-update1
“dnvm use 1.0.0-rc1-update1 -r clr -arch x86” for dnx-clr-win-x86.1.0.0-rc1-update1
“dnvm use 1.0.0-rc1-update1 -r coreclr -arch x64” for dnx-coreclr-win-x64.1.0.0-rc1-update1
“dnvm use 1.0.0-rc1-update1 -r coreclr -arch x86” for dnx-coreclr-win-x86.1.0.0-rc1-update1

Now you can check the default version using the command “dnx --version”.

It will display,

C:\Users\DELL INSPIRON 15>dnx --version
Microsoft .NET Execution environment
Version: 1.0.0-rc1-16231
Type: Clr
Architecture: x86
OS Name: Windows
OS Version: 10.0
Runtime Id: win10-x86
C:\Users\DELL INSPIRON 15>

But this is not persistent it will apply to the current session only. If you want to make your changes persistent then use the following command,

 

dnvm use 1.0.0-rc1-update1 -r coreclr -arch x64 -p

It will add “C:\Users\DELL INSPIRON 15\.dnx\runtimes\dnx-coreclr-win-x64.1.0.0-rc1-update1\bin” to process PATH and user Path both.