Purescript with hot reloading using Parcel
Tags: purescript, hotreloading, parcel
Published: 2019-03-31 03:37:34

---
title: Purescript with hot reloading using Parcel
published: true
description: A pretty easy and straightforward way of setting up hot reloading for Purescript using pulp and Parcel.
tags: Purescript, Hot reloading, parcel
---

## The "why"

As such you may have noticed, Parcel does not support Purescript. Meaning that we would not be able to simply say

```html
<script src="src/Main.purs"></script>
```

and have it up and running. Another thing being that the recommended build tool for Purescript supports some cool stuff such as

```shell
pulp browserify
```

(though I really haven't seen this sort of thing with any other build tool) and

```shell
pulp server
```

which starts a server that rebuilds the JS output for any change in the source.

However, there is no hot reloading in the browser. You would still have to do a manual refresh. I feel that's kind of a drag when you are developing, and since it is not impossible to setup hot reloading, far from it, it's super easy now thanks to Parcel (since we don't even have to configure Webpack! 🎉) I believe it might not be too farfetched to go for this option.

Anyway, let's get down to the details.

## Some prerequisites

### Get `pulp`

I'm guessing that you have set up a Purescript project using the recommended approach. If not, [knock yourselves out](https://github.com/purescript/documentation/blob/master/guides/Getting-Started.md).

### Create a `package.json`

Make sure you have a `package.json` file in your project root. You may create one manually or answer a few questions on the way to set up one using the

```shell
npm init
```

command.

### Need some `npm` dependencies as well

Namely,

1. `concurrently`
2. `parcel-bundler`

You could simply run,

```shell
npm i -D concurrently parcel-bundler
```

### And lastly, an `index.html` file

In my case, among the _numerous_ plugins that I've installed for VSCode (or maybe even VSCode supports this natively) I have a shortcut to a code snippet that essentially generates a boilerplate HTML. You could check if you have it as well by typing a `!` in a `HTML` file.

![html snippet](https://thepracticaldev.s3.amazonaws.com/i/rmofh54jzyidbgu6vaxc.png)

In any case, here it is:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
```

## Great! Y'er doin' it

You only have to make two changes now.

### Change #1

In the `package.json` file set up the script that would make it easier to start the development server.

Simply add this to the `scripts` section:

```json
"start": "concurrently \"pulp --watch build --to ./output/app.js\" \"parcel index.html\""
```

### Change #2

Now to close the loop in order for Parcel to pick up the emitted `app.js`.

Add this to the `head` section of the `index.html`:

```html
<script src="output/app.js"></script>
```

And that's it! We're done! 🎊

## Running it

Just run

```shell
npm start
```

and that should be enough.

## Setting up a build script

Alternatively, you may even set up a build script to use when your project is completed.

Add this to the `scripts` section in your `package.json`:

```json
"build": "pulp build --to ./output/app.js && parcel build index.html"
```

Cheers! 🍻