higherkindness · kutyel · May 19, 2021 · May 18, 2021 · May 18, 2021 · kutyel
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ $ cd frontend && yarn && yarn codegen && yarn start
 - [mu-haskell] uses the `schema.graphql` as the single source of truth, using it to generate type level representations of the schema that we can use to implement our server!
 - [elm-graphql] also supports code-generation from introspection files, local schema files, and remote servers with introspection enabled _(it usually is)_.
 - It's usually better to use a single schema file (like in this repo), with both backend and client code located in the same repo (rather than having duplicate schemas in several repositories - in that case someday they will become inconsistent).
-- both [elm-graphql] and [elm-app] can be installed as global dependencies, but we don't consider it a good practice, because it immediately becomes harder to maintain versions.
+- both [elm-graphql] and [elm-live] can be installed as global dependencies, but we don't consider it a good practice, because it immediately becomes harder to maintain versions.
 - old generated files are removed by [elm-graphql] automatically, we don't need to worry about it.
 
   [elm ci]: https://github.com/kutyel/mu-graphql-example-elm/workflows/Elm%20CI/badge.svg
@@ -51,7 +51,7 @@ $ cd frontend && yarn && yarn codegen && yarn start
   [stack]: https://docs.haskellstack.org/en/stable/README/#how-to-install
   [yarn]: https://yarnpkg.com/getting-started/install
   [elm-graphql]: https://github.com/dillonkearns/elm-graphql/
-  [elm-app]: https://github.com/halfzebra/create-elm-app
+  [elm-live]: https://www.elm-live.com/
 
 ## Contributing:
 

diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -1,6 +1,9 @@
 # Distribution
 build/
 
+# Dev build artifacts
+public/bundle.js
+
 # elm-package generated files
 elm-stuff
 

diff --git a/frontend/elm.json b/frontend/elm.json
@@ -21,13 +21,13 @@
             "elm/regex": "1.0.0",
             "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.2",
-            "elm-community/list-extra": "8.2.4",
+            "elm-community/list-extra": "8.3.0",
             "lukewestby/elm-string-interpolate": "1.0.4"
         }
     },
     "test-dependencies": {
         "direct": {
-            "elm-explorations/test": "1.0.0"
+            "elm-explorations/test": "1.2.2"
         },
         "indirect": {
             "elm/random": "1.0.0"

diff --git a/frontend/package.json b/frontend/package.json
@@ -4,14 +4,14 @@
   "description": "Elm client example for our mu-haskell GraphQL server!",
   "scripts": {
     "codegen": "elm-graphql --schema-file ../library.graphql --base LibraryApi --output src",
-    "start": "elm-app start"
+    "start": "elm-live src/Main.elm --dir=public --open --host=0.0.0.0 --port=8080 --pushstate --start-page=index.html -- --output=public/bundle.js"
   },
   "author": "higherkindness",
   "license": "MIT",
   "dependencies": {
-    "@dillonkearns/elm-graphql": "^4.0.3"
+    "@dillonkearns/elm-graphql": "^4.2.1"
   },
   "devDependencies": {
-    "create-elm-app": "^5.11.0"
+    "elm-live": "^4.0.2"
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -5,13 +5,14 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/main.css" />
+
+    <script type="text/javascript" src="/bundle.js"></script>
+    <script type="text/javascript" src="/index.js"></script>
     <title>Library example</title>
 </head>
 <body>

diff --git a/frontend/src/index.js → frontend/public/index.js b/frontend/src/index.js → frontend/public/index.js
@@ -1,10 +1,6 @@
-import './main.css'
-import { Elm } from './Main.elm'
-
-const app = Elm.Main.init({ node: document.getElementById('root') })
-const graphqlWebsocketsUrl = 'ws://localhost:8000'
-
 document.addEventListener('DOMContentLoaded', () => {
+  const app = Elm.Main.init({ node: document.getElementById('root') })
+  const graphqlWebsocketsUrl = 'ws://localhost:8000'
   let isActive = false
 
   app.ports.subscribeToAllBooks.subscribe((subscriptionString) => {

diff --git a/frontend/src/main.css → frontend/public/main.css b/frontend/src/main.css → frontend/public/main.css
@@ -1,7 +1,3 @@
-[data-elm-hot="true"] {
-  height: inherit;
-}
-
 :root {
   --main-color-100: rgba(0, 30, 56, 1);
   --main-color-60: rgba(0, 30, 56, 0.6);