Convert to Parcel (#26)

milesfrain 3 years ago committed by GitHub
parent 450e0bf27e
commit 9858165d57
No known key found for this signature in database

.gitignore vendored

@ -1,14 +1,13 @@

@ -1,17 +1,32 @@
# Halogen Template
This is a template for starting a fresh project with the [Halogen]( library for writing declarative, type-safe user interfaces.
### Quick Start
git clone halogen-project
cd halogen-project
npm install
npm run build
npm run serve
### Introduction
This is a template for starting a fresh project with the [Halogen]( library for writing declarative, type-safe user interfaces.
You can learn more about Halogen with these resources:
- The [Halogen documentation](, which includes a quick start guide and a concepts reference.
- The [Learn Halogen]( learning repository.
- The [Real World Halogen]( application and guide.
- The [Real World Halogen]( application and guide. Note that the published article is written for the older halogen v4, but the code and comments cover the current halogen v5.
- The [API documentation]( on Pursuit
You can chat with other Halogen users on the [PureScript Discourse](, or join the [Functional Programming Slack]( ([invite link]( in the `#purescript` and `#purescript-beginners` channels.
## Getting started
If you notice any problems with the below setup instructions, or have suggestions on how to make the new-user experience any smoother, please create an issue or pull-request.
Compatible with PureScript compiler 13.x
### Initial Setup
**Prerequisites:** This template assumes you already have Git and Node.js installed with `npm` somewhere on your path.
@ -22,15 +37,19 @@ git clone
cd halogen-project
Then, install the PureScript compiler, the [Spago]( package manager and build tool, and [Webpack]( bundler locally:
Then, install the PureScript compiler, the [Spago]( package manager and build tool, and the [Parcel]( bundler. You may either install PureScript tooling _globally_, to reduce duplicated `node_modules` across projects, or _locally_, so that each project uses specific versions of the tools.
npm install
To install the toolchain globally:
npm install -g purescript spago parcel
This will automatically trigger Spago to install the PureScript library dependencies for this project.
To install the toolchain locally (reads `devDependencies` from `package.json`):
npm install
## Building
### Building
You can now build the PureScript source code with:
@ -39,19 +58,34 @@ You can now build the PureScript source code with:
npm run build
You can produce a bundled JS file you can run in the browser with:
### Launching the App
You can launch your app in the browser with:
# An alias for `spago bundle-app --to dist/app.js`
npm run bundle
# An alias for `parcel dev/index.html --out-dir dev-dist --open`
npm run serve
This deposits a bundled JS file named `app.js` in the `dist` directory. You can view your running Halogen app by opening the `dist/index.html` file.
### Development Cycle
If you're using an [editor]( that supports [`purs ide`]( or are running [`pscid`](, you simply need to keep the previous `npm run serve` command running in a terminal. Any save to a file will trigger an incremental recompilation, rebundle, and web page refresh, so you can immediately see your changes.
If your workflow does not support automatic recompilation, then you will need to manually re-run `npm run build`. Even with automatic recompilation, a manual rebuild is occasionally required, such as when you add, remove, or modify module names, or notice any other unexpected behavior.
### Production
When you are ready to create a minified bundle for deployment, run the following command:
npm run build-prod
Alternatively, if you use an editor that supports `purs ide` or if you are running [`pscid`](, then you can get near-instant builds of the app while you work:
Parcel output appears in the `./dist/` directory.
You can test the production output locally with a tool like [`http-server`]( It seems that `parcel` should also be able to accomplish this, but it unfortunately will only serve development builds locally.
npm run bundle:watch
npm install -g http-server
http-server dist -o
:warning: `purs ide` only rebuilds one module at a time, so sometimes the bundle will end up in an inconsistent state, resulting in runtime errors. This occurs when a change is made in one module that breaks other modules that depend on it. The solution is to run a full build when a change like this is made, as the compiler will force you to resolve those errors.
If everything looks good, you can then upload the contents of `dist` to your preferred static hosting service.

@ -0,0 +1,10 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Halogen5 Template</title>
<script src="./index.js"></script>

@ -0,0 +1 @@

dist/index.html vendored

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html xmlns="">
<meta charset="utf-8" />
<title>My Halogen App</title>
<script src="app.js"></script>

@ -1 +0,0 @@

@ -1,16 +1,13 @@
"private": true,
"scripts": {
"test": "spago test",
"build": "spago build",
"bundle": "spago bundle-app --to dist/app.js",
"bundle:watch": "webpack --mode=development --entry ./entry.js --output-path ./dist --output-filename app.js --progress --watch"
"devDependencies": {
"parcel": "^1.12.4",
"purescript": "^0.13.8",
"purescript-psa": "^0.7.3",
"spago": "^0.15.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
"spago": "^0.15.3"
"scripts": {
"build": "spago build",
"serve": "parcel dev/index.html --open",
"build-prod": "mkdir -p prod && cp dev/index.html prod/ && rm -rf dist && spago bundle-app --to prod/index.js && parcel build prod/index.html"

@ -118,7 +118,7 @@ let additions =
let upstream = sha256:9c1e8951e721b79de1de551f31ecb5a339e82bbd43300eb5ccfb1bf8cf7bbd62 sha256:5d0cfad9408c84db0a3fdcea2d708f9ed8f64297e164dc57a7cf6328706df93a
let overrides = {=}

@ -1,5 +1,5 @@
{ name = "halogen-project"
, dependencies = [ "halogen", "psci-support" ]
, dependencies = [ "console", "effect", "halogen", "psci-support" ]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ]