Setting up a Halogen project

Purescript Halogen

Ensure you have Spago installed. Spago is a build and package management tool for Purescript. (There are other options - Spago is the best.)

Then create a directory for your project (here I am calling it simple-project) and initialise Spago.

In the command line :

➜   mkdir simple-page
➜   cd simple-page
➜   spago init
Initializing a sample project or migrating an existing one..
Upgrading the package set version to "psc-0.13.3-20190831"
Package-set upgraded to latest tag "psc-0.13.3-20190831"
Fetching the new one and generating hashes.. (this might take some time)
Generating new hashes for the package set file so it will be cached.. (this might take some time)
Set up a local Spago project.
Try running `spago build`
➜ 

We want to install the Halogen library.

➜  spago install halogen
Installing 71 dependencies.
Searching for packages cache metadata..
Unable to find packages cache metadata, downloading from GitHub..
...
Installing "unsafe-reference"
Installation complete.
➜

Next we need a simple html page. Create this index.html file in the root project of our project :

<!doctype html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Purescript is amazing</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="dist/ps.js" ></script>
  </body>
</html>

It simply provides a div that will act as a container for our component and loads the compiled javascript.

We are ready to bundle our project using Spago. If we pass the --watch flag to Spago it will recompile and build the project on every save. We will direct our built Javascript to ./dist/ps.js

➜  spago bundle-app --watch -t ./dist/ps.js
Installation complete.
Build succeeded.