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

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.