Nikola Margit

moon indicating dark mode
sun indicating light mode

How to Easily Setup Mithril.js Project

January 03, 2020

Mithril.js is a client-side JavaScript framework for building single page applications. It’s extremely small, only 9.5kb gzip, but despite that, it comes with built-in modules for routing and XHR.

The Mithril project provides great documentation. You should make sure to check it out. You’ll probably notice that there is no mention of a starter template to rapidly start a project. It recommends starting by importing Mithril.js from CDN. While that’s an OK solution for working through a tutorial, it’s not something we need to launch a new full-fledged project with Mithril.js.

If you ever used React, then you probably heard of create-react-app, a great tool that enables us to create React apps with no build configuration. Luckily, there is a similar tool for Mithril, called create-mithril-app, and like CRA, it is easy to use.

I will assume that you have newer versions of Node.js and npm installed on your machine.

npx create-mithril-app my-new-app
cd my-new-app
npm i
npm run dev

Note: I’m using npx command to ensure I’m getting the latest version of create-mithril-app and to avoid installing the tool globally. If you want to learn more about npx, check out this great article by Kat Marchán.

This will create a new project in my-new-app folder, install all the necessary dependencies, and start webpack-dev-server. If you open the browser to http://localhost:8020, you should see a Hello World screen.

Set up Mithril.js app

Great, you have a new Mithril.js project set up, now go build something great!