다음을 통해 공유

Running ASP.NET 5 and Visual Studio Code for MAC

  • 아티클

ASP.NET 5 is around the corner and big excitement on running ASP.NET 5 on MAC Box or under a Linux flavour. In this post I am got focus on running ASP.NET 5 application on a MAC Box. On a Linux Box like Ubuntu it will 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. **

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

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.

$ brew tap aspnet/dnx 
$ brew update 
$ brew install dnvm

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.

$ sudo vi ~/.bash_profile

and add these lines and save the file. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-1.54.05-PM.png now do an upgrade (a good practice if anything updated to the binaries).

$ dnvm upgrade
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. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-12.07.57-PM.pngNow 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.

$ brew install node

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.

$ node -v

$ npm -v

If you see these two outputs in your terminal, YAY !!! you have NODE and NPM installed and you are ready to rock. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-12.27.01-PM.png

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.

$ npm install -g yo grunt-cli bower

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

http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-12.47.19-PM.png 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.

$ npm install -g generator-aspnet

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.

$ yo aspnet

In the menu select an option to create the base template. Select **Web Application **and press ENTER http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-1.30.59-PM.png
Answer the project creation questions along the process. After a successful flow your folder should look like this. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-1.35.30-PM.png 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.

$ dnu restore

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. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-1.38.06-PM.png Lets just browse through the files, see all the beautiful syntax highlighting and code completion built in for **Visual Studio Code **for MAC. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-2.23.56-PM.png 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 ENTER. This will start the **kestrel **server for you to run the ASP.NET 5 project. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-2.51.52-PM.png Server is Started http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-2.54.17-PM.png Now

Open up your favourite browser and in the address bar just type

http://localhost:5001

If everything goes fine and you have followed the instructions correctly you must see this screen. http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-2.55.51-PM.png CONGRATULATIONS !!! YOU SIMPLY ROCK !!!

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

http://aspmvp.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-01-at-2.39.47-PM.png Don't worry its a known bug in Mono. This command in the terminal will help you to fix it.

$ export MONO_MANAGED_WATCHER=false

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