# Welcome to Your New Project

This project pulls together [Webpack](https://webpack.js.org/) and [Cordova](http://cordova.apache.org/docs/en/latest/index.html)
to provide the ability to build [Elm](http://elm-lang.org/) single-page apps (SPAs) with out-of-the-box optimization for
production and Sass support.

# Development on this New Project

## Basic Process

This project follows [Scripts to Rule Them All](https://githubengineering.com/scripts-to-rule-them-all/), with the files living under
`./script`. If you don't live on the command line or otherwise support Scripts to Rule Them All, then you can consider those scripts
as executable documentation.

To get started, do the following:

1. Clone this repository.
1. Add your assets to `./src/assets`.
1. Customize your `./package.json` and `./config.xml` for your project
1. Put your splash screen template in at `./splash.png`. The splash screen template image should be 2208px square with a center square of 1200px. Everything between the center square and the edge of the image may be cut off, depending on resolution/aspect ratio of the screen.
1. Put your app icon template template in at `./icon.png`. The icon should be 1240px square.
1. Run `./script/setup` to get everything to a good initial state
1. Run `./script/server` to run the browser version of the app

When you pull from upstream, do the following:

1. Run `./script/update` to update your state
1. Run `./script/server` to run the browser version of the app and resume development
1. If something is wrong and you can't figure out what, try running `./script/setup` to reset the state back to the initial state

## Organizational Structure

Unlike traditional Cordova projects, the `./www` directory is to be considered a product of the build process. You're welcome to put
assets there, but Webpack will treat that directory as a destination, not a source: nothing in the `./www` directory is read by Webpack,
but only written to. All the contents that Webpak will consume is under `./src`. In particular, the Elm code goes into `./src/elm`, and
Sass code goes into `./src/scss` (`.css` files in this directory are treated as `.scss` as far as Webpack is concerned).

Every file in `./src/assets` that starts with a word character is compiled into a map and made available in your Elm code via the
`assets` field of the `GlobalState`. This means that you need to be careful: all of those files will be included and used,
even if they are never used. (Dead code elimination could conceivably help you, but it's almost certainly not going to help.
Sorry.) The `assets` field of `GlobalState` is an Elm `Dict` whose keys are the file names. The file names are provided
relative to `./src/assets`, without any leading prefix, so `./src/assets/foo/bar.png` is `foo/bar.png`.
The values in that dictionary are the result of requiring the file.
It is the user's responsibility to ensure that the file compiles to a `String`, usually a URL provided through WebPack's
`file-loader` or `url-loader`.