Spago: From Start to Finish

The below example uses spago as the build tool and dependency manager.

Create the project

# 1. Sets up the initial files and structure of the project
spago init

If you need to override/add packages to the standard package set, proceed to Configure the Package Set. Otherwise, continue to Install Dependencies

Configure the Package Set

# 2a) Open the below file, read its top-level comment,
#       and follow its instructions to override/add packages
nano packages.dhall

# 2b) When finished, either verify that a single patched/added package
#       works with the rest of the set...
spago verify singlePackageName
#       or re-verify the entire package set
spago verify-set

Freeze the Package Set

Note: Spago does this automatically now. So, one likely does not need to do this anymore. It is provided for context / historical purposes.

# 3) Freeze the package set to prevent security issues.
#     For a deeper explanation on what happens here,
#     see Dhall's safety guarantees wiki page:
spago freeze

Install Dependencies

One of two ways

# Install a package from the package set to your project
spago install packageName1 packageName2 # ...

Write the Code

# Open the REPL to play with a few ideas or run simple tests
spago repl

# Build the docs
spago docs --open

# Automatically re-build project whenever a source/test file is changed/saved
# and clear the screen before rebuilding
spago build --watch --clear-screen

Build the Code

# Install all dependencies (if not done so already) and
# compile the code
spago build

# Build a developer-level executable file
spago bundle-app --main Module.Path.To.Main --to dist/index.js
node dist/index.js

# Build a production-level Node-backend file via Parcel
spago bundle-app --main Module.Path.To.Main --to dist/bundle-output.js
parcel build dist/bundle-output.js --target "node" -o app.js

To build a production-level browser-backend file...

# Build a production-level browser-backend file
spago bundle-app --main Module.Path.To.Main --to dist/app.js

Create an HTML file (dist/example.html) that references the 'app.js' file

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <!-- Insert your title here -->
    <title>Some Title</title>
    <!-- Reference the outputted bundle here -->
    <script src="/app.js" charset="utf-8"></script>

Then use parcel to do minification and open the resulting web page

parcel build dist/example.html --target "browser" -o index.html --open
# it'll create a few files in the `dist/` folder and open the resulting
# "dist/index.html" file via your default web browser