Installation
You can install elm-spa via npm:
npm install -g elm-spa@latest
Now, you can run elm-spa from the terminal!
Hello, CLI
If you're ever stuck- run elm-spa help, the CLI comes with built-in documentation!
elm-spa help
elm-spa – version 5.0.0
elm-spa init – create a new project
elm-spa add – add a new page
elm-spa build – generate routes and pages automatically
elm-spa version – print version number
elm-spa init
The init command scaffolds a new elm-spa project.
elm-spa init
When you run the command, you will be presented with an interactive dialogue to choose between:
Each project works and behaves the same way, but elm.json, Spa.Document, and the Shared.view are updated to use the UI library of your choice.
elm-spa add
You can add more pages to an existing elm-spa project with the elm-spa add command.
elm-spa add
Just like the last command, an interactive dialogue will ask you two things:
- The type of page (static, sandbox, element, or application)
- The page's module name
The meaning of each of the page types will be explained in the Pages section!
Note: Running the elm-spa add command will overwrite the contents of the existing file, so don't use it for upgrading an existing page.
elm-spa build
This command does the automatic code generation for you. If you follow the naming conventions outlined in the next section, this is where elm-spa saves you time!
elm-spa build
The generated code is in the src/Spa/Generated folder! Feel free to take a look, it's human readable Elm code!
No need to call this! The project created by elm-spa init actually calls this under the hood.
Just use npm start, and you're good!
Next, let's talk about the Routing!