BrowserSPA tutorial - Nothing to see in the browser

dotnetspec commented 3 months ago

Description

I've been through Fable and Fable.Elmish setup and tried the BrowserSPA tutorial. dotnet build of new file Browserspa.fs succeeds and a Browserspa.fs.ts is created. so I proceed to npx vite to run the development server as I had previously on compiling Program.fs (from the Fable tutuorial).

Repro code

Files in same folder:

Browserspa.fs:

type Model = int

type Msg =
    | Increment
    | Decrement

open Elmish

let init () =
    0

let update (msg:Msg) count =
    match msg with
    | Increment -> count + 1
    | Decrement -> count - 1

open Fable.React
open Fable.React.Props

let view model dispatch =

    div []
        [
            button [ OnClick (fun _ -> dispatch Decrement) ] [ str "-" ]
            div [] [ str (sprintf "%A" model) ]
            button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
        ]

open Elmish.React

Program.mkSimple init update view
|> Program.withReactBatched "elmish-app"
|> Program.run

index.html:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fable</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="elmish-app"></div>
  </body>
</html>

package.json:

{
  "name": "fsharp",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.14.11",
    "typescript": "^5.5.3",
    "vite": "^5.3.4"
  },
  "dependencies": {
    "fable-elmish": "^0.8.1",
    "fable-elmish-react": "^0.8.3",
    "fable-react": "^0.8.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Expected and actual results

Expected: To see the counter app in the local-host browser.

Actual: Nothing appears. Console just has [vite] connecting...

Related information

elmish version: 4.2.0
fable-compiler version: 4.19.3
fable-core version: 4.3.0
Operating system: Linux Mint 21.3 Cinnamon

What is missing that prevents the 'elmish-app' from appearing in the browser? Thanks ...

MangelMaxime commented 3 months ago

Hello @dotnetspec,

you need to import your application code so vite can load the JavaScript files etc. by adding something like<script type="module" src="/fableBuild/src/App.js"></script> to your index.html file.

dotnetspec commented 3 months ago

Thanks, yes, that was it ...

elmish / react