<div align="center">

<br>

<img width="500" src="/docs/images/logo.png" alt="electron-vue">

<br>

<br>

</div>

<p align="center" color="#6a737d">

vue로 구축 된 electron 애플리케이션을 만들기 위한 <span title="최소한의 변경으로 재사용할 수 있는 것">보일러 플레이트</span>

</p>

<div align="center">

[](http://forthebadge.com) [](http://forthebadge.com) [](http://forthebadge.com)

</div>

<div align="center">

[](https://semaphoreci.com/simulatedgreg/electron-vue)

</div>

electron-vue supports both [electron-packager](https://github.com/electron-userland/electron-packager) and [electron-builder](https://github.com/electron-userland/electron-builder) to build and distribute your production ready application. Both build tools are backed by the amazing [@electron-userland](https://github.com/electron-userland) community and each have detailed documentation. During `vue-cli` scaffolding you will be asked which builder you will want to use.

If you are new to making electron applications or just need to create simple executables, then `electron-packager` is perfect for your needs.

If you are looking for full installers, auto-update support, CI building with Travis CI & AppVeyor, or automation of rebuilding native node modules, then `electron-builder` is what you will need.

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...

To ensure all JS follows basic ***style standards*** make sure it follows these [rules](http://standardjs.com/#rules).

When running your application in development you may have noticed a message from the `main` process mentioning a remote debugger. Ever since the release of `electron@^1.7.2`, remote debugging over the Inspect API was introduced and can be easily accessed by opening the provided link with Google Chrome or through another debugger that can remotely attach to the process using the default port of 5858, such as Visual Studio Code.

Although it is possible to debug your application in production, please do know that production code is minified and highly unreadable compared to what you find during development.

There isn't much of a big difference here than it is in development. You can simply invoke the dev tools using the [`BrowserWindow` APIs](https://electron.atom.io/docs/api/web-contents/#contentsopendevtoolsoptions). Using the initial electron-vue setup, you can add the following snippet of code inside `src/main/index.js` , just after the `new BrowserWindow` construction, to force the dev tools to open on launch.

Similar to what is mentioned above, you can also attach an external debugger to the `main` process to remotely debug your application. In order to activate the debugger in production you can add the follow snippet after the `app` import inside `src/main/index.js`. Then you can navigate Google Chrome to `chrome://inspect` and get connected.

electron-vue supports both unit testing and end-to-end testing for the `renderer` process and is heavily inspired by the testing setup provided with the official `vuejs-templates/webpack` boilerplate. During `vue-cli` scaffolding you will have the option to include testing support.

Run end-to-end tests with Spectron + Mocha

If your decided to use `electron-builder` as your build tool when scaffolding, then you can easily test your application on both Travis CI & AppVeyor for `darwin`, `linux`, and `win32`. Inside both `.travis.yml` and `appveyor.yml` you will find commented sections you can quickly un-comment to enable testing. Make sure to read up on [**Automated Deployments using CI**](/using-electron-builder.md#automated-deployments-using-ci)** **for further information.

electron-vue makes use of the [Karma](https://karma-runner.github.io/1.0/index.html) test runner and the [Mocha](https://mochajs.org/) test framework \(with [Chai](http://chaijs.com/)\) for unit testing.

Both Mocha and Chai are integrated using `karma-mocha` and `karma-chai` respectively, so all APIs such as `expect` are globally available in test files.

**For the most part, you can ignore both **`index.js`** and **`karma.conf.js`** and focus solely on writing **`specs/`**.**

Inside this directory is where actual tests are written. Thanks to the power of webpack, you have full access to ES2015 and supported loaders.

This is the entry file used by `karma-webpack`. The purpose of this file is to gather all test and source code in a "one-shot" manner.

Here you will find the actual `karma` configuration, set up with spec/coverage reporters. Further customization can be made in accordance to the [official karma documentation](http://karma-runner.github.io/1.0/config/configuration-file.html).

electron-vue comes with [`inject-loader`](https://github.com/plasticine/inject-loader) installed by default. For usage with Vue component files see [`vue-loader` docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).

All builds produced by `electron-builder` can be found within the `build` directory.

Produce simple executable without full installer. Useful for quick testing.

When using electron-vue's `electron-builder` configuration, you are also provided a `appveyor.yml` and `.travis.yml` for automated deployments. Both config files are setup for building your electron application and pushing artifacts to a GitHub release, Bintray, etc. Travis CI is used to build both `linux` and `darwin` \(macOS\) while AppVeyor is used to build `win32`. Both services are free for OSS projects.

1. Create an account over at [Travis CI](https://travis-ci.org/getting_started) / [AppVeyor](https://www.appveyor.com/)

2. Link your GitHub repository that has your electron-vue project

3. Visit [https://github.com/settings/tokens](https://github.com/settings/tokens) and hit **Generate new token **\(the same token can be used for both Travis CI & AppVeyor\)

1. Set a **Token description**

2. Check the **public\_repo **scope

3. Hit **Generate token**

4. Copy your new token and save for later

5. Open your repository settings on Travis CI / AppVeyor to add a new **Environment Variable**

1. Set the name of the variable to `GH_TOKEN`

2. Set the value of the variable to the GitHub access token you just created

3. **Save** the new variable and ensure encryption is enabled

At this point, everything should be setup. Travis CI/AppVeyor by default will watch for any pushes to your `master` branch. When a push is made, Travis CI/AppVeyor will then clone down your repository to its server and begin the build process. During the final stages, `electron-builder` with see the `GH_TOKEN` environment variable and create a draft release and upload the artifacts to your public GitHub repository. From this point, you can edit the draft release and then publish it to the world. After publishing your release, make sure future releases are marked with a new version number by updating your `package.json`.

Enabling your application to receive automatic updates is a super nice feature to have, but know that [**Code Signing**](https://github.com/electron-userland/electron-builder/wiki/Code-Signing) is required. You can setup code signing by adding a few more environment variables based on what `electron-builder` needs described [here](https://www.electron.build/code-signing). Once you have your certificates setup, you can then install `electron-updater` and comment out the chunk of code at the bottom of `src/main/index.js` to enable auto updating.

If you are like most people and do not have a fancy code signing certificate, then you can always use the GitHub API to check for new releases. When a new release is detected, provide a notification within your application to point users to a download page where they can download and install the new build. Thanks to the amazing installer that `electron-builder` provides, user's do not have to uninstall the current version and the new installation will replace the old while still persisting any web storage or `userData` files.