git clone https://github.com/purescript-halogen/purescript-halogen-template.git halogen-project cd halogen-project npm install npm run build npm run serve
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. 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
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
Prerequisites: This template assumes you already have Git and Node.js installed with
npm somewhere on your path.
First, clone the repository and step into it:
git clone https://github.com/purescript-halogen/purescript-halogen-template.git halogen-project cd halogen-project
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.
To install the toolchain globally:
npm install -g purescript spago parcel
To install the toolchain locally (reads
You can now build the PureScript source code with:
# An alias for `spago build` npm run build
Launching the App
You can launch your app in the browser with:
# An alias for `parcel dev/index.html --out-dir dev-dist --open` npm run serve
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.
When you are ready to create a minified bundle for deployment, run the following command:
npm run build-prod
Parcel output appears in the
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 install -g http-server http-server dist -o
If everything looks good, you can then upload the contents of
dist to your preferred static hosting service.