/ ASP.NET

Getting Started with ASP.NET 5 on OS X

This year at the BUILD conference, Microsoft made quite a few announcements about their development stack. Two main aspects I’m excited about are ASP.NET 5 and DNX

What is DNX?

DNX, short for .NET Execution Environment, is a new SDK that allows you to develop and run your apps on multiple platforms (Windows, Linux, OS X, …), multiple CPUs (x86, x64, etc…) and across different .NET flavors (.NET Core, .NET Framework and Mono).

The core benefits of using DNX are:

  • Create cross-platform applications (Windows, OS X, Linux) without any cross-compilation.
  • Supports ASP.NET 5 and .NET Core console app workload
  • Develop using simple text editors (Vim, Visual Studio Code, etc…) or full IDEs (Visual Studio, etc…)
  • Manage multiple .NET runtimes on a single machine both globally or app specific including security updates
  • NuGet all things

Anatomy of DNX

DNX consists of the following tools and concepts:

  • DNVM (.NET Version Manager) - A tool for getting and managing DNX distributions. DNVM does not form part of DNX - it is a set of command line utilities/admin tool to update and configure which .NET runtime to use.
  • DNX (distribution) - A NuGet package of the components that are the implementation of the new environment.
    • The .NET Core DNX distribution contains the CoreCLR and the base parts of CoreFX.
    • The .NET Framework and Mono DNX distribution includes only the DNX components.
  • DNU (DNX Utility) - The NuGet client for DNX. It handles all operations involving packages in your application.
  • DNX (Command line tool) - The tool to launch apps.

Installing ASP.NET 5 on OS X

To install ASP.NET, you’ll need to install DNX - which is installed and managed via the .NET Version Manager (DNVM). The best way to install DNVM on OS X is with Homebrew.

Install Homebrew

Homebrew - The missing package manager for OS X

If you don’t already have Homebrew installed on your machine, run the following script on your Terminal:

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

Once completed, run brew doctor to check if everything is working accordingly.

Install the .NET Version Manager (DNVM)

Run the following commands to install DNVM:

brew tap aspnet/dnx
brew update
brew install dnvm

If you have any issues with the install, try running brew untap aspnet/dnx first and proceed with the above commands. If everything installed correctly, you should see this:

Terminal 1

When executing brew install dnvm, DNX and a specific version of Mono that works with ASP.NET 5 will also be installed.

Terminal 2

After installation, run dnvm to see if your terminal understands the command. If you get something like -bash: dnvm: command not found, run source dnvm.sh. This will make the dnvm command available for the current Terminal Session. To make it available for every session, source it to either your .bashrc, .bash_profile or .profile:

echo "source dnvm.sh" >> ~/.bash_profile

If you run dnvm again, you should see something like this:

Terminal 3

Useful DNVM Commands

To install the latest version of DNX, run:

dnvm upgrade

If you want to install a specific version of DNX, use the install command:

dnvm install <version>
dnvm install 1.0.0-beta5

If you have multiple runtimes installed, you can view them with:

dnvm list

You can also switch between DNX runtimes by using:

dnvm use <version>
dnvm use 1.0.0-beta5
output: Adding /Users/Username/.dnx/runtimes/dnx-mono.1.0.0-beta5/bin to process PATH

To get the full list of dnvm commands, run

dnvm -h

Now that your environment has been setup with DNX, you can start using ASP.NET 5.

Developing ASP.NET 5 Applications

Before you start developing in ASP.NET 5, you'll need to get some tools.

Step 1: Get Visual Studio Code

You can use any editor (Vim, Sublime Text, etc...), but I'll recommend using Visual Studio Code for the following reasons:

  • It's free
  • It's lightweight
  • It has first-class development support for ASP.NET 5 and node.js
  • Built-in intelliSense for ASP.NET 5 application development using c#, JavaScript, TypeScript, HTML, CSS and more.
  • Built-in debugger for JavaScript
  • Git integration

Visual Studio Code

You can download Visual Studio code here

Step 2: Install Yeoman

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

Yeoman is a web app generator that helps you to kickstart new projects. It supports many applications such as node.js, ASP.NET 5, angular.js to name a few. Yeoman consists of three types of tools:

  • the scaffolding tool (yo)
  • the build tool (grunt, gulp, etc...)
  • the package manager (npm/bower)

Yeoman requires some tools to be installed prior of using it to scaffold new sites.

Install Node.js with Homebrew

brew install node

Check the installation with:

node -v
# output: v0.12.7
    
npm -v
# output: 2.12.1

Install Grunt

In order to use grunt, you'll need to install the grunt command line interface (CLI) globally.

npm install grunt-cli

Note that this won't install the grunt task runner, just the CLI. To use grunt, you'll need a project that has been already configured with a Gruntfile and a package.json.

Install Bower

Bower requires the following dependencies to be installed:

  • node.js and npm (already installed)
  • git

Run the following command to install git:

brew install git

Check the installation with:

git --version

When all the bower dependencies have been installed, execute:

npm install -g bower

Since Bower is a package manager (similar to npm) you can install packages like this:

bower install <package>
$ bower install jquery

Now, to install Yeoman, simply run the command below:

npm install -g yo

Install a generator (in our case, an asp.net 5 generator)

npm install -g generator-aspnet

Step 3: Start Developing

Now that you have all the necessary tools, you can start creating ASP.NET 5 web apps. Choose your desired working directory and scaffold a site with Yeoman by running the command below:

yo aspnet

Yeoman

Now, select Web Application, enter your application name and hit Enter

Once the project is generated, you can choose to work entirely on the Terminal or with Visual Studio Code.

To restore the project's dependencies via the Terminal, run the following:

dnu restore

The same thing can be accomplished by opening the project in Visual Studio, hit the Cmd + Shift + P Keys and type dnu

dnu

When the restore is complete, you'll get a success message on your Terminal

dnu restore

Now, it's time to complile and run the app. From your Terminal, CD in your app's directory and hit the command:

dnu build

To run the app, simply type the command on Terminal:

dnx . kestrel

From Visual Studio Code, hit Cmd + Shift + P and select dnx: kestrel

To view the site, open your browser and go to http://localhost:5000

localhost-web

Conclusion

So far, we have learned that DNX is a new SDK that is used to build cross-platform ASP.NET 5 apps. You can also use Yeoman to scaffold a new site without any hassle, and use Visual Studio Code for rapid development.

Getting Started with ASP.NET 5 on OS X
Share this

Subscribe to Djamseed Khodabocus