Compiling and Running

Notes

Embedding Elm In an HTML Element

As mentioned in the video, an alternative to running a full-screen Elm app is to embed the app directly into a specific HTML element. That lets you easily integrate Elm into an existing JavaScript project. Here's an example of how to do that:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="bingo.js"></script>
  </head>
  <body>
    <div id="my-bingo-app"></div>
    <script>
      var node = document.getElementById('my-bingo-app');
      var app = Elm.Bingo.embed(node);
    </script>
  </body>
</html>

First we create a div with an id of my-bingo-app where we want to embed the Elm app. Then in the script tag, first we find the my-bingo-app DOM node and store that node in a variable. Then to embed the Elm app, instead of calling Elm.fullscreen as we did in the video, here we call the Elm.Bingo.embed function and pass it the node.

Using this technique, you can embed an Elm app in any HTML element!

Elm Online Editor

Want to write a quick Elm program without creating a file or installing anything? Try Elm in the online editor! Type your Elm code in the left-hand pane, hit the "Compile" button (or use the keyboard shortcut CTRL-RETURN), and the output magically appears in the right-hand pane.

Auto-Compilation with Gulp

If you're a fan of Gulp, then you can rebuild Elm projects using the gulp-elm plugin. Here's how:

First, make sure you're in your bingo project directory and then run the following commands to install all the required npm packages:
```
npm install gulp --save-dev
npm install gulp-elm --save-dev
npm install gulp-rename --save-dev
```
This installs the packages into the node_modules directory of the current working directory, which is your bingo directory.

Then create a file named gulpfile.js in your bingo directory and paste in the following code (Thanks to Tony Rizko!):

var gulp = require('gulp'),
   elm = require('gulp-elm'),
   rename = require('gulp-rename');

gulp.task('elm-init', elm.init);

gulp.task('elm', ['elm-init'], function () {
   return gulp.src('./Bingo.elm')
       .pipe(elm())
       .on('error', swallowError)
       .pipe(rename('bingo.js'))
       .pipe(gulp.dest('./'))
});

function swallowError (error) {
   console.log(error.toString());
   this.emit('end');
}

gulp.task('default', ['elm'], function () {
   gulp.watch('./*.elm', ['elm']);
});

To watch for changes and recompile as necessary, type
```
gulp
```
You should see the following output as it patiently waits for changes to the .elm files:
```
[11:59:13] Using gulpfile ~/path/to/bingo/gulpfile.js
[11:59:13] Starting 'elm-init'...
[11:59:14] Finished 'elm-init' after 43 ms
...
```
Make a change to your Bingo.elm file, save it, and the file should get automatically recompiled into bingo.js.

Webpack

If you're a Webpack fan, check out the elm-webpack-loader.

Seeing Strange Behavior?

If you notice any weird compiler behavior during development (it's rare), try deleting the elm-stuff/build-artifacts directory and compiling again. Cleaning up this directory generally fixes the problem.

Code So Far

The code for this video is in the compiling-and-running directory found within the video-code directory of the code bundle.

Get Full Course Access →