bradstewart/electron-boilerplate-vue

Boilerplate application for Electron runtime

electron-boilerplate-vue

Comprehensive boilerplate application for Electron runtime and Vue.js. This project is based on vue-templates/webpack and the awesome work by @szwacz on electron-boilerplate.

This README is a work in progress. This version is a large departure from the previous iteration. If you're looking for the old version, see this branch.

Scope of this project:

• Provide basic structure of the application so you can much easier grasp what should go where.
• Give you cross-platform development environment, which works the same way on OSX, Windows and Linux.
• Build scripts for the application using .vue components for production and development with Hot Module Reload.
• Package scripts to generate executable files (.app, .exe).
• Test scripts for both unit and end-to-end testing.
• Generate ready for distribution installers of your app for all supported operating systems.

Note: Installer generation is currently NOT implemented. Once electron-builder stablizes, I will add that to the project.

Quick start

The only development dependency of this project is Node.js. So just make sure you have it installed. Then type few commands known to every Node developer...

git clone https://github.com/bradstewart/electron-boilerplate-vue.git
cd electron-boilerplate-vue
npm install
npm start

... and boom! You have running desktop application on your screen.

Structure of the project

There are two package.json files:

1. For development

Sits on path: electron-boilerplate-vue/package.json. Here you declare dependencies for your development environment and build scripts. This file is not distributed with real application!

Also here you declare the version of Electron runtime you want to use:

"devDependencies": {
  "electron-prebuilt": "^0.34.0"
}

2. For your application

Sits on path: electron-boilerplate-vue/app/package.json. This is real manifest of your application. Declare your app dependencies here.

OMG, but seriously why there are two package.json?

1. Native npm modules (those written in C, not JavaScript) need to be compiled, and here we have two different compilation targets for them. Those used in application need to be compiled against electron runtime, and all devDependencies need to be compiled against your locally installed node.js. Thanks to having two files this is trivial.
2. When you package the app for distribution there is no need to add up to size of the app with your devDependencies. Here those are always not included (because reside outside the app directory).

Project's folders

• app - code of your application goes here.
• static - static files which are not processed by webpack.
• build - build scripts, configuration files, and resources.
• dist - webpacked and runnable Electron app.
• releases - ready for distribution installers and executables.
• test - test configuration, runners, and specs.

Development

Installation

npm install

It will also download Electron runtime, and install dependencies for second package.json file inside app folder.

Starting the app

npm start

Adding pure-js npm modules to your app

Remember to add your dependency to app/package.json file, so do:

cd app
npm install name_of_npm_module --save

Making a release

Note: There are various icon and bitmap files in the build/resources directory. Those are used in installers and are intended to be replaced by your own graphics.

To make ready for distribution installer use command:

npm run release

This process uses electron-packager. See their documentation on packaging for various operating systems.

License

The MIT License (MIT)

Copyright (c) 2015 Jakub Szwacz, 2016 Brad Stewart

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.

electron-boilerplate-vue's Issues

image url in less file not working for production

In dev mode with npm start the image is being loaded correctly.
But when I build for release (npm run release), I get an error:

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-15b1ee69!./~/less-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./app/Secondary.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./static/flags/4x3/un.svg in /path/to/app
 @ ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-15b1ee69!./~/less-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./app/Secondary.vue 6:239730-239766

I am using the default webpack config as the repo.

.flag-icon-ad {
    background-image: ~"url('static/flags/4x3/ad.svg')";
}
.flag-icon-ae {
    background-image: ~"url('static/flags/4x3/ae.svg')";
}
.flag-icon-af {
    background-image: ~"url('static/flags/4x3/af.svg')";
}
// ...

I have the files in the static directory

static/
    flags/
        4x3/
            ad.svg
            ae.svg
            ...

external css files are not compiled?

I'm having problem with css files location inside the project.

For now, the only way I get it working was placing them in the static directory.

I would like to know if there's a way to place them inside the assets directory (like: "assets/css") and when builded, they get compiled to app.css (to where the vuejs components css are compiled).

Thanks!

"npm start" failed on Windows 10 / Node 6.0

Append: If I switch the version of Node to 5.11.0, it works.

I am sure that I did not modify any files after cloning

D:\Projects\electron-boilerplate-vue>npm start

> @ start D:\Projects\electron-boilerplate-vue
> node build/dev-runner.js

dev:server  > @ dev:server D:\Projects\electron-boilerplate-vue
            > node build/dev-server.js

dev:client  > @ dev:client D:\Projects\electron-boilerplate-vue
            > cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "D:\Projects\electron-boilerplate-vue\dist"

dev:server  Listening at http://localhost:8080

dev:client  Hash: e8a00818127d912de9ee
            Version: webpack 1.13.0
            Time: 687ms
                    Asset     Size  Chunks             Chunk Names
            background.js  5.57 kB       0  [emitted]  background

            ERROR in Path must be a string. Received undefined


dev:server  webpack built 6e3dbc845ef470cf94c1 in 2082ms

dev:server  Hash: 6e3dbc845ef470cf94c1
            Version: webpack 1.13.0
            Time: 2082ms
                    Asset       Size  Chunks             Chunk Names
                   app.js    1.62 MB       0  [emitted]  app
              devtools.js    3.61 MB       1  [emitted]  devtools
                main.html  416 bytes          [emitted]
            devtools.html    1.09 kB          [emitted]
            Child html-webpack-plugin for "devtools.html":
                        Asset     Size  Chunks       Chunk Names
                devtools.html  24.1 kB       0
            Child html-webpack-plugin for "main.html":
                    Asset   Size  Chunks       Chunk Names
                main.html  22 kB       0

dev:server  webpack: bundle is now VALID.

dev:client

dev:client  npm

dev:client  ERR! Windows_NT 10.0.14316

dev:client  npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Projects\\electron-boilerplate-vue\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev:client" "--" "D:\\Projects\\electron-boilerplate-vue\\dist"
            npm ERR! node v6.0.0
            npm ERR! npm  v3.8.7
            npm ERR! code ELIFECYCLE
            npm ERR! @ dev:client: `cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "D:\Projects\electron-boilerplate-vue\dist"`
            npm ERR! Exit status 1
            npm ERR!
            npm ERR! Failed at the @ dev:client script 'cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "D:\Projects\electron-boilerplate-vue\dist"'.
            npm ERR! Make sure you have the latest version of node.js and npm installed.
            npm ERR! If you do, this is most likely a problem with the  package,
            npm ERR! not with npm itself.
            npm

dev:client  ERR! Tell the author that this fails on your system:
            npm ERR!     cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "D:\Projects\electron-boilerplate-vue\dist"
            npm ERR! You can get information on how to open an issue for this project with:
            npm ERR!     npm bugs
            npm ERR! Or if that isn't available, you can get their info via:
            npm ERR!     npm owner ls
            npm ERR! There is likely additional logging output above.

dev:client

dev:client  npm ERR! Please include the following file with any support request:
            npm ERR!     D:\Projects\electron-boilerplate-vue\npm-debug.log


npm ERR! Windows_NT 10.0.14316
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.0.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ start: `node build/dev-runner.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script 'node build/dev-runner.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node build/dev-runner.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Projects\electron-boilerplate-vue\npm-debug.log

Shell window screenshot:

And show this dialog:

Very thanks for following my question.

Accessing static folder?

How can I access the static folder when I release the application? Because the hierarchy of the folder changes when publishing the app.

Before

app
static

After

resources
  app
   static
   assets

this._init is not a function

Hi,
I keep getting this error . Can you please help me out with this?

        ERROR in ./app/App.vue
        Module build failed: TypeError: this._init is not a function
            at Object.Vue (D:\sandbox\AlertManager\vuejs-boilerplate\electron-boilerplate-vue\app\node_modules\vue\dist\vue.common.js:9510:8)
         @ ./app/main.js 7:11-27

Node Version : 4.4.5
NPM Version : 3.9.3

Thanks

unicode option cause an error on windows 7

https://github.com/bradstewart/electron-boilerplate-vue/blob/master/resources%2Fwindows%2Finstaller.nsi#L31

Error: Can't change target charset after data already got compressed or header a
lready changed!
Error in script "D:\code\vue\electron-boilerplate-vue\tmp\installer.nsi" on line
39 -- aborting creation process

so i fixed it by add ';'

same module i use in app/ and build/ where package.json i put ?

i use express in build script dev-server.js
and
use express in app/ electron app

then i put the express in the outside package.json like

devDependencies:{
"express": "^4.13.3",
...

and i also put the express in app/package.json

dependencies:{
"express": "^4.13.3",
...

when i run npm run start then i get a warning

WARNING in ./app/~/express/lib/view.js
            Critical dependencies:
            78:29-56 the request of a dependency is an expression
             @ ./app/~/express/lib/view.js 78:29-56

How can I solve this warning

Vue 2 - Styles not rendering in app

I updated my repo so that we could use vue 2.0 which required a change the to build/webpack.dev-main.conf.js so that Vue would render our templates again. The app builds and will render html and JS but now no styles are being included and there are no errors being thrown in my shell or devtools/browser console.

Below you'll find my updated files and screenshots to hopefully help get you enough info but let me know if there is something else you need.

updated webpack.dev-main.conf.js:

var webpack = require('webpack')
var merge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackBaseConfig = require('./webpack.base.conf')
var config = require('../config')
var cssLoaders = require('./css-loaders')

var devServerUrl = 'http://localhost:' + config.dev.port + '/'

var webpackConfig = merge(webpackBaseConfig, {
  entry: {
    app: [
      './build/dev-client?path=' + devServerUrl + '__webpack_hmr&noInfo=true&reload=true',
      './app/main.js'
    ]
  },
  // eval-source-map is faster for development
  devtool: '#eval-source-map',
  output: {
    // necessary for the html plugin to work properly
    // when serving the html from in-memory
    // need to explicitly set localhost to prevent
    // the hot updates from looking for local files
    publicPath: devServerUrl
  },
  vue: {
    loaders: cssLoaders({
      sourceMap: false,
      extract: false
    })
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './app/main.html',
      excludeChunks: ['devtools'],
      inject: true
    }),
    new webpack.IgnorePlugin(/vertx/)
  ],
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  }
})

if (config.dev.vueDevTools) {
  webpackConfig.entry.app.unshift(
    './tools/vue-devtools/hook.js',
    './tools/vue-devtools/backend.js'
  )
  webpackConfig.entry.devtools = './tools/vue-devtools/devtools.js'

  webpackConfig.plugins.push(new HtmlWebpackPlugin({
    filename: 'devtools.html',
    template: './tools/vue-devtools/index.html',
    chunks: ['devtools'],
    inject: true
  }))
}

module.exports = webpackConfig

piece I added to get vue 2.0 to render properly:

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  }

package.json

{
  "scripts": {
    "postinstall": "cd app && npm install",
    "start": "node build/dev-runner.js",
    "dev:server": "node build/dev-server.js",
    "dev:client": "cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron",
    "build": "rimraf dist && mkdirp dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js",
    "package": "node build/package.js",
    "package:osx": "node build/package.js --platform=darwin --arch=x64",
    "package:win": "node build/package.js --platform=win32",
    "package:linux": "node build/package.js --platform=linux",
    "release": "npm run build && npm run package",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "chromedriver": "^2.21.2",
    "connect-history-api-fallback": "^1.1.0",
    "copy-webpack-plugin": "^1.1.1",
    "cross-env": "1.0.7",
    "cross-spawn": "^2.1.5",
    "css-loader": "^0.25.0",
    "debug-menu": "^0.3.0",
    "electron-packager": "^7.0.0",
    "electron-prebuilt": "1.1.0",
    "electron-rebuild": "^1.1.3",
    "es6-promise": "^3.2.1",
    "eslint": "^2.0.0",
    "eslint-config-standard": "^5.1.0",
    "eslint-friendly-formatter": "^1.2.2",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-plugin-promise": "^1.0.8",
    "eslint-plugin-standard": "^1.3.2",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.11.0",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.15",
    "karma-coverage": "^0.5.5",
    "karma-electron-launcher": "^0.1.0",
    "karma-jasmine": "^0.3.6",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "^0.0.24",
    "karma-webpack": "^1.7.0",
    "mkdirp": "^0.5.1",
    "moment": "2.12.0",
    "ncp": "^2.0.0",
    "nightwatch": "^0.8.18",
    "phantomjs-prebuilt": "^2.1.3",
    "rimraf": "^2.5.0",
    "selenium-server": "2.52.0",
    "style-loader": "^0.13.1",
    "tree-kill": "^1.1.0",
    "url-loader": "^0.5.7",
    "vue": "^2.0.0",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^9.5.0",
    "vue-router": "^2.0.0-rc.3",
    "vue-server-renderer": "^2.0.0-rc.1",
    "vue-style-loader": "^1.0.0",
    "vuex": "^2.0.0-rc.4",
    "vuex-router-sync": "^3.0.0",
    "webpack": "1.12.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-externals-plugin": "1.0.0",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
  }
}

installed packages:

npm list --depth=0
/Users/<myuser>/sites/<app>
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

successful shell output:

npm start

> @ start /Users/<myuser>/sites/<app>
> node build/dev-runner.js

dev:client  > @ dev:client /Users/<myuser>/sites/<app>
            > cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "/Users/<myuser>/sites/<app>/dist"

dev:server  > @ dev:server /Users/<myuser>/sites/<app>
            > node build/dev-server.js

dev:server  Listening at http://localhost:8080

dev:client  Hash: e8a00818127d912de9ee
            Version: webpack 1.12.2
            Time: 1124ms
                    Asset       Size  Chunks             Chunk Names
            background.js    5.63 kB       0  [emitted]  background
             package.json  280 bytes          [emitted]

dev:server  webpack: wait until bundle finished: /main.html

dev:server  webpack built 980a95d012d1a6313964 in 2316ms

dev:server  Hash: 980a95d012d1a6313964
            Version: webpack 1.12.2
            Time: 2316ms
                Asset       Size  Chunks             Chunk Names
               app.js    1.01 MB       0  [emitted]  app
            main.html  457 bytes          [emitted]
            Child html-webpack-plugin for "main.html":
                    Asset     Size  Chunks       Chunk Names
                main.html  20.9 kB       0
            webpack: bundle is now VALID.

main.js:

require('es6-promise').polyfill();
import Vue from 'vue';
import App from './App';
import store from './store';

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App }
});

App.vue:

<template>
  <div>
    <NavBar></NavBar>
    <SecretList></SecretList>
  </div>
</template>

<script>
  import NavBar from './components/navbar';
  import SecretList from './components/secret-list';

  export default {
    components: {
      NavBar,
      SecretList
    }
  };
</script>

<style>
  html {
    height: 100%;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: blue;
  }
  #app {
    margin-top: -100px;
    max-width: 600px;
    font-family: Helvetica, sans-serif;
    text-align: center;
  }
</style>

screenshot of electron after build, as you can see body should have a blue background based on above and there are no <style> tags in the head:

It seems like a webpack/loader issue but I'm not familiar enough with either of those and it looks like all of the vue-loader/vue-style-loader docs use webpack2 which I've already found out isn't the easiest thing to upgrade to.

Any help/guidance would be greatly appreciated.

NSIS ?

any ideas?
i tried npm run release and got an error...

External/secondary screen with a different Vue template

I am trying to create a second Window with a different html file than main.html. I am successfully creating the window and using the new external.html template, but am unsure about how to use its own vue template.

Folder structure

app/
  assets/
  components/
  App.vue
  background.js
  external.html
  External.vue
  main.html
  main.js
  package.json

background.js

import { app, BrowserWindow } from 'electron'
import path from 'path'

let mainWindow
let externalWindow

app.on('ready', () => {
  createMainWindow()
  createExternalWindow()
})

app.on('window-all-closed', () => {
  app.quit()
})

function createMainWindow () {
  mainWindow = new BrowserWindow({
    width: 600,
    height: 800,
    x: 0,
    y: 600,
    center: false
  })

  const mainURL = process.env.HOT
    ? `http://localhost:${process.env.PORT}/main.html`
    : 'file://' + path.join(__dirname, 'main.html')

  mainWindow.loadURL(mainURL)

  if (process.env.NODE_ENV !== 'production') {
    mainWindow.openDevTools({mode: 'bottom'})
  }

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

function createExternalWindow () {
  externalWindow = new BrowserWindow({
    width: 600,
    height: 800,
    y: 0,
    x: 680,
    center: false
  })

  const externalURL = process.env.HOT
    ? `http://localhost:${process.env.PORT}/external.html`
    : 'file://' + path.join(__dirname, 'external.html')

  externalWindow.loadURL(externalURL)

  if (process.env.NODE_ENV !== 'production') {
    externalWindow.openDevTools({mode: 'bottom'})
  }

  externalWindow.on('closed', () => {
    externalWindow = null
  })
}

Secondary window is loading external.html file correctly, but I'm unsure of how to have it load the External.vue file.

The secondary window is looking for the #app element.

[Vue warn]: Cannot find element: #app

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter)

const router = new VueRouter({
  hashbang: false,
  abstract: true
})

router.map({
  '/': {
    name: 'home',
    component: Vue.component('home', require('./components/Home'))
  }
})

router.start(App, '#app')

Problem with npm run build

Currently It's "build": "rimraf dist && mkdirp dist cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js", so mkdirp create cross-env, NODE_ENV=production and webpack folders.
But it should be: rimraf dist && mkdirp dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.prod.conf.js no?

Adding / Rendering Custom Fonts

Just out of curiosity. Where would I store custom web fonts ? When I store under assets and package the app it doesn't render the custom fonts.

Hot reload not working

Really not sure if I'm missing something obvious, but I've cloned the repo, installed dependencies, and am able to get the app running. But when making changes to *.vue files the entire electron browser reloads the page, instead of injecting the individual component that needs updating (This is also true for even changing initial data of each component). I don't seem to find any errors expect for the warning below.

This is coming from the electron devtools console every time I make a change.

[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)
[HMR] Reloading page

Currently on OS X 10.11.2 using...

electron: 0.37.2
node: 5.10.0
npm: 3.8.3

Thanks!

jQuery integration

Sorry, stupid question ;) Which way do you recommend to integrate jquery to be reachable as global?

I have all the time error messages like Uncaught Error: Cannot find module 'jquery'

Tried it with the following code in main.html <script>window.$ = window.jQuery = require('jquery')</script>.

Changing *.vue or *.js files in app dir doesnt trigger build

Hi,
I'm trying to build a simple app based on this boilerplate, but when i change any file in app directory, it doesnt get rebuilt, so to see changes i have to kill the app and build it again manually, which is kind of cumbersome. Is this intended behaviour or am I doing something wrong?

Thanks

Chrome Dev-Tools doesn't work properly

Steps to reproduce:
Basically quick-start setup as described here: https://github.com/bradstewart/electron-boilerplate-vue#quick-start

Bugs after running npm run dev:

• highlighting HTML Nodes via the Chrome Dev Tools doesn't work (when hovering a node in the elements tab)
• selecting HTML Nodes via the Chrome Dev Tools doesn't work
• loads of errors show up in the terminal window

strict or stiff?

<script> export default { data () { return { msg: 'haha' } } } </script>
This code is work

but the code
<script> export default { data () { return { msg : 'haha' } } } </script>
is not work

just add a space and not work anymore?

Failed at the @ start script 'node build/dev-runner.js'.

I'm trying to get this boilerplate to run for the first time. I pull the repo, cd into it, and then npm install. It's erroring at npm start. My system node is at 6.1.0 if it matters.

**Error opening app***
The app provided is not a valid Electron app, please read the docs on how to write one:
https://github.com/atom/electron/tree/v0.37.2/docs

Error: Cannot find module '/Users/pz/Projects/electron-boilerplate-vue/dist'

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/6.1.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle @~prestart: @
6 silly lifecycle @~prestart: no script for prestart, continuing
7 info lifecycle @~start: @
8 verbose lifecycle @~start: unsafe-perm in lifecycle true
9 verbose lifecycle @~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/pz/Projects/electron-boilerplate-vue/node_modules/.bin:/usr/local/Cellar/node/6.1.0/bin:/Users/pz/.cabal/bin:/Users/pz/anaconda3/bin:/usr/local/sbin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/pz/.cabal/bin:/Users/pz/anaconda3/bin:/Users/pz/annex/go/bin:/Users/pz/annex/go/bin
10 verbose lifecycle @~start: CWD: /Users/pz/Projects/electron-boilerplate-vue
11 silly lifecycle @~start: Args: [ '-c', 'node build/dev-runner.js' ]
12 silly lifecycle @~start: Returned: code: 1  signal: null
13 info lifecycle @~start: Failed to exec start script
14 verbose stack Error: @ start: `node build/dev-runner.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:245:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:850:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid @
16 verbose cwd /Users/pz/Projects/electron-boilerplate-vue
17 error Darwin 15.4.0
18 error argv "/usr/local/Cellar/node/6.1.0/bin/node" "/usr/local/bin/npm" "start"
19 error node v6.1.0
20 error npm  v3.9.0
21 error code ELIFECYCLE
22 error @ start: `node build/dev-runner.js`
22 error Exit status 1
23 error Failed at the @ start script 'node build/dev-runner.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     node build/dev-runner.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Parsing errors on default files after install

Hello,

After fresh install, I've several parsing errors on default files of the boilerplate but, strangely, the application runs normally.

ERROR in ./app/app.js

/home/ludovic/projects/elecnote/app/app.js
  6:2  error  Parsing error: Illegal import declaration

✖ 1 problem (1 error, 0 warnings)


ERROR in ./app/hello_world/hello_world.js

/home/ludovic/projects/elecnote/app/hello_world/hello_world.js
  1:2  error  Parsing error: Illegal export declaration

✖ 1 problem (1 error, 0 warnings)


ERROR in ./app/~/babel-loader!./~/eslint-loader!./app/~/vue-loader/lib/selector.js?type=script&index=0!./app/components/HelloWorld.vue

/home/ludovic/projects/elecnote/app/components/HelloWorld.vue
  1:2  error  Parsing error: Unexpected token const

✖ 1 problem (1 error, 0 warnings)

Is it a problem for dev and/or futur application ? What can I do to fix these errors ?

Thanks for your boilerplate, it is really helpful 👍
Ludovic

missing package

Hi,
When I run : npm run package I get =>

node build/package.js

module.js:327
throw err;
^

Error: Cannot find module 'minimist' ........

We need add minimist to dev dependencies.

Bye and thx for this boilerplate 👍

update to Vue.js version 2.0

As you may be aware, Vue.js version 2.0 was just released which saw several improvements and nice features added (see https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.nbs1x41ow). It would be nice to update this project to use the updated version of Vue.js. Thoughts?

I keep getting a 'node-gyp rebuild' error message when I run npm install

I copied the lines in the quick start and am encountering this error on macOS beta 6.

CXX(target) Release/obj.target/nslog/src/main.o
  CXX(target) Release/obj.target/nslog/src/nslog_mac.o
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:10:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/NSArray.h:5:
/System/Library/Frameworks/Foundation.framework/Headers/NSObject.h:44:12: error: unknown property attribute 'class'
@property (class, readonly) BOOL supportsSecureCoding;
           ^
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:12:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:6:
/System/Library/Frameworks/Foundation.framework/Headers/NSString.h:262:12: error: unknown property attribute 'class'
@property (class, readonly) const NSStringEncoding *availableStringEncodings;
           ^
/System/Library/Frameworks/Foundation.framework/Headers/NSString.h:269:12: error: unknown property attribute 'class'
@property (class, readonly) NSStringEncoding defaultCStringEncoding;    // Should be rarely used
           ^
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:12:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:11:
/System/Library/Frameworks/Foundation.framework/Headers/NSNotification.h:45:12: error: unknown property attribute 'class'
@property (class, readonly, strong) NSNotificationCenter *defaultCenter;
           ^
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:12:
/System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:33:12: error: unknown property attribute 'class'
@property (class, readonly, strong) NSBundle *mainBundle;
           ^
/System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:46:12: error: unknown property attribute 'class'
@property (class, readonly, copy) NSArray<NSBundle *> *allBundles;
           ^
/System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:47:12: error: unknown property attribute 'class'
@property (class, readonly, copy) NSArray<NSBundle *> *allFrameworks;
           ^
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:14:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/NSCalendar.h:7:
/System/Library/Frameworks/Foundation.framework/Headers/NSDate.h:46:12: error: unknown property attribute 'class'
@property (class, readonly) NSTimeInterval timeIntervalSinceReferenceDate;
           ^
/System/Library/Frameworks/Foundation.framework/Headers/NSDate.h:60:12: error: unknown property attribute 'class'
@property (class, readonly, copy) NSDate *distantFuture;
           ^
/System/Library/Frameworks/Foundation.framework/Headers/NSDate.h:61:12: error: unknown property attribute 'class'
@property (class, readonly, copy) NSDate *distantPast;
           ^
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:14:
/System/Library/Frameworks/Foundation.framework/Headers/NSCalendar.h:108:12: error: unknown property attribute 'class'
@property (class, readonly, copy) NSCalendar *currentCalendar;                                  // user's preferred calendar
           ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCalendar.h:109:12: error: unknown property attribute 'class'
@property (class, readonly, strong) NSCalendar *autoupdatingCurrentCalendar NS_AVAILABLE(10_5, 2_0); // tracks changes to user's preferred calendar identifier
           ^
In file included from ../src/nslog_mac.mm:3:
In file included from /System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:15:
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:21:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *controlCharacterSet;
                     ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:22:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *whitespaceCharacterSet;
                     ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:23:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *whitespaceAndNewlineCharacterSet;
                     ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:24:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *decimalDigitCharacterSet;
                     ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:25:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *letterCharacterSet;
                     ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:26:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *lowercaseLetterCharacterSet;
                     ^
/System/Library/Frameworks/Foundation.framework/Headers/NSCharacterSet.h:27:22: error: unknown property attribute 'class'
@property (readonly, class, copy) NSCharacterSet *uppercaseLetterCharacterSet;
                     ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
make: *** [Release/obj.target/nslog/src/nslog_mac.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
gyp ERR! System Darwin 16.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/USERNAME/Developer/spa/electron-boilerplate-vue/node_modules/nslog
gyp ERR! node -v v6.4.0
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok 

npm-debug.log.txt

could u update the boilerplate to vue2

i have to try update this to vue2 but failed,the webpack2 have mang config,i cant understand its how to run.i need u help,thinks.

Unmet peer dependency electron-prebuilt

Fresh installation gives me this error.

UNMET PEER DEPENDENCY electron-prebuilt@>=0.35.0

npm ERR! Linux 3.19.0-59-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.4.1
npm ERR! npm  v3.9.5
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the electron-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs electron-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls electron-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

UPDATE:

             return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                             ^

            Error: ENOENT: no such file or directory, open '/storage/projects/foo/node_modules/electron-prebuilt/path.txt'
                at Error (native)
                at Object.fs.openSync (fs.js:634:18)
                at Object.fs.readFileSync (fs.js:502:33)
                at Object.<anonymous> (/storage/projects/foo/node_modules/electron-prebuilt/index.js:4:42)
                at Module._compile (module.js:541:32)
                at Object.Module._extensions..js (module.js:550:10)
                at Module.load (module.js:458:32)
                at tryModuleLoad (module.js:417:12)
                at Function.Module._load (module.js:409:3)
                at Module.require (module.js:468:17)

TypeError: data.trim is not a function

Actually, I've updated node to v6.2.1. I'm not sure if this is the reason, but I'm getting this error when I try npm start:

TypeError: data.trim is not a function
    at format (/home/egon/dev/electron-vue/build/dev-runner.js:16:10)
    at Socket.<anonymous> (/home/egon/dev/electron-vue/build/dev-runner.js:30:17)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:188:7)
    at readableAddChunk (_stream_readable.js:172:18)
    at Socket.Readable.push (_stream_readable.js:130:10)
    at Pipe.onread (net.js:542:20)

With this quickfix in build/dev-runner.js I got it to work:

function format (command, data, color) {
  // data seems to be a buffer and not a string
  if (typeof data !== 'string') {
    data = data.toString();
  }
  return color + command + END +
    '  ' + // Two space offset
    data.trim().replace(/\n/g, '\n' + repeat(' ', command.length + 2)) +
    '\n'
}

Why not use webpack-dev-server?

webpack-dev-server is the official express server. There are some benefits using webpack-dev-server.

For example, show all the resolve path:

It's enough for development.

Current solution is fine, I just wonder how do you think it through?

Clone electron-boilerplate-vue.git doesn't include all files

This
git clone https://github.com/bradstewart/electron-boilerplate-vue.git

missed a lot of files, causing npm start to fail. Downloading the zip works fine.

cheers

Serialport in app/package.json produces webpack errors

Hi, I'm trying to use p5.serialserver - https://github.com/vanevery/p5.serialport (which requires serialport - a native module) in the app but am getting this error in the webpack build

WARNING in ./app/~/bindings/bindings.js
            Critical dependencies:
            78:22-40 the request of a dependency is an expression
            78:43-53 the request of a dependency is an expression
             @ ./app/~/bindings/bindings.js 78:22-40 78:43-53

I looked at the offending lines of code and the module's purpose seems to be to dynamically require binary modules by try a bunch of directories until it gets it.

Then when I try to use serialport in the app (main proces) I get this runtime error

Uncaught Exception:
Error: Could not locate the bindings file. Tried:
 → /home/myusername/Dev/p5.js-editor/build/serialport.node
 → /home/myusername/Dev/p5.js-editor/build/Debug/serialport.node
 → /home/myusername/Dev/p5.js-editor/build/Release/serialport.node
 → /home/myusername/Dev/p5.js-editor/out/Debug/serialport.node
 → /home/myusername/Dev/p5.js-editor/Debug/serialport.node
 → /home/myusername/Dev/p5.js-editor/out/Release/serialport.node
 → /home/myusername/Dev/p5.js-editor/Release/serialport.node
 → /home/myusername/Dev/p5.js-editor/build/default/serialport.node
 → /home/myusername/Dev/p5.js-editor/compiled/6.1.0/linux/x64/serialport.node
    at bindings (/home/myusername/Dev/p5.js-editor/dist/background.js:276:10)
    at Object.<anonymous> (/home/myusername/Dev/p5.js-editor/dist/background.js:5388:39)
    at __webpack_require__ (/home/myusername/Dev/p5.js-editor/dist/background.js:20:30)
    at Object.has (/home/myusername/Dev/p5.js-editor/dist/background.js:5626:26)
    at __webpack_require__ (/home/myusername/Dev/p5.js-editor/dist/background.js:20:30)
    at Object.start (/home/myusername/Dev/p5.js-editor/dist/background.js:5128:20)
    at EventEmitter.<anonymous> (/home/myusername/Dev/p5.js-editor/dist/background.js:152:13)
    at emitOne (events.js:96:13)
    at EventEmitter.emit (events.js:188:7)
    at EventEmitter.<anonymous> (/home/myusername/Dev/p5.js-editor/node_modules/electron-prebuilt/dist/resources/electron.asar/browser/api/web-contents.js:130:25)

I was able to solve this by moving serialport to my externals in webpack config and moving the dependency from app/package.json deps to the root package.json devDeps but I think this is wrong as it is a runtime dependency and the packaged app needs the relevant builds.

I've tried using node-loader as per webpack/webpack#1040. Not sure if the solution involves some use of webpack's ContextReplacementPlugin.

Any thoughts? Thanks :)

Edit - I was able to get much more informative errors by changing the devtool setting in webpack.dev-background.conf.js and webpack.dev-main.conf.js from '#eval-source-map' to '#source-map'

release on windows

hi i cannot do
npm run release ( windows 7 64bts)
can you help ?
Thank you
i get this error

not compatible wth os or architecture ?!?!?

this error was on a 64bits windows 7

Linting

Hi,

Is there a way I can disable linting ? There are no errors in my code , but it keeps on barfing on errors like ' extra semicolon is present' .

Thank you.
With Regards
Gagan

Bug fixes, updates, Vue 2, etc.

First, sorry I've been unresponsive/nonexistent lately; thanks for issue reports and PRs. We launched a few (private/internal unfortunately) tools based on Vue/Electron a few months back, and I've been working on other projects.

I did, however, manage to learn a few things around simplifying the build/packaging/release/deployment process (especially with webpack, native dependencies, and multiple OS targets) which I will bring back into this project along with answering issues and reviewing PRs.

I need to catch up on the last few months of updates for Electron (and related build tools), Vue 2 and Webpack over the next week or so, then I'll start updating this project.

Stuff I need to remember to make sure works:

• Hot reloading in dev.
• Running in dev on Windows, OSX, Linux.
• Style sheet compilation.
• Native module support in dev and prod.
• Production build/package for Windows, OSX (maybe Linux, should "just work").
• Multiple bundles/windows.

Other things to do:

• Add docs about jQuery integration.

The app provided is not a valid electron app

I have downloaded the zip and installed all the dependencies but I get an error when I start the app, I have also tried cloning the repository but I still get the same problem.

webpack+sqlite3 not working

how can I use sqlite3 with this boilerplate?

in windows x86 platform i get an error when run npm start

npm install exe successful,when i run npm start,i catch then error:
npm ERR! code ELIFECYCLE
npm ERR! @ dev:client: cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js && cross-env HOT=1 electron "D:\Git\electron-boilerplate-vue\dist"

Package icons?

running npm run package doesn't use build/resources icons.

Accessing app node_modules folder from html

Hi,

I am trying to use Bootstrap, so I ran npm install --save bootstrap into the app folder. However, I can't find how to reach the app/node_modules folder from my HTML. I tried the following:

./node_modules/bootstrap/dist/css/bootstrap.min.css
/node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/css/bootstrap.min.css

Am I missing the point of the app/package.json file? By default, jQuery is present in the dependencies of this package, how and where should I use the jQuery present in this package.json file?

Not compiling background.js via babel on Windows (Unexpected token Import)

Hello!

I found it strange that when I ran:
cross-env HOT=1 webpack --hide-modules --config build/webpack.dev-background.conf.js

the original import statements remain untouched in the generated background.js file in the dist/ folder.

Testing a few modifications to the configuration I was able to resolve the issue by removing the line:
include: projectRoot, from build/webpack.base.conf.js

I unfortunately don't have the time to experiment and figure out why that is the case, but hopefully someone else experiencing this issue can live knowing it is possible to bypass.