Name: Create your first web page with Elm
Uploaded: 2016-03-19T22:11:44-05:00
Description: This lesson will take you from nothing to a small Elm app that prints text to the browser.

This lesson will take you from nothing to a small Elm app that prints text to the browser.

https://app.egghead.io/api/v1/lessons/elm-create-your-first-web-page-with-elm/subtitles

Create your first web page with Elm

[00:00] Here I've got an empty folder just for [inaudible] . There it is, an empty folder. I'm going to make a file, touch. Main.elm. I'm going to start off this file by typing "module, main, where." This name should match the name of the file on disk, which is main.elm right now. The way you get something to the screen in Elm is by creating a function named "main."

[00:24] This is a special convention, and Elm knows to look for the function named "main" and render whatever it has to the screen. Let's just put some text in here. "Hello." Let's start up Elm reactor, which is a little server than can auto-compile Elm files for us and stick them in the browser. You could see it's running on local host 8000, so let's go there. "Local host 8000."

[00:49] Here, it's got a list of the files in the folder where I'm running Elm reactor. Let's click on "main," and we'll get to see what its compilation result is in just a second. Here we go, OK. It says, "Bad main type. The main value has an unsupported type." I need an element HTML, signal element, or signal HTML so I can render it on-screen, but you gave me a string.

[01:13] Let's try putting an element in there. I'm going to import "graphics.element." Graphics.element is part of the core library, and it exposes a function called "show." Exposing show. Show will take a string, it'll turn it into a graphics element which, according to this error message, main expects. Here, get that "Show hello.'" Let's see if it works.

[01:43] Save the file. Reload the page. Now I've got text on the screen. Let's say though that we want to render HTML to the screen instead of just this graphical text. In that case, we're going to import HTML which is a third-party package. We'll see what happens if we try to get HTML going right away. Let's recompile again.

[02:11] It says, "I cannot find module HTML. Module main is trying to import it." That's because it's from the Elm package repo, and it's a third-party repository. We can get it installed by typing "Elm package install evancz/elm-HTML." That's the name of the package.

[02:36] It says, "Should I add this to your Elm package, Jason?" I acknowledge. I approve of this plan. It's going to download that package for me, and it's going to make a new configuration file called "Elm package.Jason." You can see that my dependencies are in here now, so I should be able to reload the file.

[02:58] Now it says, "Main has an unsupported type. It should be HTML" just because we reassigned a string to it. Let's pull out of HTML the div function and the text function. Text takes a string, and it returns something that HTML knows how to handle.

[03:15] Div creates an HTML element that can be rendered to the screen so div. The first argument to div is an array of attributes. You can put anything you want in there, but we don't need anything right now. The second argument is a list of other HTML to write it to the screen so take HTML. That's in a string, and now we have HTML on the screen.

[03:42] We could take a quick look here at the source just to prove it. Div. "Hello there." Perfect.

Create your first web page with Elm

Share this video with your friends