Bootstrap an elm-ui Application with create-elm-app

Flavio Corpa
InstructorFlavio Corpa

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 2 years ago

We are going to go ahead and install globally create-elm-app (because it has the best DX so far) and show how would you typically start any production-ready Elm app, and also add elm-ui as a dependency and show the first elements with elm-ui.

Instructor: [0:00] We're going to begin by installing npm install create-elm-app. Now that it's done, we're just going to create-elm-app/my-dashboard. Now, we're going to do what it says here. We're going to go into my-dashboard and do elm-app start.

[0:35] There are several ways to bootstrap Elm applications that I think create-elm-app is very similar to create-react-app. It provides the best user experience, so far, so that's why we're going to use it.

[0:50] Now, we can just open our main dotenv file. We see that we have several sections. We have the model, the init function, the update section and update function, the view function, and the main. What we're going to do now is just to stop and we're going to type elm install mdgriffith/elm-ui. We're going to answer Yes.

[1:25] Then, we're going to type elm app start again. Nothing will change, but we'll see later what happens.

[1:35] Now what we're going to do is go here and type a couple imports, import Element.Background, Element.Border, I'll call it Border. We're also going to import Element.Font and call it Font. Import Element exposing (..). We can remove this and also, this.

[2:14] Now we're just going to go ahead to the elm-ui docs and copy this code. We're going to go to our view function and paste it here. Remove the main function and then we go back to our app. Now everything should work.

[2:35] We basically pasted three things. We pasted this layout in which we're showing my row of stuff, and we're just showing one row that displays three elements.

[2:50] If you notice, we're repeating three times the same element. This element is this box that we are showing here. It is basically just a box with a background color pink and the word "Stylish." It has the border rounded by 3px.

[3:07] This is a very good way to start with any elm-ui project. This is how we typically would bootstrap an elm-ui application with create-elm-app.

fauno F
fauno F
~ 2 years ago

hi master, looking for dive into this interesting course, what vscode extensions would you suggest in order to follow you along?

Flavio Corpa
Flavio Corpainstructor
~ 2 years ago

Only the Elm vscode official one is needed 😉 https://marketplace.visualstudio.com/items?itemName=Elmtooling.elm-ls-vscode

fauno F
fauno F
~ 2 years ago

thank you  :wq!