Running ASP.NET 5 and Visual Studio Code for MAC

Visual Studio Code

ASP.NET 5 is around the corner for few months now.  A big excitement is how to run ASP.NET 5 in a MAC Box or under a Linux flavor. In this post I am focusing on running ASP.NET 5 application in a MAC Box. In a Linux Box like Ubuntu should be the same.

What you need?

  1. Install ASP.NET 5  and DNX in your MAC
  2. Visual Studio Code for MAC (Yes it true you have a Visual Studio version for your MAC Now)
  3. YeoMan for MAC (This is a web scaffolding tool that runs in a shell. You need this to create the base ASP.NET 5 project template)

OK, Lets get started

1. Install ASP.NET 5 and DNX in your MAC

We require a package manager called Homebrew. Open your terminal app and using this shell command install Homebrew. 

Wait a few seconds and follow the install instructions, you have Homebrew installed.

Open your terminal application and execute these commands to install ASP.NET 5 to your MAC.

Now you need to set some environment variables to get things smooth. Use your favourite editor to do this. I used vi to edit my .bash_profile file.

and add these lines and save the file.

vi

now do an upgrade (a good practice if anything updated to the binaries).

2. Installing Visual Studio Code for MAC

From the above link visit Visual Studio web site. And you will a blue box to the left and click the download link to download and install Visual Studio Code for MAC OSX. After installing and running for the first time Visual Studio Code will look like this.

Visual Studio CodeNow lets get focus on installing YeoMan for MAC. This is not a must requirement, but its recommended you have this. Using this nice little tool you can scaffold the project template for ASP.NET 5. Yep there is a small catch to do this, there are few little things to be setup before installing YeoMan. To install YeoMan you will need NPM and to install NPM you need NODE. NPM is the package manager for NODE like you use NuGET on Visual Studio Projects.

Installing NODE and NPM

Now its time to install NODE and NPM. In your terminal window run this shell command.

Wait and relax a few seconds (may be few minutes depending on your connection) , NODE and NPM are installed for you. To check all are fine just run these two commands in the terminal window.

If you see these two outputs in your terminal, YAY !!! you have NODE and NPM installed and you are ready to rock.

Terminal, NODE and NPM

3. Installing YEOMAN for MAC

Let us install YEOMAN now and few tools required along with it. Again in your terminal window, execute this shell command.

OK cool, we are almost there to create our first ASP.NET 5 project on MAC OSX. Lets check YOMEN installed. Just execute this simple command in your terminal window and see the output.

YO Terminal

OK, you see Aspnet in the list. This because I have already installed ASP.NET generator. You might not see it in the first installation. To install ASP.NET generator, execute this command in your terminal window.

This will get you ASP.NET 5 project template scaffolding to YOMEN by OmniSharp. Now you will get the same menu as above screenshot when you execute the command “yo”.  To create base template for ASP.NET 5, execute this command in the terminal.

In the menu select an option to create the base template. Select Web Application and press

ASPNET 5 Template

If there is no ASCII art  in the command shell, you don’t get the true feeling of the shell 😀

Answer the project creation questions along the process. After a successful flow your folder should look like this.

LS on ASPNET folder

Now you have a base project templates. But you need one more thing to get this run. Lets get update all the NUGET packages and dependencies. In the terminal inside your project folder execute this command.

Now we are done with creating the base project template for ASP.NET 5. Lets get switch to Visual Studio Code for MAC and open the folder under Explore icon. After that click on the blue Open Folder button.

Visual Studio Code - Open Folder

Lets just browse through the files, see all the beautiful syntax highlighting and code completion built in for Visual Studio Code for MAC.

Code Completion

Now lets start the WEB SERVER  that will execute the ASP.NET 5 code. Click View > Command Pallet or press [APPLE KEY] + P and start typing “dnx: kestrel” and Visual Studio Code will complete the command for you and press . This will start the kestrel server for you to run the ASP.NET 5 project.

APPLE + P

Server is Started

Server Started

Now open up your favourite browser and in the address bar just type

If everything goes fine and you have followed the instructions correctly you must see this screen.

ASP.NET 5 on Safari for MAC

CONGRATULATIONS !!! YOU SIMPLY ROCK !!!

Wait a minute, What if you see this screen (OH! NO WHAT WENT WRONG !!!)

OH!! No

Don’t worry its a known bug in Mono. This command in the terminal will help you to fix it.

Now start the server again and you are good to go !!!