forgot some files

Anton-4 · Anton-4 · commit 97fc4056be19 · 2024-08-14T10:19:54.000+02:00
diff --git a/examples/ElmWebApp/README.md b/examples/ElmWebApp/README.md
@@ -0,0 +1,70 @@
+# Web App with Elm
+
+A minimal web app with an Elm [frontend](https://chatgpt.com/share/93575daf-49ef-48ba-b39d-ab04672e4019) and Roc [backend](https://chatgpt.com/share/7ac35a32-dab5-46d0-bb17-9d584469556f). The Roc backend uses the [basic-webserver](https://github.com/roc-lang/basic-webserver) platform.
+
+## Why Elm + Roc?
+
+Roc was inspired by Elm, so it's nice to be able to use a similar language for the frontend. Elm also has a mature collection of re-usable packages.
+
+## Alternatives
+
+We've also enjoyed using [htmx with Roc](https://github.com/lukewilliamboswell/roc-htmx-playground). It allows you to use Roc for the frontend and the backend.
+
+## Full Code 
+
+src/Main.elm:
+```elm
+file:src/Main.elm
+```
+
+elm.json:
+```json
+file:elm.json
+```
+
+index.html:
+```html
+file:index.html
+```
+
+webserver.roc:
+```roc
+file:webserver.roc
+```
+## Running
+
+### Roc
+
+You can change the port on which the Roc server runs with ROC_BASIC_WEBSERVER_PORT.
+```
+cd examples/ElmWebApp/
+
+# development
+roc backend.roc
+
+# production
+roc build backend.roc --optimize
+./backend
+```
+
+### Elm
+
+> Note: for non-trivial Elm development we recommend using [elm-watch](https://github.com/lydell/elm-watch).
+
+Compile elm code to javascript.
+
+```
+cd examples/ElmWebApp/frontend
+# development
+elm make src/Main.elm --output elm.js
+# production
+elm make src/Main.elm --output elm.js --optimize
+```
+
+Serve the frontend:
+```
+elm reactor --port 8001 # Roc backend will be on 8000
+```
+For production; use a [battle-tested HTTP server](https://chatgpt.com/share/5809a606-10ea-4ee6-b821-732465016254) instead of elm reactor.
+
+Open localhost:8001/index.html in your browser.
diff --git a/examples/ElmWebApp/backend b/examples/ElmWebApp/backend
diff --git a/examples/ElmWebApp/backend.roc b/examples/ElmWebApp/backend.roc
@@ -0,0 +1,24 @@
+app [main] { pf: platform "https://github.com/roc-lang/basic-webserver/releases/download/0.4.0/iAiYpbs5zdVB75golcg_YMtgexN3e2fwhsYPLPCeGzk.tar.br" }
+
+import pf.Stdout
+import pf.Task exposing [Task]
+import pf.Http exposing [Request, Response]
+import pf.Utc
+
+# [backend](https://chatgpt.com/share/7ac35a32-dab5-46d0-bb17-9d584469556f) Roc server
+
+main : Request -> Task Response []
+main = \req ->
+    # Log request datetime, method and url
+    datetime = Utc.now! |> Utc.toIso8601Str
+
+    Stdout.line! "$(datetime) $(Http.methodToStr req.method) $(req.url)"
+
+    Task.ok {
+        status: 200,
+        headers: [
+            # TODO check if this header is a good idea
+            { name: "Access-Control-Allow-Origin", value: Str.toUtf8 "*" },
+        ],
+        body: Str.toUtf8 "Hi, Elm! This is from Roc: 🎁\n",
+    }
diff --git a/examples/ElmWebApp/frontend/elm.json b/examples/ElmWebApp/frontend/elm.json
@@ -0,0 +1,27 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.5",
+            "elm/html": "1.0.0",
+            "elm/http": "2.0.0",
+            "elm/json": "1.1.3"
+        },
+        "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.3"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
diff --git a/examples/ElmWebApp/frontend/index.html b/examples/ElmWebApp/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+	<head> </head>
+	<body>
+		<!-- app div is used by elm -->
+		<div id="app"></div>
+		<!-- elm is compiled to js -->
+		<script src="elm.js"></script>
+		<script>
+			Elm.Main.init({ node: document.getElementById("app") });
+		</script>
+	</body>
+</html>
diff --git a/examples/ElmWebApp/frontend/src/Main.elm b/examples/ElmWebApp/frontend/src/Main.elm
@@ -0,0 +1,84 @@
+module Main exposing (..)
+
+-- Importing necessary modules
+import Browser
+import Html exposing (Html, div, text, h1)
+import Html.Attributes exposing (..)
+import Http
+
+-- MAIN
+
+-- The main function is the entry point of an Elm application
+main =
+    Browser.element
+        { init = init
+        , update = update
+        , subscriptions = subscriptions
+        , view = view
+        }
+
+-- MODEL
+
+-- Model represents the state of our application
+type Model
+  = Failure String
+  | Loading
+  | Success String
+
+-- init function sets up the initial state and any commands to run on startup
+init : () -> (Model, Cmd Msg)
+init _ =
+  ( Loading
+  , fetchData
+  )
+
+-- UPDATE
+
+-- Msg represents the different types of messages our app can receive
+type Msg
+    = GotResponse (Result Http.Error String)
+
+-- update function handles how the model changes in response to messages
+update : Msg -> Model -> (Model, Cmd Msg)
+update msg model =
+    case msg of
+        GotResponse result ->
+         case result of
+          Ok body ->
+           (Success body, Cmd.none)
+          Err error ->
+             (Failure (Debug.toString error), Cmd.none)
+
+-- VIEW
+
+-- view function determines what to display in the browser based on the current model
+view : Model -> Html Msg
+view model =
+  case model of
+    Failure errorMsg ->
+      text ("Is the Roc webserver running? I hit an error: " ++ errorMsg)
+    Loading ->
+      text "Loading..."
+    Success body ->
+     div [ id "app" ]
+      [
+       h1 [] [ text body ]
+      ]
+
+-- HTTP
+
+-- fetchData sends an HTTP GET request to the Roc backend
+fetchData : Cmd Msg
+fetchData =
+    Http.get
+        { url = "http://localhost:8000/"
+        , expect = Http.expectString GotResponse
+        }
+
+-- SUBSCRIPTIONS
+
+-- subscriptions allow the app to listen for external input (e.g., time, websockets)
+-- In this case, we're not using any subscriptions
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
