# 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](https://webpack.js.org/).  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](https://hammerjs.github.io/) for touch events
* [Google Analytics](https://github.com/danwilson/google-analytics-plugin/)
* [Bootstrap 4](https://getbootstrap.com/)
* [Scripts to Rule Them All](https://githubengineering.com/scripts-to-rule-them-all/)
* Webpack, including integrated Babel
* Elm itself, of course
* [Elm-UI](http://elm-ui.info)
* [Elm-Install](https://github.com/gdotdesign/elm-github-install)
* Main/Routes/Pages structure within Elm
* [Autoprefixer](https://github.com/postcss/autoprefixer#autoprefixer-) and [Babel env preset](https://github.com/babel/babel-preset-env#how-it-works) 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](http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html)
* [Font-Awesome](http://fontawesome.io)

### Future

* Integrating Hotswapping/HMR/Elm Reactor/etc. to speed up development
* See [the "Enhancement" issues](https://github.com/BeeWell/cordova-webpack-elm-template/issues?q=is%3Aopen+is%3Aissue+label%3Aenhancement).

# 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:
```javascript
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.
```javascript
...
"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](https://github.com/apache/cordova-template-reference), which was released under
the [Apache License 2.0](https://github.com/apache/cordova-template-reference/blob/7dc751c01ce6f059738fef775a237f6d280a9349/LICENSE) 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](http://aiconica.net/festive) and is released under the CC0 to the best of my knowledge.