Things have changed a fair bit since my last post back in May, and getting the latest and greatest ASP.NET vNext up and running with Mono is now reasonably straight forward,
so I thought I’d do a quick update on installing ASP.NET vNext on OSX and Linux.
Install Mono
Xamarin now maintains Mono packages for OSX and most common Linux distributions, and are committed to a regular release schedule, so getting Mono up and running is now a much simpler affair. Currently, there are supported packages for Mono. Installation is generally as simple as adding the Xamarin repository to your packages sources, and importing their GPG key) and then installing. I am going to cover OSX and Ubuntu 14.04 here, but easy instructions for most distros can be found http://www.mono-project.com/docs/getting-started/install/linux/.
sudo sh -c 'echo "deb http://download.mono-project.com/repo/debian wheezy main" > /etc/apt/sources.list.d/mono-xamarin.list'
Update your package cache
1
sudo apt-get update
Install the Mono development package
1
sudo apt-get install mono-devel
We will need to install some certificates on Linux, to avoid getting an exception when downloading packages with nuget package restore. This is not required on OSX.
Open a new shell and type mono --version. You should be running Mono version 3.8.0 or newer.
If not, you probably still have an old version of Mono on your path. This might be the case if you had previously installed Mono from source (as per my last blog post). You will want to make sure you remove your old installation. Running make clean from the Mono source code folder is probably the best way to do this. Additionally, remove any other installation that may have been installed via a third party package manager such as homebrew on OSX.
Install KVM and the K Runtime
If your on Linux, you may need to install curl.
1
sudo apt-get install curl
If you have any old (alpha) versions of kre installed, I recommend removing them from your system and starting fresh, and then starting a new shell. This will avoid any package sources being carried over in environment variables. I’m not going to paste the commands here, for fear of people nuking their LOLcats image collection accidentally and blaming me .. but effectively you just want to remove the ~/.kre folder from your home directory, and start a new shell.
Bootstrap your KVM installation by downloading and running the kvm install script from the aspnet/Home respository. We are using the dev branch here, which will download a kvm that is pointing at the feed for the latest beta packages. At the time of writing the master branch is still pointing at the alpha CTP.
1
curl https://raw.githubusercontent.com/aspnet/Home/dev/kvminstall.sh | sh && source ~/.kre/kvm/kvm.sh
Install the latest K Runtime
1
kvm upgrade
Verify the latest install
12
kvm list
k --version
You should now have one of the latest betas installed. The active version from kvm list should reflect the actual version of kre that you see when you run k --version.
Try out the Hello World vNext Demo from David Fowler’s github repository
David Fowler has created a Demo app for OSX and Linux, and put it up in his personal repository on GitHub. To check everything is working properly, we are going to clone it, and run it locally on our OSX or Linux installation.
First, install “git” if you don’t already have it. OSX users can get it from git-scm.com, or on Ubuntu
Open a browser and go to http://localhost:5000. If everything is in order, you will see “Hello World” staring back at you ….
Final Notes
The steps above are the bare minumum to get you up and running with vNext on Linux or OSX. The project is still (only barely) in beta, and is not ready the prime time yet. That being said, the ASP.NET vNext team at Microsoft have shown a huge commitment to cross platform support for the next iteration of ASP.NET. ASP.NET, running in production, on Linux, fully supported by Microsoft, will be a thing, and probably within the next twelve months. The time to get in there, get your hands dirty and kick the tires is now .. while the devs are ready and able to respond to your feedback.
If you have any problems or feedback, or just want to hang around and see what’s going on, jump into the ASP.NET vNext chat channel at https://jabbr.net/#/rooms/AspNetvNext, there is almost always someone around.
Microsoft have recently released a preview of the next iteration of their ASP.NET platform. I’m not going to go into the details here, people like Scott Hanselman have already done a fantastic job of that. I will however say that the changes, both technical and cultural, are huge. Two of those changes are particularly relevant to this blog post.
Firstly, ASP.NET vNext is fully open source. People like you and me are able to get in on the ground floor, try out the bits and pieces and even contribute – pretty much from the project’s inception.
Secondly, ASP.NET vNext is cross platform, and embraces non Windows hosts as first class citizens. Microsoft are fully integrating Mono and Linux into their build environment and test matrix, and are actively working with the community to make Mono a top class platform for hosting ASP.NET. That being said, these are early days, and the team is still ironing out issues with the Mono environment.
Getting ASP.NET vNext up and running on OSX and Linux
There are two main steps to getting to the point where we can run ASP.NET vNext applications on our non Windows system.
The first is to install Mono. Normally this would be a no brainer; however as all this stuff is very shiny and new there are fixes and features that are currently only in the bleeding edge source code of Mono and have not been released as a package as yet. In order to get these fixes we are going to need to build mono from the latest source code located in the mono git repository.
The second step is to install the “K Runtime Environment” or KRE. This is the command line environment that will build and run (not that there is really a distinction anymore) projects from their new project.json project files.
Installation of the KRE is handled by the “K Version Manager” (KVM). This is a simple app that can install multiple versions of the KRE side by side, and allow you to easily switch between them.
Building Mono
I don’t want to go into too much detail here. There are plenty of guides around the internet on installing mono from source.
If you are on linux, you will need to run mozroots --import --sync after installing mono to avoid certificate/trust issues down the line
If you are on OSX you will want to edit /private/etc/paths and move the line /usr/local/bin before the line /usr/bin so the system finds the new mono version on the path before the old one.
caveat: This may totally break your system if you have lots of crazy stuff in /usr/local/bin. If your not sure about this, wait for a supported official release of Mono
Once all this is done, run mono --version. You should see that you are running Mono version 3.4.1 or newer.
If you do not, check your $PATH variable and go back over the mono install steps.
Installing KVM and the K Runtime Environment
Installing KVM is super simple. If you like you can go to the Readme for the AspNet Home project and follow the “Getting Started” instructions there, however that involves cloning the Home Repository which is only required for that quick start demo.
KVM can be installed on any Linux or OSX system (that has bash or zsh and curl installed) with a single line.
1
curl https://raw.githubusercontent.com/aspnet/Home/master/kvminstall.sh | sh && source ~/.kre/kvm/kvm.sh && kvm upgrade
This will:
download kvm.sh and save it in ~/.kre/kvm/kvm.sh
add the command to run kvm.sh on every login to bash/zsh.
kvm.sh will then be run via the source command. This adds the kvm command to the current shell.
run kvm upgrade. This will download the latest KRE package, extract it to .kre/packages and add the bin folder to your path.
Once this is done, all of the KRE commands will be available from shell prompt. Primarily this will be the k command used to run ASP.NET vNext Projects, and the kpm command used to restore packages.
Additionally the kvm command can be used to install other version of KRE side by side for the user, switch between versions, list the installed versions and set up aliases. See the ASP.NET Home Project Readme for examples of the various kvm commands.
Okay, so I’ve got a Shiny New KRE ….
So let’s point it at something. We could download one of the many samples from the aspnet repository, however just to prove we have everything we need to build and run ASP.NET vNext apps on OSX and Linux, lets create a very basic project from scratch.
Create a folder called HelloKRuntime somewhere on your system and cd into that folder
Create a file called project.json and copy the following text into it. This is your ASP.NET vNext project file .. and not an angle bracket to be seen !
Create a file called Program.cs and copy the following text into it.
123456789
using System;
public class Program
{
public static void Main()
{
Console.WriteLine("Hello K Runtime !");
}
}
type kpm restore -s https://www.myget.org/F/aspnetvnext/
The K Package Manager will head off to the nuget repository and fetch System.Console and all its dependencies, based on the entry in your project.json file. Note that there is no need to use Nuget to install this package. The project.json entry is all the info kpm needs to fetch your dependencies.
Note: Because the ASP.NET vNext project is currently using their own nuget feed, we need to supply the nuget source on the command line. This can be provided in a NuGet.Config file in your Solution folder, and once the vNext is released you shouldn’t need one at all unless you are using your own private nuget feeds.
Now type k run from the command line. You should see your system burst to life and utter those immortal words
As an example of how the new Configuration system ties into the environment, try typing export KRE_TRACE=1 and then k run again. You will see the compiler output as well as the “Hello K Runtime” message.
In Summary
Hopefully this post has demonstrated that cross platform ASP.NET vNext functionality is available now. There are still rough edges, but progress is being made daily and first class support for OSX and Linux environments is on the horizon. If you are having issues getting this working, feel free to drop into the aspnetvnext room on Jabbr and someone should be able to help you out.
UPDATE: If you’d like to try something more involved than the trivial console application above, the simple Hello World V Next web example might be a good next step.
Modern Web design has gravitated away from using tables for layout (as they are semantically incorrect, inflexible and lead to bloated hard to manage layout) and towards CSS based layouts. CSS grid systems simplify the application of CSS layouts. Popular grid systems such as the 960 Grid System or Twitter Bootstrap are great for content centric systems like CMS systems or Web Portals, but are not ideal for line of business applications. Primarily, they lack the ability to define areas for content that stretch to use all of the available screen real estate, along side areas that have fixed width’s or heights. The up and coming CSS Flexible Box Layout Module is looking to address this, but it is likely to be years before this is usable in most main stream browsers. In the mean time, I have attempted to address this concern with the Elastic Grid System.
The Elastic Grid system
The Elastic Grid system allows us to define columns or rows, that can be either a fixed width within the parent container, or can stretch or shrink to consume all of the space available between a number of columns from the left of the area to a number of columns from the right of the area, or a number of rows from the top of the area to a number of rows from the bottom of the area. Columns are defined to be a fixed width (e.g. 40 pixels) and rows are defined to be a fixed height (e.g. 40 pixels). Areas that are fixed width areas are simply defined from a column on the left to another column on the left, a column on the right to another column on the right, at row at the top to another row at the top or a row at the bottom to another row at the bottom.
The following diagram illustrates how this layout method works for columns.
Rows work in a similar fashion, although obviously vertically from the row top-1 down to the row bottom-1.
As an example of the actual HTML code used for layout, a column that started 80 pixels from the left and was 400 pixels wide, and was in a row 40 pixels from the bottom and 80 pixels high would be defined as follows:
Elastic grids can be nested inside one another. For example you may wish to nest a grid with a Fixed width but variable height, inside an element in another grid with a fixed height but elastic width. Alternatively you may just wish to use an elastic grid for fixed layout, within another elastic grid. If you have content in a variable height area that you want to become scrollable when the container is smaller than the content, simply apply a class with the overflow-x: auto style to a div surrounding that area. I use the convention of creating a scroll-pane class in my solution to encapsulate this behavior.
The following is an example of a typical complex layout that you may want to implement in the application.
An example of the HTML required to define a layout such is this follows:
<divclass="container-elastic"><divclass="row top-1 stretch-to-bottom-2"><!-- We don't have to use div's for our layout. --><!-- Fieldsets are often a good choice when you want an --><!-- area with a title (legend) --><fieldsetclass="column left-1 stretch-to-right-7"><legend>Variable width and height thing !</legend><!-- Variable width and height content in here. It is likely --><!-- you will want to make this scrollable --></fieldset><fieldsetclass="column right-1 span-6"><divclass="container-elastic nested"><divclass="row top-1 stretch-to-bottom-2"><divclass="scroll-pane"><!-- Scrollable content in here. -->>
<!-- As our parent container is a fixed width anyway --><!-- we don't really need to define any columns if we don't want to --><!-- Typically we would use a fluid grid in here to --><!-- lay our content out inside our fixed width parent container --></div><divclass="row bottom-1"><divclass="column left-1 stretch-to-right-1"><!-- Buttons in here ! --><div></div></div></div></fieldset></div><divclass="row bottom-1"><divclass="column left-1 stretch-to-right-1"><!-- Buttons in here ! --><div></div></div>
Click here to see an actual working example of an elastic layout.
In my next blog post, I will go over the CSS code, and show how we generate it using less.
