elm-spa/docs/public/content/guide.md

Guide

Welcome to elm-spa, a framework for building web applications with Elm! If you are new to Elm, you should check out the official guide, which is a great introduction to the language.

The goal of this guide is to help you solve any problems you might run into when building real world single-page web applications.

Features

Here are some of the benefits for using elm-spa:

1. Automatic routing - routes for your web app are automatically generated based on file names. No need to maintain URL routing logic or wire pages together manually.
2. User authentication - provides an easy way to guarantee certain pages are only visible to signed-in users. You can check out the user authentication example for more details!
3. Zero configuration - Includes a hot-reloading dev server, build tool, and everything you need in one CLI tool! No need for webpack, uglify, or other NPM packages.

Quickstart

If you already have NodeJS installed, getting started with elm-spa is easy:

npx elm-spa new

This will create a new project in the current folder. Even better: this command only creates three files:

elm.json               # project dependencies
src/Pages/Home_.elm    # our homepage
public/index.html      # entrypoint to your application

Let's use elm-spa to spin up a dev server:

npx elm-spa server

If you see "Hello, world!" at http://localhost:1234, you did it!

Installation

So far, we've been using npx so we can run elm-spa directly from the command line. If you'd like to run commands from the terminal without the npx prefix, you can install elm-spa like this:

npm install -g elm-spa@latest

To verify the install succeeded, run elm-spa help from your terminal:

elm-spa help

elm-spa – version 6.0.0

Commands:
elm-spa new . . . . . . . . .  create a new project
elm-spa add <url> . . . . . . . . create a new page
elm-spa build . . . . . . one-time production build
elm-spa server  . . . . . . start a live dev server

Other commands:
elm-spa gen . . . . generates code without elm make
elm-spa watch . . . .  runs elm-spa gen as you code

Visit https://elm-spa.dev for more!

That output means you can run the elm-spa CLI without needing npx

---

Next up: The CLI