mithril-boilerplate

Well structured boilerplate code for quickly starting new Mithril.js projects

Quick start

Make sure you have node and npm installed. Then

npm install -g bower gulp http-server

git clone https://github.com/ng-vu/mithril-boilerplate.git
cd mithril-boilerplate

npm install
bower install
gulp compile

http-server build/public

Running above commands compile source and put final code in these directories:

• build for development
• bin for production

You may run the application by either of these commands:

• http-server build/public
• http-server bin/public

To automatically build project whenever a source file changes:

gulp build watch

Features

• Gulpfile
• Bower
• LESS & Bootstrap (easy to swap with your favourite tools)
• JSX (write HTML tags inside .jsx file)
• INCLUDE() JavaScript files
• Client side modules wrapped in CommonJs
• Watch with cache (only rebuild changed files)
• LiveReload
• Concat and minify stylesheets and scripts for production
• Unit testing will be supported soon

Commands

gulp clean

Clean all files in build and bin directory.

gulp build

Build the project and put files in build. You may run the application by:

gulp build
http-server build/public

gulp compile

Build the project and put files in bin. All stylesheets are concatenated to main-***.css and all scripts are combined to main-***.css with *** is content hash. You may run the application by:

gulp compile
http-server bin/public

gulp watch

Automatically build the project whenever a source file changes. It caches source files and only runs tasks on changed files. You should use watch together with build:

gulp build watch

Running a specific task

These tasks describe specific steps in building process:

• gulp buildAppStyles
• gulp buildVendorStyles
• gulp buildAppScriptsInject
• gulp buildAppScriptsMsx
• gulp buildAppScripts
• gulp buildVendorScripts
• gulp buildAppAssets
• gulp buildVendorAssets
• gulp buildIndexHtml
• gulp buildRootFiles
• gulp compileStyles
• gulp compileScripts
• gulp compileAssets
• gulp compileRootFiles
• gulp compileIndexHtml

// TODO

• Unit testing
• Sample project
• Coffee script

Note

• Source files must be .jsx, not .js.

  You should always write source in .jsx files. All .js files will be ignored by default.

  JSX is basically JavaScript enhanced with HTML tags. Mithril JSX compiler is based on React JSX. Read more: Mithril Tools, React JSX

• Each .jsx file inside src/app without _ prefix will become a module.

  For example, src/app/app.jsx is compiled to module app and src/app/home/home.jsx to home/home.

  Files with _ prefix are used to be included into other files and will not become a module.

• A module can be required by require(<module-id>).

  For example, require('app') or require('home/home').

• Main module is main (src/app/main.jsx).

  Note that if a module is not required (directly or indirectly) by main, its code will not run.

• Include file by INCLUDE('<file-id>').

  For example INCLUDE('home/view') will replace the INCLUDE call with whole content of src/app/home/_home.view.jsx. Note that home/_home.view.jsx will be translated to home/home.view.