Getting a WebSharper project up and running on Mac OS X

A few weeks ago, this post about Intellifactory's WebSharper showed up on Hacker News.  The top comment was enthusiastic enough for me to check it out.

Since F# and Mono came out of the Microsoft ecosystem and I use Mac for development (and Linux for deployment), I had to do some digging to get things working.  These are the steps I used to get a basic WebSharper app up and running on Mac OS X (10.9.x).   Note that these steps are very high level and don't go into much detail.

1. Install Xamarin Studio

I've used Xamarin Studio at work to create several cross-platform mobile apps.  Being comfortable with that environment, I elected to go with Xamarin Studio for F#/WebSharper development.   You can find the download here.  Note that you will have to supply some personal info to proceed.

Once the install begins, you will eventually get to this screen:

In order for the install to work, you'll have to select at least one of the products in the list.  For the purposes of doing WebSharper development, I don't think it matters which one(s) you choose.

Once you get to the "Install Succeeded" screen, click the "Launch Xamarin Studio" button:

If you had already quit the install process, you can find Xamarin Studio in your Applications folder.  When Xamarin Studio launches, it may have updates waiting.  If so, click the "Restart and Install Updates" button.

2. Install Intellifactory's WebSharper Add-in

To make working with WebSharper in Xamarin Studio easier, Intellifactory provides the WebSharper add-in.  Installing the add-in will add project templates that make creating WebSharper applications easier.  Click the "Xamarin Studio" menu, then choose "Add-in Manager...":

With the Add-in Manager window open, click the "Gallery" tab, then click the "Repository" drop-down and choose "Manage Repositories...":

From the "Add-in Repository Management" window,  click the "Add" button.

Then paste the following URL into the "Register an on-line repository" URL field:

https://raw.githubusercontent.com/intellifactory/monodevelop.websharper/master/repository/

...and click the "OK" button.  Eventually, the add-in will finish installing.  At this point,  Xamarin Studio is ready for creating WebSharper applications.

3. Create your first WebSharper Sitelet.

There are several different kinds of WebSharper projects.  We're going to create an app that has both a client and server piece, known as a "Sitelet".  

Close all windows until you get back to the main Xamarin Studio screen.  Then click the "New Solution..." button.  In the "New Solution" window, find the WebSharper entry in the list in the left-hand pane (it's probably the last entry), then choose "WebSharper Sitelets Website".

Fill in a Name (I chose HelloWorld), make sure the project will be created in a directory you agree to,  then click the "OK" button.

4. Build the Project

At this point, you now have a basic example starter project ready to explore.  Let's see it in action.  Before we can run it, we need to build it.  Choose the "Build" menu item, then "Build HelloWorld".  If everything went well, you should see a "Build successful." message.

5. Run

From what I can tell, there's no way to run the application from inside Xamarin Studio yet.  Open Terminal, then navigate to your project's directory.  You need to be in the directory below the top-level similarly-named directory, in my case HelloWorld/HelloWorld:

Once there, type the following on the command line:

xsp4

This will start the xsp4 web server.  You should see a "Listening on port: 8080..." message.  Open a web browser to http://localhost:8080 and your app should display:

Congratulations!  If you got this far, you now have a development environment all set up to create the next amazing WebSharper application.

Where to go from here

This post just explained how to get a dev environment up and running.   There is a BUNCH to learn.  Try exploring the different pieces of the project, particularly the Main.fs, Client.fs, and Remoting.fs files.  Keep in mind that if you make any changes, you will have to rebuild the project, and re-run the server.

I am new to F# and WebSharper, but here's what I've been looking at:

• The F# Software Foundation site
• Scott Wlaschin's F# for fun and profit
• The Book of F# by Dave Fancher
• The WebSharper Learn page

Resources Used:

Most of the information I used for this post was gleaned from the following:

• The F# Software Foundation's Use F# on Mac OSX page.
• This Intellifactory blog post.

If you liked this post, would like to see more posts on F#/WebSharper, or have corrections or criticisms, please leave a comment or let me know on twitter.  Good luck exploring!