Working with the WebSharper Project Templates in Visual Studio

WebSharper comes with a number of Visual Studio templates, making it super easy to start developing WebSharper applications quickly. To start a new project, choose New/Project... and choose from the number of available WebSharper project templates:

You can have several versions of WebSharper installed, and your projects that are based on a particular version will continue to use that version. You can migrate a WebSharper project to a newer version simply by updating the WebSharper library references in that project to point to those in a newer version, and adding any additional proxy library references that may be needed.

There are a number of sample project templates included to easily get started. For instance, the WebSharper sample application based on ASP.NET is a great first project, and it demonstrates how to create user forms easily, and how to expose them as ASP.NET server controls that can be embedded into ASPX markup.

Getting Started with WebSharper

To get started, install WebSharper, start Visual Studio and create a new project using the WebSharper Web Application (Sitelets) template. You will see some code defining the server-side part of the web application in Site.fs. Let us ignore it and do some client-side coding first. Add a file Client.fs to the solution, before Site.fs:

namespace Website
module Client =
    open IntelliFactory.WebSharper
    open IntelliFactory.WebSharper.Html

    [<JavaScript>]
    let SayHello () =
        JavaScript.Alert("HELLO!")

    [<JavaScript>]
    let MakeHelloDiv () =
        SayHello ()
        Div [ Text "HELLO THERE" ]
    

Code marked with the [<javascript>] attribute compiles to JavaScript, but if you run (F5) the application now, you will see no trace of it. To launch the code you need to first include it in one of the pages. The first step is to define a control. Add this to Client.fs:

module Controls =
    open IntelliFactory.WebSharper

    type HelloControl() =
        inherit Web.Control()

        [<javascript>]
        override this.Body = Client.MakeHelloDiv() :> _
        

Now let us use the control in one of the pages. In Site.fs, look up the HomePage definition and modify it to include the control:

let HomePage =
    Template "HomePage" <| fun ctx ->
        [ Div [Text "HOME"] Links ctx Div [new Controls.HelloControl()] ]
        

Run the application now (F5) to witness the client-side code executing on the home page. For those curious what the JavaScript code looks like, view source of the generated HTML and check out WebSite.dll.js. You will see something like this:

(function(){var $$=this,$=this.IntelliFactory.Runtime,a,b,c,d,e,f,g;$.Define($$,{Website:{Client:{MakeHelloDiv:function(){b.SayHello();return
e.Div(f.ofArray([e.Text("HELLO THERE")]));},SayHello:function(){return g("HELLO!");}},Controls:{HelloControl:$.Class({get_Body:function(){return
b.MakeHelloDiv();}})}}});$.OnInit(function(){a=$.Safe($$.Website);b=$.Safe(a.Client);c=$.Safe($$.IntelliFactory.WebSharper);d=$.Safe(c.Html);e=$.Safe(d.Default);f=$.Safe(c.List);return
g=$.Safe($$.alert);});$.OnLoad(function(){});}());
        

The minified JavaScript is not exactly readable. To see an easier to read version, modify `Web.config` to run the website in debug mode, and run the application again:

<configuration>
    <system.web>
    <compilation debug="true" />
    ...
        

Now you should see something like the following:

(function()
{
 var Global=this,Runtime=this.IntelliFactory.Runtime,Website,Client,WebSharper,Html,Default,List,alert;
 Runtime.Define(Global,{
  Website:{
   Client:{
    MakeHelloDiv:function()
    {
     Client.SayHello();
     return Default.Div(List.ofArray([Default.Text("HELLO THERE")]));
    },
    SayHello:function()
    {
     return alert("HELLO!");
    }
   },
   Controls:{
    HelloControl:Runtime.Class({
     get_Body:function()
     {
      return Client.MakeHelloDiv();
     }
    })
   }
  }
 });
 Runtime.OnInit(function()
 {
  Website=Runtime.Safe(Global.Website);
  Client=Runtime.Safe(Website.Client);
  WebSharper=Runtime.Safe(Global.IntelliFactory.WebSharper);
  Html=Runtime.Safe(WebSharper.Html);
  Default=Runtime.Safe(Html.Default);
  List=Runtime.Safe(WebSharper.List);
  return alert=Runtime.Safe(Global.alert);
 });
 Runtime.OnLoad(function()
 {
 });
}());
    

To go on from here, please check out the Samples page.