Overview code examples don't build

[mjarosie]

Hi,

I just started getting my head around WebSharper 2 days ago, so I thought sharing my "fresh" point of view could be beneficial to the project.

The first thing I've tried after getting set up with .NET, WebSharper templates and VSCode F# extension was to build example code snippets that are listed in the Overview page. Unfortunately, even the "Hello world!" example doesn't build successfully (unless I'm doing something wrong). The first obstacle that I came across was that the page doesn't mention where exactly should these snippets be put in order to make them work. After quite a bit of digging I ended up on the WebSharper v3 documentation which describes how to run example snippets which suggests to use SPA template and replace its content.

Taking the "Hello world!" snippet:

module YourApp

open WebSharper
open WebSharper.Sitelets

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

I've generated the SPA from the template (dotnet new websharper-spa -lang f# -n HelloWorld) and replaced the content of Client.fs with the given code (without replacing the namespace declaration and leaving Startup.fs intact), which results in the following:

namespace HelloWorld

module YourApp

open WebSharper
open WebSharper.Sitelets

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

dotnet run results in:

C:\source\websharper-samples\HelloWorld\Client.fs(5,1,5,5): parse error FS0010: Unexpected start of structured construct in definition. Expected '=' or other token. [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]
C:\source\websharper-samples\HelloWorld\Client.fs(9,1,9,60): parse error FS0010: Incomplete structured construct at or before this point in implementation file [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]

Googling for the first error description I ended up on this SO question, so I've tried defining the "local module" instead:

namespace HelloWorld

module YourApp =

    open WebSharper
    open WebSharper.Sitelets

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

now dotnet run results in:

FSC : WebSharper error FS9001: Error during bundling: Missing entry point or export. Add SPAEntryPoint attribute to a static method without arguments, or JavaScriptExport on types/methods to expose them. [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]

The build failed. Fix the build errors and run again.

After a bit of digging I ended up replacing Website attribute with SPAEntryPoint, which results in:

namespace HelloWorld

module YourApp =

    open WebSharper
    open WebSharper.Sitelets

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

Output of dotnet run:

C:\source\websharper-samples\HelloWorld\Client.fs(9,20,9,64): WebSharper error FS9001: Type not found in JavaScript compilation: WebSharper.Application [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]

The build failed. Fix the build errors and run again.

Googling for this error doesn't give any results. Later I've been trying to modify the code based on the initial content of the template, I've also tried using the let Run = (Main ()).AppendTo "entrypoint" mentioned in v3 documentation (which I guess doesn't work because the API changed between v3 and v4), all to no avail.

So far I can't solve this problem, after at least a few hours of fighting against the "Hello world!" I just gave up... I've followed other WebSharper tutorials with greater success since then, but I think examples from the main page of the documetation which actually work would improve the new starter experience significantly. I'd be keen on trying to contribute to the documentation as well, but I'm still not even able to build these examples.

[mjarosie]

I've found the "Hello world!" snippet on the "Try WebSharper" website, but it doesn't build either... https://try.websharper.com/snippet/adam.granicz/00003F

[Tarmil]

The problem is that the code you are trying to run is server-side code, not client-side. It serves "Hello world!" as static content. Whereas both websharper-spa projects and Try WebSharper only run client-side code in a static HTML file.

To run server-side code, the project to create is websharper-web. The overview page should definitely be more clear about this!

[granicz]

Hi @mjarosie , you are correct and sorry you had to waste time getting started. Indeed, the Overview page (which BTW is fed in from the main core repo README)) is old and hasn't been brushed up for .NET Core - which is a real shame. As an immediate plan, I have been meaning to rewrite that page, so please share your thoughts in comments below on what might go in there. As a longer (or not!) term plan, I am tempted to generate the whole documentation site statically like we did with the Bolero one, simplifying its content (removing pre-4.x stuff, the whole version/language selector, etc.), adding beginner tutorials, and overall just making it more accessible and approachable.

[granicz]

(... and adding a PDF too for offline reading - it's been requested numerous times, and all we could point to was the old 2012 PDF - which of course is mostly outdated in just about every technical aspect.)

[granicz]

I've found the "Hello world!" snippet on the "Try WebSharper" website, but it doesn't build either... https://try.websharper.com/snippet/adam.granicz/00003F

That was a super-old snippet, I just updated it to work, thanks for the catch!

[mjarosie]

Thanks for getting back to me!

I was finally able to run "Hello World!" : D

Steps to follow:

dotnet new websharper-web -lang f# -n ClientServer
cd ClientServer
code .  # Open with VSCode or any other editor of your choice

Then delete Remoting.fs, Client.fs and Main.html (files as well as entries in ClientServer.fsproj). Then replace the content of Site.fs with:

namespace ClientServer

module Site =

    open WebSharper
    open WebSharper.Sitelets

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

Then:

dotnet run

et voilá!

(I think that could be even simpler when using websharper-html template).

Speaking of the overview page, first of all - I think it goes into too much detail at the beginning. By the time I get to the "Hello world!" I:

• am already presented with 3 different ways of installing templates depending on the IDE that I'm using, or if I want to do everything by hand or automatically (also - instructions linking to Visual Studio installation are on the same page that the dotnet new -i WebSharper.Templates), I think it should be enough to just tell the user to use dotnet command, if someone has IDE-specific needs, these can be described further down the document, the same as "manual" project initialisation
• I know 3 different ways of what hosts the app
• have at least 3 new tabs opened:
  • website with templates
  • some deprecated library
  • documentation of sitelets

I think the natural order would be to first show the bare bones, the simplest code, then go into technical details, not the other way around.

The paragraph above "Hello world!" asks me to create a "sitelet" - then as a new user which has no idea what a sitelet is, not wanting to miss anything, I start reading the linked documentation page looking for how to create this sitelet so I can finally run my "Hello world!" example app. Reading the first paragraph is enough to get my head around the concept and realise that I don't need to be creating anything beforehand, and it's only now that I finally reach the "Hello world!" code. That's quite a long journey if you ask me, and in my opinion it should be reverted - I should first see the "Hello world!" code, and only then be presented with the explanation of what's actually happening inside of it, step by step (the sitelets description is actually a good example - it first shows the code and then goes through it almost element by element).

One more catch: contrary to what the documentation says, by default, sites are served on http://localhost:5000, not http://localhost:9000.

Hope that makes sense.