highmountaintea / create-mithril-app

Sets up a mithril.js project with webpack

create-mithril-app - Sets up a mithril.js project with webpack

Creates a mithril.js project for you.

Usage

First install this app with npm i -g create-mithril-app@latest, then type the following:

create-mithril-app <directory>
cd <directory>
npm install
npm run dev

This would create a mithril.js project in the directory specified, install the appopriate modules, and run the skeleton app on port 8020. Open your browser to http://localhost:8020 and you should see a Hello World !! screen.

This mithril.js project is set up with webpack-dev-server, so when you start editing the project with your favorite code editor, your browser would reflect the changes instantly.

Note create-mithril-app can also be run using npx

Purpose

I feel mithril.js can benefit from a battery-included tool to set up a project. This tool creates a project with the following:

• webpack-dev-server configured with live reload
• webpack configured with babel
• build pipeline already set up
• a sample Hello World app to kick start

Hopefully this can lower the barrier for new developers to try out mithril, and simplify the mundane task of creating a new project for seasoned developers.

Project structure

• client - the directory for source JS files
• public - the directory for static files (html, css etc.)
• webpack.dev.js - used by webpack-dev-server when running in dev mode
• webpack.build.js - used by webpack to build the production files
• package.json - modify this file to configure the name and license of your app

Configuration

The created project comes with two webpack files, one for development, one for build. They can be configured further to suit your needs. Please be aware we cannot support all these different configurations

Build

npm run build would create the deployable files in the build directory.

Server-side API

create-mithril-app is designed for developing client side applications that access APIs remotely. It can easily integrate with a backend server too. Please see Server setup for the sample API server that comes with this app.

Release Logs

• 2.0.1 - now uses mithril v2
• 1.0.25 - now supports creating a new app into an empty directory
• 1.0.24 - updated to webpack 4
• 1.0.21 - fixed path not found issue under Linux
• 1.0.14 - now can inject environment variables via .env, .env.development, and .env.production
• 1.0.11 - fixed async/await bug
• 1.0.9 - Added create-mithril-server
• 1.0.6 - Added Babel to dev server, and supports spread operator.
• 1.0.5 - Fixed breakpoint debugging in dev mode
• 1.0.3 - Build files are now minified by default, and build pipeline is configurable.
• 1.0.0 - Bumped to 1.0.0 after going through more field testing.
• 0.2.4 - Fully working and supporting dev and build pipeline.

Special Thanks

To mithril.js team for building such an interesting framework. To create-react-app for the inspiration.

create-mithril-app's Issues

/usr/bin/env: ‘node\r’: No such file or directory

I am on linux, and i use yarn to install it.
$ yarn global add create-mithril-app
It is installed in:

~/.config/yarn/global/node_modules/create-mithril-app
├── deployapi.js
├── index.js
├── node_modules
├── package.json
├── README.md
├── roadmap.md
├── sampleAPI
│   ├── index.js
│   └── package.json
├── sampleApp
│   ├── client
│   │   ├── index.js
│   │   ├── MainView.js
│   │   └── model.js
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── favicon.png
│   │   └── index.html
│   ├── README.md
│   ├── webpack.build.js
│   └── webpack.dev.js
├── server-setup.md
└── test
    └── deployapi.js

testing i got

~$ create-mithril-app test1
/usr/bin/env: ‘node\r’: No such file or directory

I fixed index.js following the issue #58 in darkguy2008/parallelshell
then i test again and...

~$ create-mithril-app test1
{ Error: ENOENT: no such file or directory, lstat '~/.config/yarn/global/node_modules/.bin/sampleApp'
  errno: -2,
  code: 'ENOENT',
  syscall: 'lstat',
  path: '~/.config/yarn/global/node_modules/.bin/sampleApp' }
Unable to copy sampleApp into newly created directory.

I tried doing a symbolic link but it doesn't work.

~/.config/yarn/global/node_modules/.bin$ ln -s ../create-mithril-app/sampleApp sampleApp
~$ create-mithril-app test1
{ Error: EEXIST: file already exists, symlink '../create-mithril-app/sampleApp' -> '~/test1'
  errno: -17,
  code: 'EEXIST',
  syscall: 'symlink',
  path: '../create-mithril-app/sampleApp',
  dest: '~/test1' }
Unable to copy sampleApp into newly created directory.

I have replaced absolute path with "~/" to be brief.

Feature requests (Rollup)

Really this is not a feature request, is a recommendation (second order) to bear in mind Rollup.
As a beginner this tool (CMA) is appreciated, and learning JS ecosystem is a little confusing, so i try to standing on the shoulders of giants. It is a suggestion based on these 4 interviews by @CarlMungazi, where 3 of them (@barneycarroll @tivac @orbitbot) use rollup, and the other (@porsager) has not delivered an opinion on them.

I also recommend this article, where he argues that rollup is simpler and as powerful as webpack after the last updates (code splitting).

Rollup seems to have Mithril's philosophy, simple and effective.

PD: i did not find a way to contact you.