Skip to content
Statically render html from Elm!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore
LICENSE
README.md
index.js
package.json
templates.js

README.md

elm-static-html

Turn an Elm app into a static HTML site.

Your modules must look like this:

module Main exposing (..)

import Html
import Html.Attributes exposing (class, href)

view : Html.Html msg
view =
    Html.div []
        [ Html.h1 [ class "hello" ] [ Html.text "new!" ]
        , Html.a [ href "/login" ] [ Html.text "Login" ]
        , Html.text "hello"
        ]

then you can use

elm-static-html --filename Main.elm --output index.html

which will produce

<div><h1 class="hello">new!</h1><a href="/login">Login</a>hello</div>

Flags

elm-static-html -f Main.elm will print the output to stdout by default You can create an initial config file through elm-static-html --init-config, though it's not needed to work.

You can use the config file to generate multiple files through elm-static-html -c elm-static-html.json. The config file looks like this:

{
    "files": {
        "<ElmFile.elm>": {
            "output": "<OutputFile.html>",
            "viewFunction": "view"
        },
        "<AnotherElmFile.elm": {
            "output": "<AnotherOutputFile.html>",
            "viewFunction": "someViewFunc"
        }
        /* ... */
    }
}

To generate multiple output files from a single elm file, supply an array of outputFile/viewFunction pairs:

{
	"files": {
		"<ElmFile.elm>": [{
			"output": "<OutputFile.html>",
			"viewFunction": "view"
		}, {
			"output": "<AnotherOutputFile.html>",
			"viewFunction": "anotherView"
		}]
	}
}

Notes

An .elm-static-html folder is created in order to generate the correct HTML and JS needed. You can delete it if you want, but it'll make builds a little slower.

You can’t perform that action at this time.