cordova-elm-template-jumpstart
Version:
Cordova template to jumpstart development using Elm and Webpack
91 lines (70 loc) • 4.36 kB
Markdown
# 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.