# Bootstrapping an Elm Project
[Elm][1] is a delightful language for building reliable web applications. It's a language that gets compiled to JavaScript and so is used to build applications that run in a web browser.
In this post, we're going to explore different ways of starting an Elm project, starting with the simplest and moving on to setups with more advanced features such as hot-reload in development.
Let's get started!
### Prerequisites
Before we get started, please make sure to [Install Elm][2]
To confirm if you have Elm installed, you can try running the interactive `repl` using the `elm repl` command. If you get a prompt such as the one shown in this image, you're good to go 👍
![Elm repl][3]
### Elm CLI
This is the officially supported way of creating a new Elm project.
1. Create a new directory where your project will live
`mkdir my-awesome-elm-project`
2. Navigate to the newly created directory
`cd my-awesome-elm-project`
3. Run `elm init` inside this directory and you should get a prompt like the one below:
![Elm init prompt][4]
4. Press the `Enter` key and it should create an `elm.json` file in the current directory. A `src` directory will also be created.
_It is a good idea to read through the [linked resource][5] that talks more about starting new Elm projects_
5. Let's start by creating a new `Main.elm` file in the `src` directory. Once we've created the file, let's add some Elm code that should show us the classic "Hello World!" message once we run it.
```elm
module Main exposing (main)
import Browser
import Html exposing (h1, text)
main =
h1 [] [ text "Hello World!" ]
```
6. To run the code, let's run `elm reactor` in our directory and it should start a new local server at [http://localhost:8000](http://localhost:8000). `elm reactor` is the simplest way to get started running Elm code.
7. Once you navigate to [http://localhost:8000](http://localhost:8000), you should see an interface like the following.
![Elm Reactor][6]
Click on the `src` link, then `Main.elm` and you should be greeted by our "Hello World!" message.
And that's it! We've successfully created a project the `elm init` command and run it using `elm reactor`.
#### Pros:
- Easy to get started
- No external dependencies apart from `elm` itself
#### Cons:
- Manual reloading once we make changes
### Elm Make
This is an extension of `elm reactor` and includes the ability to compile our Elm code to static HTML.
Using the same project from our previous section, we can compile the project using the command:
`elm make src/Main.elm`
Once we run this command, an `index.html` file will be generated in the current working directory, and if you open it in a web browser, you should see the same "Hello World" message.
I don't have lots of experience with `elm make` so that's as far as I'll go with it.
### Parcel
[Parcel][7] is a "Blazing fast, zero configuration web application bundler" and is my personal favourite to get started with an Elm application quickly. It handles compiling your Elm code to JavaScript and is super easy to get started with.
You can create an Elm application compiled by Parcel in a few simple steps:
1. Install Parcel
`yarn global add parcel-bundler` or `npm install -g parcel-bundler`
2. Follow the instructions in the [Elm section][8] of the Parcel website, which involves:
- creating an `index.html` file with the following contents:
```html
```
- creating an `index.js` file with the following contents:
```javascript
import { Elm } from "./Main.elm"
Elm.Main.init({
node: document.querySelector("main"),
})
```
- creating a `Main.elm` file with the following contents:
```elm
module Main exposing (main)
import Browser
import Html exposing (h1, text)
main =
h1 [] [ text "Hello, from Parcel!" ]
```
4. To run the application, run the command:
`parcel index.html`
I love this setup so much that I've created my own starter project based on Parcel. Feel free to check it out on [GitHub][9]
#### Pros:
- Easy to get started with
- No manual configuration needed 💪
- Hot reload included out of the box
- Easy to get started with [JavaScript Interop][10]
#### Cons:
🤷♀️
### Notable Mentions:
- [create-elm-app][11] – Based on [create-react-app][12] and creates a zero-config application based on Webpack
- [elm-live][13] – A flexible dev server for Elm. Live reload included.
_This is not meant to be a comprehensive list, and any suggestions/additions are welcome in the comments section below._
I hope these options are useful for you when starting out your next Elm project 🚀
[1]: https://elm-lang.org/
[2]: https://guide.elm-lang.org/install.html
[3]: https://kevgathuku.files.wordpress.com/2019/05/screen-shot-2019-05-29-at-10.15.12.png?w=1024
[4]: https://kevgathuku.files.wordpress.com/2019/05/screen-shot-2019-05-29-at-10.29.05.png
[5]: https://elm-lang.org/0.19.0/init
[6]: https://kevgathuku.files.wordpress.com/2019/05/screen-shot-2019-05-29-at-10.48.52.png
[7]: https://parceljs.org/
[8]: https://parceljs.org/elm.html
[9]: https://github.com/kevgathuku/parcel-elm/
[10]: https://guide.elm-lang.org/interop/
[11]: https://github.com/halfzebra/create-elm-app
[12]: https://github.com/facebook/create-react-app
[13]: https://github.com/wking-io/elm-live