Back to Questions
1.3k
views4
comments
Applications, Services
websharpersiteletpattern

Sitelets enable you to create content on the server side by turning incoming HTTP requests to responses (JSON, HTML, etc.) Essentially, they are .NET values that can be combined to create simple microservices, web services, or entire client-server web applications. While sitelets normally require a server side to operate on top of, they can also be used to generate full HTML applications as well (so called "offline sitelets").

You can read about constructing various types of content, and combine those with the examples given here:

  • "Hello World"
  • Single-Page Applications
  • Multi-Page Applications

  • Web Services (TBA)

.

Multi-Page Applications (note Application.MultiPage) have multiple endpoints: pairs of HTTP verbs and paths, and are represented as an annotated union type we typically call EndPoint. These endpoints can be given various annotations that determine how they respond to requests. Links to endpoints in your application can be calculated from the serving context (note ctx.Link), so you will never have invalid URLs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

module YourApp

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

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

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

Output

By on 9/26/2017 8:29 PM ()

Hey Adam,

I get an error when trying to compile the Multi-Page Application next to ctx.Link -

1

Error	FS0072	Lookup on object of indeterminate type based on information prior to this program point.

I'm using WebSharper 4.0.193.93, .NET 4.7, F# 4.1. Take a look at the image: https://ibb.co/cDBYJw

Thanks! Petre

By on 10/5/2017 9:34 PM ()

The easiest way to return HTML content is via Content.Page (reference). Here we use an SPA (note Application.SinglePage) to serve from:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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!"]
        )
    )

Output

By on 9/26/2017 1:55 PM ()

The simplest sitelet serves plain text (note Application.Text) at the root of the application:

1
2
3
4
5
6
7

module YourApp

open WebSharper
open WebSharper.Sitelets

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

Output

By on 9/26/2017 11:21 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper