├── .eslintignore
├── dist
├── web
│ └── .gitkeep
└── electron
│ └── .gitkeep
├── static
└── .gitkeep
├── src
├── renderer
│ ├── assets
│ │ └── .gitkeep
│ ├── main.js
│ ├── App.vue
│ └── components
│ │ └── LandingPage.vue
├── main
│ ├── index.dev.js
│ └── index.js
└── index.ejs
├── .gitignore
├── appveyor.yml
├── .babelrc
├── .eslintrc.js
├── README.md
├── .travis.yml
├── LICENSE
├── .electron-vue
├── dev-client.js
├── webpack.main.config.js
├── build.js
├── webpack.web.config.js
├── dev-runner.js
└── webpack.renderer.config.js
└── package.json
/.eslintignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dist/web/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/dist/electron/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/renderer/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist/electron/*
3 | dist/web/*
4 | build/*
5 | !build/icons
6 | node_modules/
7 | npm-debug.log
8 | npm-debug.log.*
9 | thumbs.db
10 | !.gitkeep
11 |
--------------------------------------------------------------------------------
/src/renderer/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 |
3 | import App from './App'
4 |
5 | if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
6 | Vue.config.productionTip = false
7 |
8 | /* eslint-disable no-new */
9 | new Vue({
10 | components: { App },
11 | template: '',
12 | }).$mount('#app')
13 |
--------------------------------------------------------------------------------
/src/renderer/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
18 |
21 |
--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
1 | version: 0.1.{build}
2 |
3 | branches:
4 | only:
5 | - master
6 |
7 | image: Visual Studio 2017
8 | platform:
9 | - x64
10 |
11 | cache:
12 | - node_modules
13 | - '%APPDATA%\npm-cache'
14 | - '%USERPROFILE%\.electron'
15 | - '%USERPROFILE%\AppData\Local\Yarn\cache'
16 |
17 | init:
18 | - git config --global core.autocrlf input
19 |
20 | install:
21 | - ps: Install-Product node 8 x64
22 | - git reset --hard HEAD
23 | - yarn
24 | - node --version
25 |
26 | build_script:
27 | - yarn build
28 |
29 | test: off
30 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "comments": false,
3 | "env": {
4 | "main": {
5 | "presets": [
6 | ["env", {
7 | "targets": { "node": 7 }
8 | }],
9 | "stage-0"
10 | ]
11 | },
12 | "renderer": {
13 | "presets": [
14 | ["env", {
15 | "modules": false
16 | }],
17 | "stage-0"
18 | ]
19 | },
20 | "web": {
21 | "presets": [
22 | ["env", {
23 | "modules": false
24 | }],
25 | "stage-0"
26 | ]
27 | }
28 | },
29 | "plugins": ["transform-runtime"]
30 | }
31 |
--------------------------------------------------------------------------------
/src/renderer/components/LandingPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello world!
5 |
6 |
7 |
8 |
9 |
19 |
20 |
36 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: 'babel-eslint',
4 | parserOptions: {
5 | sourceType: 'module'
6 | },
7 | env: {
8 | browser: true,
9 | node: true
10 | },
11 | extends: 'airbnb-base',
12 | globals: {
13 | __static: true
14 | },
15 | plugins: [
16 | 'html'
17 | ],
18 | 'rules': {
19 | 'semi': 0,
20 | 'global-require': 0,
21 | 'import/no-unresolved': 0,
22 | 'no-param-reassign': 0,
23 | 'no-shadow': 0,
24 | 'import/extensions': 0,
25 | 'import/newline-after-import': 0,
26 | 'no-multi-assign': 0,
27 | // allow debugger during development
28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/main/index.dev.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is used specifically and only for development. It installs
3 | * `electron-debug` & `vue-devtools`. There shouldn't be any need to
4 | * modify this file, but it can be used to extend your development
5 | * environment.
6 | */
7 |
8 | /* eslint-disable */
9 |
10 | // Install `electron-debug` with `devtron`
11 | require('electron-debug')({ enabled: true })
12 |
13 | // Install `vue-devtools`
14 | require('electron').app.on('ready', () => {
15 | let installExtension = require('electron-devtools-installer')
16 | installExtension.default(installExtension.VUEJS_DEVTOOLS)
17 | .then(() => {})
18 | .catch(err => {
19 | console.log('Unable to install `vue-devtools`: \n', err)
20 | })
21 | })
22 |
23 | // Require `main` process to boot app
24 | require('./index')
25 |
--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | home-assistant
6 | <% if (htmlWebpackPlugin.options.nodeModules) { %>
7 |
8 |
11 | <% } %>
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # home-assistant
2 |
3 | > Home assistant for raspberry-pi with touchscreen
4 |
5 | #### Build Setup
6 |
7 | The project use yarn instead of npm for everything :wink:
8 |
9 | ``` bash
10 | # install dependencies
11 | yarn install
12 |
13 | # serve with hot reload at localhost:9080
14 | yarn run dev
15 |
16 | # build electron application for production
17 | yarn run build
18 |
19 |
20 | # lint all JS/Vue component files in `src/`
21 | yarn run lint
22 |
23 | ```
24 |
25 | ---
26 |
27 | This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[9add6ff](https://github.com/SimulatedGREG/electron-vue/tree/9add6ff4d47eaf8fb9f04efd0aca7be4dc6fb69d) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
28 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | osx_image: xcode8.3
2 | sudo: required
3 | dist: trusty
4 | language: c
5 | matrix:
6 | include:
7 | - os: osx
8 | - os: linux
9 | env: CC=clang CXX=clang++ npm_config_clang=1
10 | compiler: clang
11 | cache:
12 | directories:
13 | - node_modules
14 | - "$HOME/.electron"
15 | - "$HOME/.cache"
16 | addons:
17 | apt:
18 | packages:
19 | - libgnome-keyring-dev
20 | - icnsutils
21 | before_install:
22 | - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
23 | "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
24 | | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
25 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
26 | install:
27 | - nvm install 10
28 | - curl -o- -L https://yarnpkg.com/install.sh | bash
29 | - source ~/.bashrc
30 | - npm install -g xvfb-maybe
31 | - yarn
32 | script:
33 | - yarn run build
34 | branches:
35 | only:
36 | - master
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 FRIN Yvonnick
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.electron-vue/dev-client.js:
--------------------------------------------------------------------------------
1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
2 |
3 | hotClient.subscribe(event => {
4 | /**
5 | * Reload browser when HTMLWebpackPlugin emits a new index.html
6 | *
7 | * Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
8 | * https://github.com/SimulatedGREG/electron-vue/issues/437
9 | * https://github.com/jantimon/html-webpack-plugin/issues/680
10 | */
11 | // if (event.action === 'reload') {
12 | // window.location.reload()
13 | // }
14 |
15 | /**
16 | * Notify `mainWindow` when `main` process is compiling,
17 | * giving notice for an expected reload of the `electron` process
18 | */
19 | if (event.action === 'compiling') {
20 | document.body.innerHTML += `
21 |
34 |
35 |
36 | Compiling Main Process...
37 |
38 | `
39 | }
40 | })
41 |
--------------------------------------------------------------------------------
/src/main/index.js:
--------------------------------------------------------------------------------
1 | import { app, BrowserWindow } from 'electron' // eslint-disable-line
2 |
3 | /**
4 | * Set `__static` path to static files in production
5 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
6 | */
7 | if (process.env.NODE_ENV !== 'development') {
8 | global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') // eslint-disable-line
9 | }
10 |
11 | let mainWindow
12 | const winURL = process.env.NODE_ENV === 'development'
13 | ? 'http://localhost:9080'
14 | : `file://${__dirname}/index.html`
15 |
16 | function createWindow() {
17 | /**
18 | * Initial window options
19 | */
20 | mainWindow = new BrowserWindow({
21 | height: 320,
22 | useContentSize: true,
23 | width: 480,
24 | })
25 |
26 | mainWindow.loadURL(winURL)
27 |
28 | mainWindow.on('closed', () => {
29 | mainWindow = null
30 | })
31 | }
32 |
33 | app.on('ready', createWindow)
34 |
35 | app.on('window-all-closed', () => {
36 | if (process.platform !== 'darwin') {
37 | app.quit()
38 | }
39 | })
40 |
41 | app.on('activate', () => {
42 | if (mainWindow === null) {
43 | createWindow()
44 | }
45 | })
46 |
47 | /**
48 | * Auto Updater
49 | *
50 | * Uncomment the following code below and install `electron-updater` to
51 | * support auto updating. Code Signing with a valid certificate is required.
52 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating
53 | */
54 |
55 | /*
56 | import { autoUpdater } from 'electron-updater'
57 |
58 | autoUpdater.on('update-downloaded', () => {
59 | autoUpdater.quitAndInstall()
60 | })
61 |
62 | app.on('ready', () => {
63 | if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
64 | })
65 | */
66 |
--------------------------------------------------------------------------------
/.electron-vue/webpack.main.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | process.env.BABEL_ENV = 'main'
4 |
5 | const path = require('path')
6 | const { dependencies } = require('../package.json')
7 | const webpack = require('webpack')
8 |
9 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
10 |
11 | let mainConfig = {
12 | entry: {
13 | main: path.join(__dirname, '../src/main/index.js')
14 | },
15 | externals: [
16 | ...Object.keys(dependencies || {})
17 | ],
18 | module: {
19 | rules: [
20 | {
21 | test: /\.(js)$/,
22 | enforce: 'pre',
23 | exclude: /node_modules/,
24 | use: {
25 | loader: 'eslint-loader',
26 | options: {
27 | formatter: require('eslint-friendly-formatter')
28 | }
29 | }
30 | },
31 | {
32 | test: /\.js$/,
33 | use: 'babel-loader',
34 | exclude: /node_modules/
35 | },
36 | {
37 | test: /\.node$/,
38 | use: 'node-loader'
39 | }
40 | ]
41 | },
42 | node: {
43 | __dirname: process.env.NODE_ENV !== 'production',
44 | __filename: process.env.NODE_ENV !== 'production'
45 | },
46 | output: {
47 | filename: '[name].js',
48 | libraryTarget: 'commonjs2',
49 | path: path.join(__dirname, '../dist/electron')
50 | },
51 | plugins: [
52 | new webpack.NoEmitOnErrorsPlugin()
53 | ],
54 | resolve: {
55 | extensions: ['.js', '.json', '.node']
56 | },
57 | target: 'electron-main'
58 | }
59 |
60 | /**
61 | * Adjust mainConfig for development settings
62 | */
63 | if (process.env.NODE_ENV !== 'production') {
64 | mainConfig.plugins.push(
65 | new webpack.DefinePlugin({
66 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
67 | })
68 | )
69 | }
70 |
71 | /**
72 | * Adjust mainConfig for production settings
73 | */
74 | if (process.env.NODE_ENV === 'production') {
75 | mainConfig.plugins.push(
76 | new BabiliWebpackPlugin(),
77 | new webpack.DefinePlugin({
78 | 'process.env.NODE_ENV': '"production"'
79 | })
80 | )
81 | }
82 |
83 | module.exports = mainConfig
84 |
--------------------------------------------------------------------------------
/.electron-vue/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | process.env.NODE_ENV = 'production'
4 |
5 | const { say } = require('cfonts')
6 | const chalk = require('chalk')
7 | const del = require('del')
8 | const { spawn } = require('child_process')
9 | const webpack = require('webpack')
10 | const Multispinner = require('multispinner')
11 |
12 |
13 | const mainConfig = require('./webpack.main.config')
14 | const rendererConfig = require('./webpack.renderer.config')
15 | const webConfig = require('./webpack.web.config')
16 |
17 | const doneLog = chalk.bgGreen.white(' DONE ') + ' '
18 | const errorLog = chalk.bgRed.white(' ERROR ') + ' '
19 | const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
20 | const isCI = process.env.CI || false
21 |
22 | if (process.env.BUILD_TARGET === 'clean') clean()
23 | else if (process.env.BUILD_TARGET === 'web') web()
24 | else build()
25 |
26 | function clean () {
27 | del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
28 | console.log(`\n${doneLog}\n`)
29 | process.exit()
30 | }
31 |
32 | function build () {
33 | greeting()
34 |
35 | del.sync(['dist/electron/*', '!.gitkeep'])
36 |
37 | const tasks = ['main', 'renderer']
38 | const m = new Multispinner(tasks, {
39 | preText: 'building',
40 | postText: 'process'
41 | })
42 |
43 | let results = ''
44 |
45 | m.on('success', () => {
46 | process.stdout.write('\x1B[2J\x1B[0f')
47 | console.log(`\n\n${results}`)
48 | console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
49 | process.exit()
50 | })
51 |
52 | pack(mainConfig).then(result => {
53 | results += result + '\n\n'
54 | m.success('main')
55 | }).catch(err => {
56 | m.error('main')
57 | console.log(`\n ${errorLog}failed to build main process`)
58 | console.error(`\n${err}\n`)
59 | process.exit(1)
60 | })
61 |
62 | pack(rendererConfig).then(result => {
63 | results += result + '\n\n'
64 | m.success('renderer')
65 | }).catch(err => {
66 | m.error('renderer')
67 | console.log(`\n ${errorLog}failed to build renderer process`)
68 | console.error(`\n${err}\n`)
69 | process.exit(1)
70 | })
71 | }
72 |
73 | function pack (config) {
74 | return new Promise((resolve, reject) => {
75 | config.mode = 'production'
76 | webpack(config, (err, stats) => {
77 | if (err) reject(err.stack || err)
78 | else if (stats.hasErrors()) {
79 | let err = ''
80 |
81 | stats.toString({
82 | chunks: false,
83 | colors: true
84 | })
85 | .split(/\r?\n/)
86 | .forEach(line => {
87 | err += ` ${line}\n`
88 | })
89 |
90 | reject(err)
91 | } else {
92 | resolve(stats.toString({
93 | chunks: false,
94 | colors: true
95 | }))
96 | }
97 | })
98 | })
99 | }
100 |
101 | function web () {
102 | del.sync(['dist/web/*', '!.gitkeep'])
103 | webConfig.mode = 'production'
104 | webpack(webConfig, (err, stats) => {
105 | if (err || stats.hasErrors()) console.log(err)
106 |
107 | console.log(stats.toString({
108 | chunks: false,
109 | colors: true
110 | }))
111 |
112 | process.exit()
113 | })
114 | }
115 |
116 | function greeting () {
117 | const cols = process.stdout.columns
118 | let text = ''
119 |
120 | if (cols > 85) text = 'lets-build'
121 | else if (cols > 60) text = 'lets-|build'
122 | else text = false
123 |
124 | if (text && !isCI) {
125 | say(text, {
126 | colors: ['yellow'],
127 | font: 'simple3d',
128 | space: false
129 | })
130 | } else console.log(chalk.yellow.bold('\n lets-build'))
131 | console.log()
132 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "home-assistant",
3 | "version": "0.0.1",
4 | "author": "FRIN Yvonnick ",
5 | "description": "Home assistant for raspberry-pi with touchscreen",
6 | "license": null,
7 | "main": "./dist/electron/main.js",
8 | "scripts": {
9 | "build": "node .electron-vue/build.js && electron-builder",
10 | "build:dir": "node .electron-vue/build.js && electron-builder --dir",
11 | "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
12 | "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
13 | "dev": "node .electron-vue/dev-runner.js",
14 | "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
15 | "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
16 | "pack": "npm run pack:main && npm run pack:renderer",
17 | "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
18 | "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
19 | "postinstall": "npm run lint:fix"
20 | },
21 | "build": {
22 | "productName": "home-assistant",
23 | "appId": "com.example.yourapp",
24 | "directories": {
25 | "output": "build"
26 | },
27 | "files": [
28 | "dist/electron/**/*"
29 | ],
30 | "dmg": {
31 | "contents": [
32 | {
33 | "x": 410,
34 | "y": 150,
35 | "type": "link",
36 | "path": "/Applications"
37 | },
38 | {
39 | "x": 130,
40 | "y": 150,
41 | "type": "file"
42 | }
43 | ]
44 | },
45 | "mac": {
46 | "icon": "build/icons/icon.icns"
47 | },
48 | "win": {
49 | "icon": "build/icons/icon.ico"
50 | },
51 | "linux": {
52 | "icon": "build/icons"
53 | }
54 | },
55 | "dependencies": {
56 | "vue": "^2.5.16",
57 | "vue-electron": "^1.0.6"
58 | },
59 | "devDependencies": {
60 | "ajv": "^6.5.0",
61 | "babel-core": "^6.26.3",
62 | "babel-loader": "^7.1.4",
63 | "babel-plugin-transform-runtime": "^6.23.0",
64 | "babel-preset-env": "^1.7.0",
65 | "babel-preset-stage-0": "^6.24.1",
66 | "babel-register": "^6.26.0",
67 | "babili-webpack-plugin": "^0.1.2",
68 | "cfonts": "^2.1.2",
69 | "chalk": "^2.4.1",
70 | "copy-webpack-plugin": "^4.5.1",
71 | "cross-env": "^5.1.6",
72 | "css-loader": "^0.28.11",
73 | "del": "^3.0.0",
74 | "devtron": "^1.4.0",
75 | "electron": "^2.0.4",
76 | "electron-debug": "^2.0.0",
77 | "electron-devtools-installer": "^2.2.4",
78 | "electron-builder": "^20.19.2",
79 | "babel-eslint": "^8.2.3",
80 | "eslint": "^4.19.1",
81 | "eslint-friendly-formatter": "^4.0.1",
82 | "eslint-loader": "^2.0.0",
83 | "eslint-plugin-html": "^4.0.3",
84 | "eslint-config-airbnb-base": "^12.1.0",
85 | "eslint-import-resolver-webpack": "^0.10.0",
86 | "eslint-plugin-import": "^2.12.0",
87 | "mini-css-extract-plugin": "0.4.0",
88 | "file-loader": "^1.1.11",
89 | "html-webpack-plugin": "^3.2.0",
90 | "multispinner": "^0.2.1",
91 | "node-loader": "^0.6.0",
92 | "style-loader": "^0.21.0",
93 | "url-loader": "^1.0.1",
94 | "vue-html-loader": "^1.2.4",
95 | "vue-loader": "^15.2.4",
96 | "vue-style-loader": "^4.1.0",
97 | "vue-template-compiler": "^2.5.16",
98 | "webpack-cli": "^3.0.8",
99 | "webpack": "^4.15.1",
100 | "webpack-dev-server": "^3.1.4",
101 | "webpack-hot-middleware": "^2.22.2",
102 | "webpack-merge": "^4.1.3"
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/.electron-vue/webpack.web.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | process.env.BABEL_ENV = 'web'
4 |
5 | const path = require('path')
6 | const webpack = require('webpack')
7 |
8 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
9 | const CopyWebpackPlugin = require('copy-webpack-plugin')
10 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
11 | const HtmlWebpackPlugin = require('html-webpack-plugin')
12 | const { VueLoaderPlugin } = require('vue-loader')
13 |
14 | let webConfig = {
15 | devtool: '#cheap-module-eval-source-map',
16 | entry: {
17 | web: path.join(__dirname, '../src/renderer/main.js')
18 | },
19 | module: {
20 | rules: [
21 | {
22 | test: /\.(js|vue)$/,
23 | enforce: 'pre',
24 | exclude: /node_modules/,
25 | use: {
26 | loader: 'eslint-loader',
27 | options: {
28 | formatter: require('eslint-friendly-formatter')
29 | }
30 | }
31 | },
32 | {
33 | test: /\.less$/,
34 | use: ['vue-style-loader', 'css-loader', 'less-loader']
35 | },
36 | {
37 | test: /\.css$/,
38 | use: ['vue-style-loader', 'css-loader']
39 | },
40 | {
41 | test: /\.html$/,
42 | use: 'vue-html-loader'
43 | },
44 | {
45 | test: /\.js$/,
46 | use: 'babel-loader',
47 | include: [ path.resolve(__dirname, '../src/renderer') ],
48 | exclude: /node_modules/
49 | },
50 | {
51 | test: /\.vue$/,
52 | use: {
53 | loader: 'vue-loader',
54 | options: {
55 | extractCSS: true,
56 | loaders: {
57 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
58 | scss: 'vue-style-loader!css-loader!sass-loader',
59 | less: 'vue-style-loader!css-loader!less-loader'
60 | }
61 | }
62 | }
63 | },
64 | {
65 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
66 | use: {
67 | loader: 'url-loader',
68 | query: {
69 | limit: 10000,
70 | name: 'imgs/[name].[ext]'
71 | }
72 | }
73 | },
74 | {
75 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
76 | use: {
77 | loader: 'url-loader',
78 | query: {
79 | limit: 10000,
80 | name: 'fonts/[name].[ext]'
81 | }
82 | }
83 | }
84 | ]
85 | },
86 | plugins: [
87 | new VueLoaderPlugin(),
88 | new MiniCssExtractPlugin({filename: 'styles.css'}),
89 | new HtmlWebpackPlugin({
90 | filename: 'index.html',
91 | template: path.resolve(__dirname, '../src/index.ejs'),
92 | minify: {
93 | collapseWhitespace: true,
94 | removeAttributeQuotes: true,
95 | removeComments: true
96 | },
97 | nodeModules: false
98 | }),
99 | new webpack.DefinePlugin({
100 | 'process.env.IS_WEB': 'true'
101 | }),
102 | new webpack.HotModuleReplacementPlugin(),
103 | new webpack.NoEmitOnErrorsPlugin()
104 | ],
105 | output: {
106 | filename: '[name].js',
107 | path: path.join(__dirname, '../dist/web')
108 | },
109 | resolve: {
110 | alias: {
111 | '@': path.join(__dirname, '../src/renderer'),
112 | 'vue$': 'vue/dist/vue.esm.js'
113 | },
114 | extensions: ['.js', '.vue', '.json', '.css']
115 | },
116 | target: 'web'
117 | }
118 |
119 | /**
120 | * Adjust webConfig for production settings
121 | */
122 | if (process.env.NODE_ENV === 'production') {
123 | webConfig.devtool = ''
124 |
125 | webConfig.plugins.push(
126 | new BabiliWebpackPlugin(),
127 | new CopyWebpackPlugin([
128 | {
129 | from: path.join(__dirname, '../static'),
130 | to: path.join(__dirname, '../dist/web/static'),
131 | ignore: ['.*']
132 | }
133 | ]),
134 | new webpack.DefinePlugin({
135 | 'process.env.NODE_ENV': '"production"'
136 | }),
137 | new webpack.LoaderOptionsPlugin({
138 | minimize: true
139 | })
140 | )
141 | }
142 |
143 | module.exports = webConfig
144 |
--------------------------------------------------------------------------------
/.electron-vue/dev-runner.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const chalk = require('chalk')
4 | const electron = require('electron')
5 | const path = require('path')
6 | const { say } = require('cfonts')
7 | const { spawn } = require('child_process')
8 | const webpack = require('webpack')
9 | const WebpackDevServer = require('webpack-dev-server')
10 | const webpackHotMiddleware = require('webpack-hot-middleware')
11 |
12 | const mainConfig = require('./webpack.main.config')
13 | const rendererConfig = require('./webpack.renderer.config')
14 |
15 | let electronProcess = null
16 | let manualRestart = false
17 | let hotMiddleware
18 |
19 | function logStats (proc, data) {
20 | let log = ''
21 |
22 | log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
23 | log += '\n\n'
24 |
25 | if (typeof data === 'object') {
26 | data.toString({
27 | colors: true,
28 | chunks: false
29 | }).split(/\r?\n/).forEach(line => {
30 | log += ' ' + line + '\n'
31 | })
32 | } else {
33 | log += ` ${data}\n`
34 | }
35 |
36 | log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
37 |
38 | console.log(log)
39 | }
40 |
41 | function startRenderer () {
42 | return new Promise((resolve, reject) => {
43 | rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
44 | rendererConfig.mode = 'development'
45 | const compiler = webpack(rendererConfig)
46 | hotMiddleware = webpackHotMiddleware(compiler, {
47 | log: false,
48 | heartbeat: 2500
49 | })
50 |
51 | compiler.hooks.compilation.tap('compilation', compilation => {
52 | compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
53 | hotMiddleware.publish({ action: 'reload' })
54 | cb()
55 | })
56 | })
57 |
58 | compiler.hooks.done.tap('done', stats => {
59 | logStats('Renderer', stats)
60 | })
61 |
62 | const server = new WebpackDevServer(
63 | compiler,
64 | {
65 | contentBase: path.join(__dirname, '../'),
66 | quiet: true,
67 | before (app, ctx) {
68 | app.use(hotMiddleware)
69 | ctx.middleware.waitUntilValid(() => {
70 | resolve()
71 | })
72 | }
73 | }
74 | )
75 |
76 | server.listen(9080)
77 | })
78 | }
79 |
80 | function startMain () {
81 | return new Promise((resolve, reject) => {
82 | mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
83 | mainConfig.mode = 'development'
84 | const compiler = webpack(mainConfig)
85 |
86 | compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
87 | logStats('Main', chalk.white.bold('compiling...'))
88 | hotMiddleware.publish({ action: 'compiling' })
89 | done()
90 | })
91 |
92 | compiler.watch({}, (err, stats) => {
93 | if (err) {
94 | console.log(err)
95 | return
96 | }
97 |
98 | logStats('Main', stats)
99 |
100 | if (electronProcess && electronProcess.kill) {
101 | manualRestart = true
102 | process.kill(electronProcess.pid)
103 | electronProcess = null
104 | startElectron()
105 |
106 | setTimeout(() => {
107 | manualRestart = false
108 | }, 5000)
109 | }
110 |
111 | resolve()
112 | })
113 | })
114 | }
115 |
116 | function startElectron () {
117 | var args = [
118 | '--inspect=5858',
119 | path.join(__dirname, '../dist/electron/main.js')
120 | ]
121 |
122 | // detect yarn or npm and process commandline args accordingly
123 | if (process.env.npm_execpath.endsWith('yarn.js')) {
124 | args = args.concat(process.argv.slice(3))
125 | } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
126 | args = args.concat(process.argv.slice(2))
127 | }
128 |
129 | electronProcess = spawn(electron, args)
130 |
131 | electronProcess.stdout.on('data', data => {
132 | electronLog(data, 'blue')
133 | })
134 | electronProcess.stderr.on('data', data => {
135 | electronLog(data, 'red')
136 | })
137 |
138 | electronProcess.on('close', () => {
139 | if (!manualRestart) process.exit()
140 | })
141 | }
142 |
143 | function electronLog (data, color) {
144 | let log = ''
145 | data = data.toString().split(/\r?\n/)
146 | data.forEach(line => {
147 | log += ` ${line}\n`
148 | })
149 | if (/[0-9A-z]+/.test(log)) {
150 | console.log(
151 | chalk[color].bold('┏ Electron -------------------') +
152 | '\n\n' +
153 | log +
154 | chalk[color].bold('┗ ----------------------------') +
155 | '\n'
156 | )
157 | }
158 | }
159 |
160 | function greeting () {
161 | const cols = process.stdout.columns
162 | let text = ''
163 |
164 | if (cols > 104) text = 'electron-vue'
165 | else if (cols > 76) text = 'electron-|vue'
166 | else text = false
167 |
168 | if (text) {
169 | say(text, {
170 | colors: ['yellow'],
171 | font: 'simple3d',
172 | space: false
173 | })
174 | } else console.log(chalk.yellow.bold('\n electron-vue'))
175 | console.log(chalk.blue(' getting ready...') + '\n')
176 | }
177 |
178 | function init () {
179 | greeting()
180 |
181 | Promise.all([startRenderer(), startMain()])
182 | .then(() => {
183 | startElectron()
184 | })
185 | .catch(err => {
186 | console.error(err)
187 | })
188 | }
189 |
190 | init()
191 |
--------------------------------------------------------------------------------
/.electron-vue/webpack.renderer.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | process.env.BABEL_ENV = 'renderer'
4 |
5 | const path = require('path')
6 | const { dependencies } = require('../package.json')
7 | const webpack = require('webpack')
8 |
9 | const BabiliWebpackPlugin = require('babili-webpack-plugin')
10 | const CopyWebpackPlugin = require('copy-webpack-plugin')
11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
12 | const HtmlWebpackPlugin = require('html-webpack-plugin')
13 | const { VueLoaderPlugin } = require('vue-loader')
14 |
15 | /**
16 | * List of node_modules to include in webpack bundle
17 | *
18 | * Required for specific packages like Vue UI libraries
19 | * that provide pure *.vue files that need compiling
20 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
21 | */
22 | let whiteListedModules = ['vue']
23 |
24 | let rendererConfig = {
25 | devtool: '#cheap-module-eval-source-map',
26 | entry: {
27 | renderer: path.join(__dirname, '../src/renderer/main.js')
28 | },
29 | externals: [
30 | ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
31 | ],
32 | module: {
33 | rules: [
34 | {
35 | test: /\.(js|vue)$/,
36 | enforce: 'pre',
37 | exclude: /node_modules/,
38 | use: {
39 | loader: 'eslint-loader',
40 | options: {
41 | formatter: require('eslint-friendly-formatter')
42 | }
43 | }
44 | },
45 | {
46 | test: /\.less$/,
47 | use: ['vue-style-loader', 'css-loader', 'less-loader']
48 | },
49 | {
50 | test: /\.css$/,
51 | use: ['vue-style-loader', 'css-loader']
52 | },
53 | {
54 | test: /\.html$/,
55 | use: 'vue-html-loader'
56 | },
57 | {
58 | test: /\.js$/,
59 | use: 'babel-loader',
60 | exclude: /node_modules/
61 | },
62 | {
63 | test: /\.node$/,
64 | use: 'node-loader'
65 | },
66 | {
67 | test: /\.vue$/,
68 | use: {
69 | loader: 'vue-loader',
70 | options: {
71 | extractCSS: process.env.NODE_ENV === 'production',
72 | loaders: {
73 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
74 | scss: 'vue-style-loader!css-loader!sass-loader',
75 | less: 'vue-style-loader!css-loader!less-loader'
76 | }
77 | }
78 | }
79 | },
80 | {
81 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
82 | use: {
83 | loader: 'url-loader',
84 | query: {
85 | limit: 10000,
86 | name: 'imgs/[name]--[folder].[ext]'
87 | }
88 | }
89 | },
90 | {
91 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
92 | loader: 'url-loader',
93 | options: {
94 | limit: 10000,
95 | name: 'media/[name]--[folder].[ext]'
96 | }
97 | },
98 | {
99 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
100 | use: {
101 | loader: 'url-loader',
102 | query: {
103 | limit: 10000,
104 | name: 'fonts/[name]--[folder].[ext]'
105 | }
106 | }
107 | }
108 | ]
109 | },
110 | node: {
111 | __dirname: process.env.NODE_ENV !== 'production',
112 | __filename: process.env.NODE_ENV !== 'production'
113 | },
114 | plugins: [
115 | new VueLoaderPlugin(),
116 | new MiniCssExtractPlugin({filename: 'styles.css'}),
117 | new HtmlWebpackPlugin({
118 | filename: 'index.html',
119 | template: path.resolve(__dirname, '../src/index.ejs'),
120 | minify: {
121 | collapseWhitespace: true,
122 | removeAttributeQuotes: true,
123 | removeComments: true
124 | },
125 | nodeModules: process.env.NODE_ENV !== 'production'
126 | ? path.resolve(__dirname, '../node_modules')
127 | : false
128 | }),
129 | new webpack.HotModuleReplacementPlugin(),
130 | new webpack.NoEmitOnErrorsPlugin()
131 | ],
132 | output: {
133 | filename: '[name].js',
134 | libraryTarget: 'commonjs2',
135 | path: path.join(__dirname, '../dist/electron')
136 | },
137 | resolve: {
138 | alias: {
139 | '@': path.join(__dirname, '../src/renderer'),
140 | 'vue$': 'vue/dist/vue.esm.js'
141 | },
142 | extensions: ['.js', '.vue', '.json', '.css', '.node']
143 | },
144 | target: 'electron-renderer'
145 | }
146 |
147 | /**
148 | * Adjust rendererConfig for development settings
149 | */
150 | if (process.env.NODE_ENV !== 'production') {
151 | rendererConfig.plugins.push(
152 | new webpack.DefinePlugin({
153 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
154 | })
155 | )
156 | }
157 |
158 | /**
159 | * Adjust rendererConfig for production settings
160 | */
161 | if (process.env.NODE_ENV === 'production') {
162 | rendererConfig.devtool = ''
163 |
164 | rendererConfig.plugins.push(
165 | new BabiliWebpackPlugin(),
166 | new CopyWebpackPlugin([
167 | {
168 | from: path.join(__dirname, '../static'),
169 | to: path.join(__dirname, '../dist/electron/static'),
170 | ignore: ['.*']
171 | }
172 | ]),
173 | new webpack.DefinePlugin({
174 | 'process.env.NODE_ENV': '"production"'
175 | }),
176 | new webpack.LoaderOptionsPlugin({
177 | minimize: true
178 | })
179 | )
180 | }
181 |
182 | module.exports = rendererConfig
183 |
--------------------------------------------------------------------------------