bradstewart / electron-boilerplate-vue Goto Github PK
View Code? Open in Web Editor NEWBoilerplate application for Electron runtime
Boilerplate application for Electron runtime
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 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
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?
how can I use sqlite3 with this boilerplate?
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
Very thanks for following my question.
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
...
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 👍
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'
}
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
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
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)
<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?
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:
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
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.
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
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!
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>
.
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 ';'
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
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
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')
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.
running npm run package
doesn't use build/resources
icons.
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"
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.
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.
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?
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
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 ]
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'
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:
Other things to do:
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
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
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.