UNPKG

cordova-elm-template-jumpstart

Version:

Cordova template to jumpstart development using Elm and Webpack

91 lines (70 loc) 4.36 kB
# 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.