Mithril Starter Project with Rollup, Babel, LiveReload, Jest and ESLint


Project setup with: * Mithril 1.x * Rollup for optimized module bundles * Babel for transpiling es2015 to es5 * LiveReload to view code changes directly in the browser * Jest to run BDD tests and create component snapshots * ESLint to find syntax errors and get a standardized coding style

A couple of styles are included using Tachyon, but these can simply be replaced with your own CSS solution.


Install dependencies

npm install

Build and watch

Script commands defined in package.json:

  • build: creates a minified bundle in build/js/
  • watch: starts a local webserver; creates a bundle in build/js/ that is being updated with each code change; calls LiveReload to refresh the browser after code changes are built

Call npm run watch and open a web page at localhost:8080. The port number is set by environment variable PORT in package.json.

When making changes, the terminal will show lint errors, if any.


See mithril-jest for a short overview of Jest.

  • npm run test: starts a test run (only useful to know if tests are passing)
  • npm run test:watch: starts an interactive session with the option to evaluate and update existing snapshots

To run tests alongside the watch command, use a separate terminal window.

Configuration files

scripts contains a couple of Rollup configuration files. The scripts use rollup.base.js as base configuration.

FYI, the base configuration: * Exports createConfig({ includeDepencies }) * Reads package.json to read package dependencies. If includeDepencies is true, it will include those dependencies in the build file * Creates global package names; and sets global m for package “mithril”.

Bundler configuration

  • Builds an ES2015 module with syntax features that node supports; see: jsnext:main
  • rollup.umd.js: Builds a UMD bundle
  • Builds a UMD bundle that is updated with each file change

Environment variables:

  • DEPS (Number 0 or 1): include dependencies
  • WATCH_DIR (String): sets the watch directory when running the watch script
  • PORT (Number): sets the http server port when running the watch script

Other configuration files: * .babelrc: Babel configuration * .eslintrc: ESLint configuration

Known issues

Upstream issue with wrong import when using watch


When a wrong import is written, for instance:

import page from '../page';

instead of:

import page from './page';

rollup-plugin-node-resolve bails and stalls the watch.

Solution: use npm run build until you no longer see import errors. Then continue using npm run watch.



Related Repositories



Mithril Starter Project with Rollup, Babel, LiveReload, Jest and ESLint ...