Test running Parcel with Elm 0.19 and Furtive (with Sass)
Tags: elm, furtive, parcel
Published: 2018-09-17 12:26:45

---
title: Test running Parcel with Elm 0.19 and Furtive (with Sass)
published: true
description: A backend dev takes Parcel for a test run using a weird setup
tags: elm, furtive, parcel
---

## Premise

So <a href="https://dev.to/ben">Ben</a> started a [discussion about Parcel](https://dev.to/ben/im-having-some-not-this-again-feelings-with-parcel-how-should-i-be-feeling-about-this-tool-241p) the other day. I didn't participate in it, mainly because I've never even heard of Parcel before.

I did however open up the [project website](https://parceljs.org/) and it got me really interested for two reasons: First it seemed much simpler than webpack, second it promised to be much faster than webpack. Now my webpack experience is just slightly above what I'd describe as advanced beginner even though I already started a few dozen projects using it and watched many courses using it both on Youtube and Udemy. Most of the time however I just started with copying something that others crafted and adjusted it to my needs. I wouldn't go as far as to say that I had no idea what I was doing, but I certainly didn't master the tool.
I have copied webpack setups of some really knowledgeable people in the past, but I always felt that that the end result is somewhat clumsy and extremely slow, therefore I decided to give Parcel a shot. To make things more interesting, I decided to try to set it up with [Elm](https://elm-lang.org/) [0.19](https://elm-lang.org/blog/small-assets-without-the-headache) and [Furtive](http://furtive.co)

I literally just installed the tool this morning so I will not try to assess its performance in real-life projects but it sure feels much faster so far. What I will say however is that it was a breeze setting it up, even for me, even for such a weird setup. Let me drive you through:

## Path #1: Quick and dirty way (<2 mins)

### 1. Clone my repo

```bash
git clone https://github.com/peteraba/elm0.19-furtive-parcel.git
```

### 2. Install the missing dependencies

```
yarn install
```

## Path #2: DIY (~10 mins)

### 1. Create a new project directory

```bash
mkdir path/to/your/project
cd path/to/your/project
```

### 2. Initialize your project

```bash
yarn init -y
```

### 3. Add Furtive

For this project I decided to choose a tiny frontend framework called [Furtive](http://furtive.co) to keep things fast. I could have stayed with just including a minimized css from a CDN but I wanted to test Parcel so I decided to add Sass compilation instead:

```bash
yarn add node-sass
yarn add furtive
```

### 4. Add Elm support

_UPDATE (2018-09-20)_:

This part has become much easier as 0.19 support is now added to [parcel-plugin-elm](https://github.com/ssuman/parcel-plugin-elm), simply add it with yarn:

```bash
yarn add parcel-plugin-elm
```

~~Now this part was a bit tricky, because I wanted to use the latest Elm 0.19 and [the main Elm plugin for Parcel](https://github.com/ssuman/parcel-plugin-elm) is outdated. There is a [pull request](https://github.com/ssuman/parcel-plugin-elm/pull/10) from [Ben Hanna](https://twitter.com/benpaulhanna) for 0.19 but it's not yet merged. Also, I'm not really a yarn expert, so I had to look up how to use his code instead of the official one. Okay, it only took about 2 minutes, but still..~~

~~So basically I downloaded Ben's code and extracted it to a directory called `outdated` and added it via yarn (_yarn add file:./outdated/parcel-plugin-elm_). This should remind me to use the main repo once the changes get merged.~~


### 5. Initialize your elm project

Parcel still doesn't know about Elm, so we should probably install it locally:
```bash
yarn add elm@^0.19.0-bugfix2
```

Then we can also initialize our Elm project:
```bash
yes | ./node_modules/.bin/elm init
```

#### *Optional:* global Elm install

In case you don't have Elm 0.19 installed but want to toy with it, please find the [installation instructions](https://guide.elm-lang.org/install.html) in the [Official Guide](https://guide.elm-lang.org/).

### 6. Create project files

#### `sass/main.scss`

```sass
$font-family: 'Lato', Helvetica, sans-serif;
$dark-gray: #222;
$text-color: $dark-gray;
$body-bg: #fafafa;

@import "node_modules/furtive/scss/all.scss";

.elm-container {
    margin: 5px 0;

    button, div {
        display: inline-block;
        margin: 2px;
    }
}
```

#### `src/Main.elm`:

```elm
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Attributes exposing (class)

main =
  Browser.sandbox { init = 0, update = update, view = view }

type Msg = Increment | Decrement

update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

view model =
  div [class "elm-container txt--center"]
    [ button [ onClick Decrement, class "btn btn--blue btn--s" ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment, class "btn btn--green btn--s" ] [ text "+" ]
    ]
```

#### `index.html`:

```html
<html>
    <head>
        <title>Hello, Parcel!</title>
        <script src="./index.js"></script>
    </head>
<body>
    <main></main>
</body>
</html>
```

#### `index.js`:

```js
import './sass/main.scss'

if (module.hot) {
    module.hot.dispose(() => {
        window.location.reload();
    });
}

import('./src/Main.elm')
    .then(({ Elm }) => {
        var node = document.querySelector('main');
        Elm.Main.init({ node: node });
    });
```

*Note:* The if part in the middle is a workaround for a Parcel issue, might become obsolete soon.

## End result

Okay, now we have everything in place, let's give it a go:

```
➤ parcel index.html
Server running at http://localhost:1234 
Success! Compiled 1 module.                                          
Success! Compiled 1 module.                                          
✨  Built in 2.23s.
^C

➤ parcel index.html
Server running at http://localhost:1234 
✨  Built in 724ms.
^C
```

Less than 3 seconds without cache, less than a second with cache, hot reload works as expected. What is more important however is that **I didn't have to edit any configuration files**.


## Conclusion

I have to say I'm really impressed with Parcel so far. Its getting started guide is quite short, but it still allowed me to achieve what I wanted without getting confused or stuck even once. I think this might just be the beginning of a beautiful friendship...