Cordova Jumpstart for an Elm SPA (Single-Page Application) using Webpack

This is not just a template for Webpack -- it's a jumpstart, with a lot of pre-integrated functionality. Most fundamentally, this template will provide the wiring for Cordova to use Elm via Webpack. The result of the Webpack build is a single-page application that Cordova will execute.

Usage

Use this template to jumpstart your Cordova project. To do so, specify it at project creation time like this:

$ cordova create hello com.example.hello HelloWorld --template cordova-elm-template-jumpstart

Then go into your new project and read the README.md that is installed there.

Out-of-the-Box Functionality

Current

• Auto-rebuilding when running the Cordova Browser implementation.
• Assets processed by Webpack and available to the Elm application
• Hammer.js for touch events
• Google Analytics
• Bootstrap 4
• Scripts to Rule Them All
• Webpack, including integrated Babel
• Elm itself, of course
• Elm-UI
• Elm-Install
• Main/Routes/Pages structure within Elm
• Autoprefixer and Babel env preset pre-configured to support 90% of browsers in the US. (These browser support settings can be tuned in your project's package.json.)
• UglifyJS "Harmony" (ES8) Compiler, console/debug scrubbing, Babel-Minify, and image optimizations applied only in non-dev environments
• Automatic favicon, app icon, and splash screen image generation from provided templates
• Cordova Splashscreen
• Font-Awesome

Future

• Integrating Hotswapping/HMR/Elm Reactor/etc. to speed up development
• See the "Enhancement" issues.

Generic Cordova Template Details

Structure of the template

template_package
├── package.json (for your template package to be published on npm)
├──	index.js
└── template_src (contains template files)
    ├── package.json
	├── config.xml
	└── (files and folders that make up the template)

Outside of template_src

All files outside of template_src are used to define parameters about the template. These files are not copied over at creation, so feel free to add a README or any other files outside of template_src.

index.js points to where the template exists. You'll see that index.js usually looks like:

var path = require('path');

module.exports = {
    dirname : path.join(__dirname, 'template_src')
};

package.json tells you about the template. It is necessary state that "main": "index.js" so that the reference to the template source in index.js is propagated. All templates should contain the keyword "cordova:template" so that the template is searchable on npm.

...
"main": "index.js",
...
"keywords": [
"cordova:template"
...

Inside of template_src

All files inside of template_src compose the template from which a user would desire in order to create their project. Everything in this folder is copied over to the created project.

(The package.json in template_src should be filled with information that describes the project that would be created from the template.)

License Note

This is forked from the Apache Cordova Template Reference, which was released under the Apache License 2.0 as of the time of the fork. Use of the upstream code or its derivatives may be subject to that license.

The image used for ./template_src/splash.png, ./template_src/icon.png, and ./template_src/src/assets/example.png is from Aiconica.net and is released under the CC0 to the best of my knowledge.