Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

websharper

WebSharper - the C#+F#-to-JavaScript framework

Subscribe to updates I use websharper


Statistics on websharper

Number of watchers on Github 310
Number of open issues 198
Average time to close an issue 10 days
Main language F#
Average time to merge a PR 2 days
Open pull requests 5+
Closed pull requests 2+
Last commit over 1 year ago
Repo Created over 6 years ago
Repo Last Updated over 1 year ago
Size 13.9 MB
Homepage http://websharper...
Organization / Authordotnet-websharper
Latest Release4.2.4.247
Contributors11
Page Updated
Do you use websharper? Leave a review!
View open issues (198)
View websharper activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating websharper for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

WebSharper

Join the chat at https://gitter.im/intellifactory/websharper

WebSharper is an F#-based web programming platform including a compiler from F# code to JavaScript.

Installing

The easiest way to get started is from an application template. You can install the various WebSharper project templates by following the instructions below for:

Alternatively, you can use the F# Yeoman Generator to install template files for your favorite editor. You can then build your project by running msbuild in the project root folder.

Creating WebSharper project by hand

If you are using any one of the available WebSharper project templates, they should compile and run without any modifications.

If you are creating your project files manually, the following is a typical string of steps to get you up and running, although you should really consider starting off of an existing WebSharper template:

  • Start from an ordinary F# library project
  • Install WebSharper using paket. This will include the main WebSharper.targets and the core references in your project file.
  • Add a special project file property to drive how you want to compile your project. These are:

    • <WebSharperProject>Html</WebSharperProject> for HTML Applications
    • <WebSharperProject>Site</WebSharperProject> for Client-Server Applications
    • <WebSharperProject>Bundle</WebSharperProject> for Single-Page Applications
  • Include any further bits in your project file you may need. For instance, you will need to reference Microsoft.WebApplication.targets if you intend to host your application in IIS or the built-in web server in Visual Studio.

Running your applications

With the exception of the self-hosted templates, all WebSharper templates produce applications that can run inside an ASP.NET-compatible container. (HTML applications can be deployed in any web server by copying the contents of the bin\html folder.)

In the examples below, you will see how to create WebSharper sitelets. Sitelets are web applications encoded in the F# type system. They have a set of endpoints (accessed via GET, POST, etc.) to which they respond by serving web content asynchronously. You can run these the following ways:

  • In IIS or any other ASP.NET-compatible container

Annotate your main sitelet with the [<Website>] attribute:

   [<Website>]
   let MySite = ...
  • As a self-hosted executable using WebSharper.Warp

Warp provides a way to self-host sitelets via OWIN and Microsoft.Owin. To use Warp, you need to add WebSharper.Warp to your project (which should be a console project), and invoke the host machinery with your sitelet:

   [<EntryPoint>]
   do Warp.RunAndWaitForInput(MySite) |> ignore

By default, sites are served on http://localhost:9000.

  • As a Suave application

Suave is a light-weight web server built in F#. You can easily use WebSharper in your existing Suave application, or host your WebSharper applications (which should be a console project) on Suave, by adding WebSharper.Suave to your project and calling the WebSharper adapter to convert your sitelet to a Suave WebPart:

   module WebSharperOnSuave

   open WebSharper
   open WebSharper.Sitelets

   let MySite =
       Application.Text (fun ctx -> "Hello World")

   open global.Suave
   open Suave.Web
   open WebSharper.Suave

   startWebServer defaultConfig
       (WebSharperAdapter.ToWebPart(MySite, RootDirectory="../.."))

Hello World!

With WebSharper you can develop pure JS/HTML, and single- and multi-page web applications with an optional server side, all in F#. Unless you are looking for low-level control, we recommend that you start by creating a sitelet.

The simplest sitelet serves text on a single endpoint at the root of the application:

module YourApp

open WebSharper
open WebSharper.Sitelets

[<Website>]
    let Main = Application.Text (fun ctx -> "Hello World!")

Single Page Applications

While serving text is fun and often useful, going beyond isn't any complicated. For instance, you can easily construct single-page applications:

module YourApp

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Server

[<Website>]
let Main =
    Application.SinglePage (fun ctx ->
        Content.Page(
            h1 [text "Hello World!"]
        )
    )

This code creates an empty HTML document and inserts a header node.

HTML responses

Pages are a special type of content responses, and you can easily finetune them by specifying where you want content to be added, by using an optional Title, Head, Body, and Doctype.

    ...
    Application.SinglePage (fun ctx ->
        Content.Page(
            Title = "My Hello World app",
            Body = [
                h1 [text "Hello World!"]
            ],
            ...
        )
    )

You can construct HTML via the (soon legacy) WebSharper 3.x markup combinators in WebSharper.Html.Server and WebSharper.Html.Client (for client-side markup, see the section below), or using the next generation reactive HTML language from UI.Next (as above and in the examples on this page). A quick syntax guide to the HTML constructors in UI.Next:

(TBA)

Custom responses

Content responses are asynchronous. Next to full HTML pages, you can return:

  • Plain text with Content.Text:

    Content.Text "Hello World!"
    
  • JSON values with Content.Json (visit JSON documentation or JSON cheatsheet for more info):

    type Person = { First: string; Last: string; Age: int}
    
    Content.Json { First="John"; Last="Smith"; Age=30 }
    
  • Files with Content.File:

    Content.File("Main.fs", ContentType="text/plain")
    
  • Various error codes:

    • Content.Unauthorized (401)
    • Content.Forbidden (403)
    • Content.NotFound (404)
    • Content.MethodNotAllowed (405)
    • Content.ServerError (500)

You can also create your own custom error code response: fsharp Content.Custom(Status=Http.Status.Custom 402 (Some "Payment Required"))

  • Any other custom content with Content.Custom.

Multi-page applications

Multi-page applications have multiple endpoints: pairs of HTTP verbs and paths, and are represented as an annotated union type we typically call Endpoints (or Action in previous terminology). The endpoints, as defined by this union type - given the various annotations on each union case - are mapped to content to be served using Application.MultiPage. Links to endpoints in your site can be calculated from the serving context, so you will never have invalid URLs.

module YourApp

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Server

type Endpoints =
    | [<EndPoint "GET /">] Home
    | [<EndPoint "GET /about">] About

[<Website>]
let Main =
    Application.MultiPage (fun ctx endpoint ->
        let (=>) label endpoint = aAttr [attr.href (ctx.Link endpoint)] [text label]
        match endpoint with
        | Endpoints.Home ->
            Content.Page(
                Body = [
                    h1 [text "Hello world!"]
                    "About" => Endpoints.About
                ]
            )
        | Endpoints.About ->
            Content.Page(
                Body = [
                    p [text "This is a simple app"]
                    "Home" => Endpoints.Home
                ]
            )
    )

Adding client-side functionality

WebSharper applications can easily incorporate client-side content, expressed in F#, giving an absolute edge over any web development library. Just mark your client-side functions or modules with [<JavaScript>] and embed them into server side markup using client. Server-side RPC functions are annotated with [<Rpc>].

The example below is reimplemented from the blog entry Deploying WebSharper apps to Azure via GitHub, also available in the main WebSharper templates, and although it omits the more advanced templating in that approach (which is straightforward to add to this implementation), it should give you an recipe for adding client-side functionality to your sitelets easily.

module YourApp

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client

module Server =
    [<Rpc>]
    let DoWork (s: string) = 
        async {
            return System.String(List.ofSeq s |> List.rev |> Array.ofList)
        }

[<JavaScript>]
module Client =
    open WebSharper.JavaScript

    let Main () =
        let input = inputAttr [attr.value ""] []
        let output = h1 []
        div [
            input
            buttonAttr [
                on.click (fun _ _ ->
                    async {
                        let! data = Server.DoWork input.Value
                        output.Text <- data
                    }
                    |> Async.Start
                )
            ] [text "Send"]
            hr []
            h4Attr [attr.``class`` "text-muted"] [text "The server responded:"]
            divAttr [attr.``class`` "jumbotron"] [output]
        ]

open WebSharper.UI.Next.Server

[<Website>]
let MySite =
    Application.SinglePage (fun ctx ->
        Content.Page(
            Body = [
                h1 [text "Say Hi to the server"]
                div [client <@ Client.Main() @>]
            ]
        )
    )

Using JavaScript libraries

WebSharper extensions bring JavaScript libraries to WebSharper. You can download extensions or develop your own using WIG, among others. Below is an example using WebSharper.Charting and chart.js underneath.

Note that these and any other dependencies you may be using will be automatically injected into a Content.Page or other sitelet HTML response, and you will never have to deal with them manually.

module YourApp

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Html

[<JavaScript>]
module Client =
    open WebSharper.JavaScript
    open WebSharper.UI.Next.Client
    open WebSharper.Charting

    let RadarChart () =
        let labels =    
            [| "Eating"; "Drinking"; "Sleeping";
               "Designing"; "Coding"; "Cycling"; "Running" |]
        let data1 = [|28.0; 48.0; 40.0; 19.0; 96.0; 27.0; 100.0|]
        let data2 = [|65.0; 59.0; 90.0; 81.0; 56.0; 55.0; 40.0|]

        let ch =
            Chart.Combine [
                Chart.Radar(Seq.zip labels data1)
                    .WithFillColor(Color.Rgba(151, 187, 205, 0.2))
                    .WithStrokeColor(Color.Rgba(151, 187, 205, 1.))
                    .WithPointColor(Color.Rgba(151, 187, 205, 1.))

                Chart.Radar(Seq.zip labels data2)
                    .WithFillColor(Color.Rgba(220, 220, 220, 0.2))
                    .WithStrokeColor(Color.Rgba(220, 220, 220, 1.))
                    .WithPointColor(Color.Rgba(220, 220, 220, 1.))
            ]
        Renderers.ChartJs.Render(ch, Size = Size(400, 400))

open WebSharper.UI.Next.Server

[<Website>]
let MySite =
    Application.SinglePage (fun ctx ->
        Content.Page(
            Body = [
                h1 [text "Charts are easy with WebSharper Warp!"]
                div [client <@ Client.RadarChart() @>]
            ])
    )

Creating REST applications

TBA.


Links

websharper open issues Ask a question     (View All Issues)
  • almost 3 years Dom.Element.ScrollTop and ScrollLeft should be settable
  • almost 3 years Dictionary serialization issue with option types
  • about 3 years Json serializer generic unions and record inlining issue
  • about 3 years Missing proxies for C# use
  • about 3 years Minimize uses of System.Web
  • about 3 years Improve JS debugging experience
  • about 3 years Add JS inline helper
  • about 3 years Make non-breaking RPC changes possible
  • about 3 years Compiler option to download all/select remote resources
  • about 3 years WebSharper Warp crash (SIGABRT) on OS X 10.11
  • about 3 years Member overload fails during compilation.
  • about 3 years Nondescriptive error when bundling an indirect dependency
  • about 3 years JQuery.Promise.Then: missing overload taking unit -> Promise
  • about 3 years RPC improvements
  • about 3 years Merge core libraries
  • about 3 years Give errors on calls to client-only methods from server-side
  • about 3 years Remove Mono.Cecil dependency
  • about 3 years Review+expand collection proxies
  • about 3 years Fix broken TPs (includes FSharp.Data)
  • about 3 years Metadata format improvements
  • about 3 years Add proxy for collection interfaces
  • over 3 years Add type checking agains interfaces
  • over 3 years Update documentation for WS4 changes, include C#
  • over 3 years Dashboard Component
  • over 3 years Spreadsheet component
  • over 3 years Check proxied member signatures
  • over 3 years Fix sitelet initialization concurrency problems
  • over 3 years CSRF protection can cause 403 where it should not
  • over 3 years Statically resolved type parameters with custom types
  • over 3 years Overloadable `&&` and `||`
websharper open pull requests (View All Pulls)
  • PathConventions cleaning
  • Support F#4.1 and C#7
  • Partial build fixes (NuGet and CSharp reference)
  • Add Content.MapContext and Sitelet.MapContext
  • Update templates link
websharper questions on Stackoverflow (View All Questions)
  • Show mobile page in WebSharper
  • Can WebSharper generate real-time visualizations a-la Graphite+StatsD?
  • How to get basic websharper app in xamarin loading javascript in browser
  • How to run a Websharper project using .Net core and Kestrel from OSX or Linux?
  • How can I create a slider using Websharper?
  • WebSharper ui.next site working locally but not in docker
  • Fail to convert to json a record with union types with websharper
  • WebSharper 3.4 with working HelloWorld example?
  • Websharper compiler can't translate other assemblies
  • Is WebSharper the right tool for my project, or should I use it with other tools?
  • WebSharper vs. Angular
  • Does WebSharper have an anti-CSRF mechanism?
  • Writing handlers for JS.Window.Onpopstate in Websharper
  • How do you integrate Websharper with an existing ASP.NET MVC project?
  • Websharper, Sitelets and Forms
  • WebSharper - No javascript displaying in browser
  • Highcharts renderer in websharper
  • Strange compile-time representation of cyrillic string in Websharper
  • How do I parse JSON object's properties from external request into Options in Websharper?
  • Launching WebSharper client-server sitelet
  • Failed to deserialize metadata WebSharper
  • Websharper HighCharts Exmaple
  • Can't install Websharper nuget
  • Websharper / Web.Control constructor issue
  • Number formatting in WebSharper Google Visualization
  • How can we get Current Page URL in F#, Websharper
  • What local-storage tooling does WebSharper provide?
  • Websharper example SPA project - bad jquery ref?
  • WebSharper JQuery Mobile Page Hidden
  • WebSharper : How to use the .On event handler
websharper list of languages used
websharper latest release notes
4.2.4.247 WebSharper 4.2.4

This is a bugfix release for WebSharper 4.2. See the associated WebSharper.UI release

Improvements

  • #917 You can now use query expressions in client-side F# code.

Fixes

  • #920 Libraries created with Interface Generator targeting .NET 4x are no longer referencing netstandard.dll. This also means that WebSharper binaries targeting .NET 4.6.1 are no longer depending on anything targeting .NET Standard.
  • #919 C# analyzers for WebSharper errors and UI template code generation works as expected.
  • F# templates for Visual Studio now use FSharp.Core from NuGet, and runs out of the box for Visual Studio 2017 Update 6.
4.2.3.236 WebSharper 4.2.3

This is the first stable release of WebSharper 4.2. See the associated WebSharper.UI release

Improvements

  • #910 Improved command line parsing and help message for wsfsc.exe and zafircs.exe.

Fixes

  • #895 Fix UserSession.Logout() on ASP.NET when a cookie domain is specified.
  • #904 Fix exception when compiling a project that uses FSharp.Data.TypeProviders.SqlDataConnection
  • #914 Fix invalid output code when using a generic type alias to a struct union
  • #916 Fix compiling C# classes inheriting from System.Exception
4.1.7.232 WebSharper 4.1.7

Fixes

  • #911 More System namespace numeric types handled correctly by Router.Infer (both for server and client-side usage): SByte, Byte, Int16, UInt16, UInt32, Int64, UInt64, Single.
  • #906 Fix handling of F# type alias resolving to a type parameter (type Alias<'T> = 'T)
Other projects in F#