danneu · May 9, 2022 06:17 · May 9, 2022 · May 9, 2022 · May 9, 2022 · May 9, 2022
diff --git a/0-README.md b/0-README.md
@@ -79,3 +79,5 @@ parcel build index.html
 # Creates ./dist folder with html, js, css files
 ```
 
+Parcel docs: https://parceljs.org/getting-started/webapp/
+
diff --git a/0-README.md b/0-README.md
@@ -32,7 +32,7 @@ Project structure so far:
     └── Main.elm
 ```
 
-Save Elm boilerplate to `src/Main.elm`: https://ellie-app.com/hphB4mjXYBpa1
+Save Elm boilerplate to `src/Main.elm`: (See attached `1-Main.elm` file)
 
 Save this to index.html:
 

diff --git a/1-Main.elm b/1-Main.elm
@@ -0,0 +1,55 @@
+module Main exposing (main)
+
+import Browser
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+
+
+type alias Model =
+    { draft : String
+    }
+
+
+type alias Flags =
+    { initDraft : String }
+
+
+init : Flags -> ( Model, Cmd Msg )
+init flags =
+    ( { draft = flags.initDraft
+      }
+    , Cmd.none
+    )
+
+
+type Msg
+    = DraftChanged String
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        DraftChanged value ->
+            ( { model | draft = value }
+            , Cmd.none
+            )
+
+
+view : Model -> Html Msg
+view model =
+    div []
+        [ textarea
+            [ onInput DraftChanged ]
+            [ text model.draft ]
+        ]
+
+
+main : Program Flags Model Msg
+main =
+    Browser.element
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = \_ -> Sub.none
+        }
diff --git a/0-README.md b/0-README.md
@@ -72,3 +72,10 @@ parcel index.html
 
 (Or use `npx parcel index.html` if you installed parcel locally with `npm install --save-dev parcel`. `npx` uses the parcel binary found in your project's `./node_modules/.bin` since it otherwise isn't in your $PATH.)
 
+When you're ready for a production build:
+
+```shell
+parcel build index.html
+# Creates ./dist folder with html, js, css files
+```
+
diff --git a/0-README.md b/0-README.md
@@ -1,15 +1,21 @@
 # Elm quickstart with Parcel
 
+Create project boilerplate:
+
 ```shell
 mkdir my-elm-project
 cd my-elm-project
 elm init
 touch src/Main.elm # This is where we put our Elm app
+
 echo '{}' > package.json # Empty package.json to install NPM libs
+
 npm install -g parcel # Or install project-locally with `npm install --save-dev parcel`
+
 touch example.scss # Just to show that Parcel automatically handles things like .scss
 touch index.html
 touch index.js
+
 npm install uuid # Let's use an NPM library for demonstration
 ```
 

diff --git a/0-README.md b/0-README.md
@@ -4,32 +4,59 @@
 mkdir my-elm-project
 cd my-elm-project
 elm init
+touch src/Main.elm # This is where we put our Elm app
 echo '{}' > package.json # Empty package.json to install NPM libs
 npm install -g parcel # Or install project-locally with `npm install --save-dev parcel`
 touch example.scss # Just to show that Parcel automatically handles things like .scss
 touch index.html
+touch index.js
+npm install uuid # Let's use an NPM library for demonstration
+```
+
+Project structure so far:
+
+```
+.
+├── elm.json
+├── example.scss
+├── index.html
+├── index.js
+├── package.json
+└── src
+    └── Main.elm
 ```
 
 Save Elm boilerplate to `src/Main.elm`: https://ellie-app.com/hphB4mjXYBpa1
 
 Save this to index.html:
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <head>
-    <link rel="stylesheet" href="./example.scss" />
-    <script src="./src/Main.elm"></script>
+  <link rel="stylesheet" href="./example.scss" />
 </head>
 <body>
-    <main/>
-    <script>
-        const app = Elm.Main.init({
-            node: document.querySelector('main')
-        })
-    </script>
+  <main></main>
+  <script type="module" src="index.js"></script>
 </body>
 ```
 
+Inside `index.js` we mount our Elm app to `<main>` and can import NPM libraries and use them:
+
+```javascript
+// index.js
+import { Elm } from './src/Main.elm'
+import * as uuid from 'uuid'
+
+const app = Elm.Main.init({
+  node: document.querySelector('main'),
+  flags: {
+    // Example of using npm library to pass value into Elm via flag
+    initDraft: uuid.v4()
+  }
+})
+```
+
 Use `parcel` to run dev server:
 
 ```shell
@@ -39,5 +66,3 @@ parcel index.html
 
 (Or use `npx parcel index.html` if you installed parcel locally with `npm install --save-dev parcel`. `npx` uses the parcel binary found in your project's `./node_modules/.bin` since it otherwise isn't in your $PATH.)
 
-Read more about parcel: https://parceljs.org/getting-started/webapp/
-
diff --git a/0-README.md b/0-README.md
@@ -37,7 +37,7 @@ parcel index.html
 # Navigate browser to http://localhost:1234
 ```
 
-(Or use `npx parcel index.html` if you installed parcel locally with `npm install --save-dev parcel`. `npx` uses the parcel binary found in your project's `./node_modules/.bin`)
+(Or use `npx parcel index.html` if you installed parcel locally with `npm install --save-dev parcel`. `npx` uses the parcel binary found in your project's `./node_modules/.bin` since it otherwise isn't in your $PATH.)
 
 Read more about parcel: https://parceljs.org/getting-started/webapp/
 
diff --git a/0-README.md b/0-README.md
@@ -5,7 +5,7 @@ mkdir my-elm-project
 cd my-elm-project
 elm init
 echo '{}' > package.json # Empty package.json to install NPM libs
-npm install -g parcel
+npm install -g parcel # Or install project-locally with `npm install --save-dev parcel`
 touch example.scss # Just to show that Parcel automatically handles things like .scss
 touch index.html
 ```
@@ -37,5 +37,7 @@ parcel index.html
 # Navigate browser to http://localhost:1234
 ```
 
+(Or use `npx parcel index.html` if you installed parcel locally with `npm install --save-dev parcel`. `npx` uses the parcel binary found in your project's `./node_modules/.bin`)
+
 Read more about parcel: https://parceljs.org/getting-started/webapp/
 
diff --git a/0-README.md b/0-README.md
@@ -5,7 +5,7 @@ mkdir my-elm-project
 cd my-elm-project
 elm init
 echo '{}' > package.json # Empty package.json to install NPM libs
-npm install -g parcel # OR npm install --save-dev parcel
+npm install -g parcel
 touch example.scss # Just to show that Parcel automatically handles things like .scss
 touch index.html
 ```
@@ -37,3 +37,5 @@ parcel index.html
 # Navigate browser to http://localhost:1234
 ```
 
+Read more about parcel: https://parceljs.org/getting-started/webapp/
+
diff --git a/0-README.md b/0-README.md
@@ -5,7 +5,7 @@ mkdir my-elm-project
 cd my-elm-project
 elm init
 echo '{}' > package.json # Empty package.json to install NPM libs
-npm install -g parcel
+npm install -g parcel # OR npm install --save-dev parcel
 touch example.scss # Just to show that Parcel automatically handles things like .scss
 touch index.html
 ```

diff --git a/0-README.md b/0-README.md
@@ -4,9 +4,9 @@
 mkdir my-elm-project
 cd my-elm-project
 elm init
-echo '{}' > package.json
+echo '{}' > package.json # Empty package.json to install NPM libs
 npm install -g parcel
-touch example.css
+touch example.scss # Just to show that Parcel automatically handles things like .scss
 touch index.html
 ```
 
@@ -17,7 +17,7 @@ Save this to index.html:
 ```html
 <!doctype html>
 <head>
-    <link rel="stylesheet" href="./example.css" />
+    <link rel="stylesheet" href="./example.scss" />
     <script src="./src/Main.elm"></script>
 </head>
 <body>

diff --git a/0-README.md b/0-README.md
@@ -18,7 +18,7 @@ Save this to index.html:
 <!doctype html>
 <head>
     <link rel="stylesheet" href="./example.css" />
-    <script src="./src/Main.elm" />
+    <script src="./src/Main.elm"></script>
 </head>
 <body>
     <main/>

diff --git a/0-README.md b/0-README.md
@@ -1,3 +1,5 @@
+# Elm quickstart with Parcel
+
 ```shell
 mkdir my-elm-project
 cd my-elm-project

diff --git a/0-README.md b/0-README.md
@@ -0,0 +1,37 @@
+```shell
+mkdir my-elm-project
+cd my-elm-project
+elm init
+echo '{}' > package.json
+npm install -g parcel
+touch example.css
+touch index.html
+```
+
+Save Elm boilerplate to `src/Main.elm`: https://ellie-app.com/hphB4mjXYBpa1
+
+Save this to index.html:
+
+```html
+<!doctype html>
+<head>
+    <link rel="stylesheet" href="./example.css" />
+    <script src="./src/Main.elm" />
+</head>
+<body>
+    <main/>
+    <script>
+        const app = Elm.Main.init({
+            node: document.querySelector('main')
+        })
+    </script>
+</body>
+```
+
+Use `parcel` to run dev server:
+
+```shell
+parcel index.html
+# Navigate browser to http://localhost:1234
+```
+