elm-create-spadeprecated

An utility to generate an Elm SPA skeleton.

Usage no npm install needed!

<script type="module">
  import elmCreateSpa from 'https://cdn.skypack.dev/elm-create-spa';
</script>

README

elm-create-spa

This is a modest attempt at providing a simplistic yet opinionated Elm SPA application skeleton based on rtfeldman's Elm Example SPA, for Allo-Media's own needs.

demo

Check for yourself

Features

  • Multiple pages navigation & routing
  • Page framing
  • Flags
  • Session
  • SCSS styling integration
  • Minified build
  • Development server with hot reloading
  • Sample HTTP request
  • Default test layout

Code organization

The application stores Elm source code in the src directory:

src
├── Data
│   ├── Counter.elm
│   ├── Date.elm
│   └── Session.elm
├── Page
│   ├── Counter.elm
│   ├── CurrentTime.elm
│   └── Home.elm
├── Request
│   └── Github.elm
├── Views
│   └── Page.elm
├── Main.elm
└── Route.elm

Rtfeldman explains this organization in a dedicated blog post.

SCSS stylesheets are stored within the style folder (freely inspired by SMACSS):

style
├── base
│   ├── _base.scss
│   └── _variables.scss
├── modules
│   ├── _module-counter.scss
│   ├── _module-header.scss
│   └── _module-page-content.scss
└── main.scss

Installation

$ npm install -g elm-create-spa
$ elm-create-app my-app
$ cd my-app
$ npm install

Usage

To start the development server:

$ npm start

This will serve and recompile Elm and SCSS code when source files change. Served application is available at localhost:3000.

Tests

$ npm test

Tests are located in the tests folder and are powered by elm-test.

Build

$ npm run build

The resulting build is available in the build folder.

Deploy

A convenient deploy command is provided to publish code on Github Pages.

$ npm run deploy

License

MIT