complete overhaul

LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Greg Holguin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,2 +1,26 @@
-# Vue-cli
-A temporary testing branch to implement [vue-cli](https://github.com/vuejs/vue-cli) support with scaffolding options. Configurations will include enabling ESLint, which Vue plugins to install, and more.
+[![](docs/logo.png)](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html)
+
+> The boilerplate for making electron apps built with vue (pretty much what it sounds like).
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/makes-people-smile.svg)](http://forthebadge.com)
+
+## Overview
+The aim of this project is to remove the need to setup electron apps using vue. Since vue can take advantage of module loaders like webpack, getting everything to play nicely can be a little tricky.
+
+**Check out the documentation [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).**
+
+Things you'll find in this boilerplate...
+  * Basic project structure
+  * Ready to use Vue plugins ([vue-electron](https://github.com/SimulatedGREG/vue-electron),  [vue-resource](https://github.com/vuejs/vue-resource), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex))
+  * Installed [vuejs/vue-devtools](https://github.com/vuejs/vue-devtools) and [electron/devtron](https://github.com/electron/devtron) tools for development
+  * Ability to easily create builds of your electron app using [electron-userland/electron-packager](https://github.com/electron-userland/electron-packager)
+  * Handy NPM scripts
+  * Use of webpack and [vue-loader](https://github.com/vuejs/vue-loader) for Hot Module Replacement
+  * CSS/JS pre-processor support with [vuejs/vue-loader](https://github.com/vuejs/vue-loader/)
+  * ES6 by default
+  * ESLint (extends 'standard')
+
+### Contributing
+Wanting to submit a pull request? Make sure to read [this](docs/contributing.md) first.

SUMMARY.md

@@ -0,0 +1,17 @@
+# Summary
+
+* [Introduction](README.md)
+* [Getting Started](docs/getting_started.md)
+* [Development](docs/development.md)
+   * [Global Configuration](docs/global_configuration.md)
+   * [Entry index.html](docs/entry_indexhtml.md)
+   * [Vue Accessories](docs/vue_accessories.md)
+   * [NPM Scripts](docs/npm_scripts.md)
+* [Project Structure](docs/project_structure.md)
+   * [Using the file structure](docs/using_the_file_structure.md)
+   * [Using CSS frameworks](docs/using_css_frameworks.md)
+* [Building your app](docs/building_your_app.md)
+* [FAQs](docs/faqs.md)
+* [TODOs](docs/todos.md)
+* [Contributing](docs/contributing.md)
+

book.json

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    "github"
+  ],
+  "pluginsConfig": {
+    "github": {
+      "url": "https://github.com/SimulatedGREG/electron-vue"
+    }
+  },
+  "links": {
+    "sharing": {
+      "facebook": false,
+      "twitter": false
+    }
+  }
+}

docs/building_your_app.md

@@ -0,0 +1,64 @@
+# Building you app
+ electron-vue makes use of [electron-userland/electron-packager](https://github.com/electron-userland/electron-packager) to produce builds and are then saved to `builds`.
+
+## Defaults
+```js
+{
+    // `app/package.json` version
+    'app-version': pkg.version,
+
+    // Target 'x64' architecture
+    arch: 'x64',
+
+    // Compress app using 'electron/asar'
+    asar: true,
+
+    // Directory of the app
+    dir: path.join(__dirname, '../app'),
+
+    // Set electron app icon
+    // Change default icon in `app/icons`
+    // File extensions are added based on platform
+    //
+    // If building for Linux, please read
+    // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#icon
+    icon: path.join(__dirname, '../app/icons/icon'),
+
+    // Ignore files that would bloat final build size
+    ignore: /node_modules|src|main.html/,
+
+    // `config.js` name
+    name: config.name,
+
+    // Save builds to `releases`
+    out: path.join(__dirname, '../builds'),
+
+    // Overwrite existing builds
+    overwrite: true,
+
+    // Environment variable that sets platform
+    platform: 'all'
+}
+  ```
+ Further customizations can be made at `config.js` in accordance to `electron-packager`'s options found [here](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options).
+
+
+#### Building for all platforms
+```bash
+npm run build
+```
+
+#### Building for a specific platform
+ Platforms include `darwin`, `mas`, `linux` and `win32`.
+```bash
+npm run build:darwin # builds for darwin (OS X)
+```
+
+#### Cleaning
+ Delete all builds from `builds`
+```bash
+npm run build:clean
+```
+
+### A note for non-Windows users
+If you are wanting to build for Windows **with a custom icon** using a non-Windows platform, you must have [wine](https://www.winehq.org/) installed. [More Info](https://github.com/electron-userland/electron-packager#building-windows-apps-from-non-windows-platforms).

docs/contributing.md

@@ -0,0 +1,13 @@
+# Contributing
+Wanting to help with this boilerplate? Feel free to submit a pull request. Before getting ready to submit anything, make sure to check out the following...
+
+### JavaScript Standard Style
+To ensure all JS follows basic ***style standards*** make sure it follows these [rules](http://standardjs.com/#rules).
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+### `npm install`
+As noted in the [**Getting Started**](getting_started.md) section, after running `npm install` a `postinstall` script will then remove the entire `.git` directory. Be sure to remove that `postinstall` script from the `package.json` temporarily. 
+
+### TODOs
+When working on a specific TODO from the documentation, be sure to include that in the pull request title / commit message and update the TODO list as well. 

docs/development.md

@@ -0,0 +1,17 @@
+# Development
+
+## Starting the app
+```bash
+npm run dev
+```
+...and boom! You now have a running electron-vue app.
+![](landing-page.png)
+This boilerplate comes with a few landing-page components that are easily removable.
+
+## vue-devtools
+Once the app is loaded, another window will be opened that loads the vue-devtools. These tools will open by default and can be manually turned off in `config.js` by setting `vueDevTools` to `false`.
+
+**NOTE**: The current method of opening the vue-devtools currently opens a new window each time webpack needs a hard refresh.
+
+## devtron
+Electron's devtron devtools are enabled by default and can be turned off from `config.js`.

docs/entry_indexhtml.md

@@ -0,0 +1,36 @@
+# Entry `index.html`
+electron-vue makes use of **[ampedandwired/html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)** to create the `index.html` in production builds. During development you will find a `main.ejs` in the `app/src` directory. It is here where you can make changes to your entry html file.
+
+If you are unfamiliar with how the HTMLWebpackPlugin works, then I'd encourage you take a look at its documentation. But in short, this plugin will automatically inject production assets including `build.js` and `styles.css` into the final `index.html`.
+
+### `main.ejs` during development
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <app></app>
+    <!-- webpack builds are automatically injected -->
+  </body>
+</html>
+```
+
+### `index.html` in production
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>app</title>
+    <link href="styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <app></app>
+    <!-- webpack builds are automatically injected -->
+    <script type="text/javascript" src="build.js"></script>
+  </body>
+</html>
+```

docs/faqs.md

@@ -0,0 +1,11 @@
+# FAQs
+
+### Why does my electron app show a file explorer?
+
+#### TL;DR
+Your `app/src` contains error(s). Check console, fix errors, then refresh electron.
+##### Long answer
+ If error(s) are present in you `app/src` this creates conflicts with ESLint on first run. In turn, an INVALID webpack `build.js` is produced which interrupts HtmlWebpackPlugin from creating `index.html`. Since webpack-dev-server doesn't have the `index.html` ready to serve, the server falls back to the file explorer.
+
+### Why is `vue-devtools`/`devtron` missing?
+Make sure to close and reopen the developer tools panel on first launch if they are missing.

docs/getting_started.md

@@ -0,0 +1,17 @@
+# Getting Started
+**NOTICE**
+
+ electron-vue was built using node `v5.10.0` as electron `v1.0.1` uses this, but in most cases all dependencies should work fine on newer versions. I strongly recommend you use the same version of electron's node and your local instance of node. This helps prevent potential issues related to installing native npm modules needing to be built against electron. [**More info.**](http://electron.atom.io/docs/tutorial/using-native-node-modules/)
+
+ You can check your node version by running `node -v`. If you need to change your node version, then I'd recommend using [creationix/nvm](https://github.com/creationix/nvm/blob/master/README.markdown).
+
+## Setup
+```
+git clone https://github.com/SimulatedGREG/electron-vue
+cd electron-vue
+npm install
+```
+
+#### NOTE
+
+ When running `npm install` a post install script is also executed, which will `npm install` inside the `app` directory and add documentation files/folders to the `.gitignore`.

docs/global_configuration.md

@@ -0,0 +1,40 @@
+# Global Configuration
+
+electron-vue uses the [webpack/webpack](https://github.com/webpack/webpack) module loader system for pre-processing, bundling, and building your app. The default settings are rather common and should meet most of your needs and a `config.js` is provided in the root directory for quick adjustments. Further customizations can be made by directly adjusting `webpack.config.js`.
+
+#### ``config.js``
+```js
+{
+  // Name of electron app
+  // Will be used in production builds
+  name: 'app',
+
+  // Enable electron's devtron devtools extension in development
+  devtron: true,
+
+  // Use ESLint (extends `standard`)
+  // Further changes can be made in `.eslintrc.js`
+  eslint: true,
+
+  // webpack-dev-server port
+  port: 9080,
+
+  // Enable vue-devtools in development
+  vueDevTools: true,
+
+  // electron-packager options
+  // See `Building you app` for more info
+  building: {
+    'app-version': pkg.version,
+    arch: 'x64',
+    asar: true,
+    dir: path.join(__dirname, 'app'),
+    icon: path.join(__dirname, 'app/icons/icon'),
+    ignore: /node_modules|src|main.html|icons/,
+    name: pkg.name,
+    out: path.join(__dirname, 'builds'),
+    overwrite: true,
+    platform: 'all'
+  }
+}
+```

docs/npm_scripts.md

@@ -0,0 +1,17 @@
+# NPM Scripts
+To help eliminate redundant tasks around the development process, please to take note of some of the NPM scripts available to you. The following commands should be ran from your project's root directory.
+
+### `npm run build`
+Make quick builds using electron-packager. More info can be found in the [**Building your app**](building_your_app.md) section.
+
+### `npm run dev`
+Run app in development.
+
+### `npm run lint`
+Lint all your `app/src`'s JS & Vue component files.
+
+### `npm run pack`
+Run webpack in production. Although this command is available, there may not be very many cases where it is need as `npm run build` will do this before hand.
+
+### `npm run vue:route`, `npm run vuex:module`
+See [**Vue Accessories**](vue_accessories.md) for more info.

docs/project_structure.md

@@ -0,0 +1,56 @@
+# Project Structure
+ When it comes to making electron apps, project structure is a little different. The documentation below attempts to explain how the boilerplate works and the differences when the app is built.
+
+## Using two `package.json`'s
+ Yes, you read that right. There are **two** `package.json` files. Here's why...
+  1. **Bloatware** makes our build's file size way too large for distribution. Do we really want to include all those large `node_modules` along with all their miscellaneous files, and even those  modules that we are only using during development (ex. `vue-loader`, `eslint-loader`)? NO, we need to separate our dependencies.
+  2. **Native NPM modules** (those written in C, not pure JavaScript) for our app need to be compiled against electron. [**More info**](http://electron.atom.io/docs/tutorial/using-native-node-modules/). If we used only one `package.json`, how would we know which modules need to be compiled for electron and the others with your local instance of node for development? It might be possible, but separating our dependencies just makes more sense.
+
+#### `./package.json` is for all your development needs
+Here you should install modules that you only need during development. Items include scripts, pre-processors, module loaders, etc. In this boilerplate all of the `webpack` dependencies are saved here and **will not** be published in the final production build.
+
+#### `./app/package.json` is for your actual electron app
+**This `package.json` is your app's manifest.** Here you should install all your dependencies needed in your final app. It is inside this `app` folder that electron-packager creates production builds.
+
+##### Installing Native NPM modules
+As mentioned above, we need to make sure our native npm modules are built against electron. To do that, we can use [electron/electron-rebuild](https://github.com/electron/electron-rebuild).
+
+## File tree
+#### During development
+```
+electron-vue
+├─ app
+│  ├─ dist
+│  ├─ icons
+│  ├─ node_modules
+│  ├─ src
+│  │  ├─ components
+│  │  ├─ vuex
+│  │  │  └─ modules
+│  │  ├─ App.vue
+│  │  ├─ main.js
+│  │  └─ routes.js
+│  ├─ electron.js
+│  ├─ main.html
+│  └─ package.json
+├─ builds
+├─ devtools
+├─ docs
+├─ node_modules
+└─ tasks
+|  ├─ vue
+|  └─ vuex
+└─ config.js
+└─ package.json
+└─ webpack.config.js
+```
+#### Production builds
+```
+app.asar
+├─ dist
+│  ├─ build.js
+│  └─ index.html
+├─ electron.js
+└─ package.json
+```
+As you can probably tell, almost everything is stripped down in final production builds. This is almost mandatory when distributing electron apps, as you do not want your users to download bloated software with a large file size.

docs/todos.md

@@ -0,0 +1,31 @@
+# TODOs
+
+  1. ~~Ability to create electron builds for all platforms~~
+  2. ~~Show eslint errors in browser~~ (dropped)
+  3. ~~Create documentation explaining the use of both `package.json` files~~
+  4. ~~Create script to compile npm modules that are needed to build against electron~~ (dropped)
+  5. ~~Get Vue devtools working~~
+  6. ~~Add console.log messages to describe actions~~
+  7. ~~Create scripts for making vue routes / vuex modules~~
+  8. ~~Use universal config file~~
+  9. ~~App assets (setup url-loader)~~
+  10. ~~Describe project structure in more detail~~
+  11. ~~Create new app icon based on new logo~~
+  12. ~~Setup support for other CSS/JS pre-processors~~ (only had issues with SASS)
+  13. ~~Set autoprefixer to only target chrome, and add uglifyjs settings on production builds~~
+  14. ~~Add new electron devtron tools~~
+  15. **Bring vue-devtools inside the actual devtools panel**
+  16. ~~export mainWindow settings to `electron.dev.js`~~ (resolved to using one electron starter)
+  17. ~~Create documentation about global `config.js`~~
+  18. ~~Use ExtractTextPlugin for vendor CSS libraries, and documentation~~
+  19. ~~don't clean `app/dist` before building~~
+  20. ~~Create documentation explaining how to use dynamic assets in `dist` folder~~
+  21. ~~bring building settings to global `config.js`~~
+  22. ~~Create helper scripts for general application support~~
+  23. Create cli that takes options when scaffolding boilerplate**
+  24. ~~Create postinstall script~~
+  25. ~~Create npm script to remove landing-page components~~ (dropping in favor for `vue-cli`)
+  26. ~~SUPPORT ELECTRON MAIN PROCESS PACKING~~ (dropped)
+  27. ~~Determine why webpack seems to crash at random points~~ (might be fixed now)
+  28. ~~support css linting with [stylelint](https://github.com/stylelint/stylelint)~~ (dropped, not enough support from stylelint-loader)
+  29. **(more)**