Single Page Application Template Now Available

Version 1.12 of the F# C# MVC 4 Visual Studio extension now includes a Single Page Application (SPA) template with the Backbone.js JavaScript framework. The template works in VS2010 as well as VS2012 (including VS2012 Express for Web).

To use the new template, simply pull down the latest by following the direction from one of my previous posts or by clicking the download button on Visual Studio Gallery. Once you have installed the Visual Studio extension, you will see the following screen when creating a new F# and C# Web Application (ASP.NET MVC 4) from the Visual F# | ASPNET project template category.

Highlights of the F# and C# project structure are shown below:

If you wish to learn more about the solution that is generated from this new template, see my previous post.

A Single Page App with Backbone.js, ASP.NET Web API, and F#

In this post, I introduce a simple example of a single page application built with Backbone.js, ASP.NET Web API, F#, and more. The example is an overly simple contacts app that allows you to view contacts and create new ones. It uses the Foundation 3 framework for styling and responsive design.

Here's a screenshot of the simple contact list view:

Solution Organization:

The C# project contains the following:

• A single Index.cshtml file. 
• All images, CSS, and JavaScript.
• A "Templates" folder that contains 2 .htm files that hold the markup for each view. The templating feature of underscore.js is used to allow placeholders in the templates to be replaced with the desired data.

The heart of the client-side code is broken into 3 folders within the Scripts folder of the C# project:

• The "app" folder contains a main.js, a utility.js, and a file containing route definitions using Backbone.Router.
• The "models" folder contains the Backbone models and collections.
• The "views" folder contains Backbone views.

The F# project contains the following:

• ASP.NET MVC and Web API routes.
• Definitions of JS and CSS bundles.
• ASP.NET MVC and Web API Controllers.
• A Model class.

Getting the Code:

You can find the full source at https://github.com/dmohl/FsWebSpa-Backbone.

EDIT: You can find a C# version at https://github.com/downloads/dmohl/FsWebSpa-Backbone/SpaBackbone-CSharp.zip. CodeProject

Adding NuGet Support to F# Interactive in VS2012

About a year ago, I posted an approach for adding basic NuGet support to VS2010. This post provides an updated script for adding this support in VS2012.

There may be times when you wish to use NuGet from the F# Interactive, such as when you are creating F# scripts. Since NuGet focuses on Visual Studio projects, this functionality is not supported out-of-the-box; however, it’s fairly simple to get things up and running.

The first step that we’ll need to do is create an F# script that is able to interact with the official NuGet package source. The script found here does the trick. I won’t spend too much time explaining the code in this script, but at a high level this allows you to use the F# Interactive window to talk to the NuGet package source, pull down packages, and automatically add a reference to the F# script file that has focus. 

The last step to accomplish our goal, is to tell F# Interactive to run our script each time that it launches. This is pretty easy to do thanks to the functionality provided by Visual Studio for adding F# Interactive options. To set the applicable option, go to Tools | Options | F# Tools | F# Interactive. You can then add the following information to the F# Interactive options setting.

--use:C:\temp\fsiext.fsx

 The F# Interactive options window looks like the following after making this change:

Once this is in place you can do something like this:

- Create a new F# Library project and build it. 

- Open the Script.fsx file.

- Navigate to the F# Interactive window.

- Execute InstallPackage “FSPowerPack.Core.Community”;; in the F# Interactive.

This will cause the package to be pulled down from the official NuGet repository and will automatically add the appropriate references to the Script.fsx file. 

Here's what the screen should look like after completing these steps.

Disclaimer: There are a few known issues with this approach.

F# Templates and F# Tools for VS2012 Express for Web

It's been a great day in the world of F# + web development. Today the F# team announced the F# Tools for Visual Studio 2012 Express for Web. This tool set now makes it easier than ever to create web applications that use F# for the server-side heavy lifting. Congrats to the F# team on this great accomplishment!

Currently, I've updated 4 of the more common F# web project templates to support this new version. These include:

- F# C# MVC 4 - Which includes ASP.NET MVC 4 (Razor and ASPX) and ASP.NET Web API
- F# C# ASP.NET MVC 3 - Which includes ASP.NET MVC 3 (Razor and ASPX)
- F# and C# Web Services (ASP.NET, WSDL)
- F# MsTest Project

Happy coding!