nuxt-community / electron-template Goto Github PK
View Code? Open in Web Editor NEWElectron starter with nuxt.js
License: MIT License
Electron starter with nuxt.js
License: MIT License
in nuxt.config.js
i changed to
css: [
'@/assets/css/global.scss'
]
and it throws error
15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07
This dependency was not found:
To install it, you can run: npm install --save ..\assets\css\global.scss
in normal nuxt structure i can easly add scss like this but in electron template i can't add it ... i have to add css not scss
I'm getting a fatal error when I try to use <style lang="scss">
.
On OSX El Capitan 10.11.6, if I install the sass-loader with:
yarn add --dev sass-loader node-sass
...and then try to do yarn run dev
, I get the following error:
Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (53)
I'm confused about this error, because scss works just fine with other vue+electron projects like SimulatedGREG/electron-vue
. I don't understand why the sass-loader or node-sass would be trying to un under a different environment, regardless of if electron is used. Any idea?
The Nuxt core team does not have the bandwidth to maintain this template.
If anyone wants to help us maintain it, please comment on this issue, otherwise, we will archive this project 😞
I am referring to #3 and #4 . Now I have this
// nuxt.config.js
...
build: {
extend (config, {isClient}) {
// Extend only webpack config for client-bundle
if (isClient)
{
config.target = 'electron-renderer'
}
},
vendor: ['vuetify', 'axios']
},
...
And if I go to the _NUXT_URL_
in my browser, I get the common error that require is not defined and so my app doesn't do that much.
Well, I am not that much of a front-end developper but isn't there any way to get this work in the browser too ?
Maybe browserify or something would do the job ?
The idea would be to have the app working when embed in electron and in the browser.
OR
Would it be possible to access process
from store/index.js
as it is supposed to be available for both main and renderer process ? (see here)
process
seems to be undefined
when called in this file.
It might not be possible though.
Although everything looks fine when I run locally at http://localhost:3000/, the app that is built with Electron is just a blank white screen. I feel like I'm missing something obvious here!
Stumbled upon this article on how the Zeit team integrated Nex with Electron:
https://leo.im/2017/electron-next
One consideration they mention is not to open a port in production due to security vulnerabilities:
The reason why electron-next doesn't have the same behaviour in the final app as in development is that opening a port (like Next.js does it for providing hot reloading and auto-building of your code) is generally not a good idea because it introduces a security vulnerability on the user's device.
It's therefore safe for development, but not for production.
What's much safer, however, is letting the BrowserWindow instances directly access the static files of your renderer. This is made possible by next export, a new sub command that we've introduced with Next.js 3
I'm guessing next export
is equivalent to running nuxt in --spa
mode. So perhaps similar considerations can be applied to this template
cc @Atinux
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.
Since we did not receive a CI status on the greenkeeper/initial
branch, we assume that you still need to configure it.
If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/
.
We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.
I've used this template, generated app. In dev mode everything works ok. But If I build the app I get this:
package.json:
{
"name": "metod-admin",
"version": "1.0.0",
"description": "METOD admin client",
"author": "Terion <[email protected]>",
"private": true,
"main": "main.js",
"build": {
"appId": "com.metod-admin.app",
"directories": {
"buildResources": "static"
}
},
"scripts": {
"dev": "cross-env NODE_ENV=DEV electron .",
"dev:web": "cross-env NODE_ENV=DEV BUILD_TARGET=web nuxt",
"build": "nuxt build && electron-builder",
"build:web": "cross-env nuxt build",
"start": "cross-env nuxt build && nuxt start"
},
"dependencies": {
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-flow": "^7.0.0",
"apexcharts": "^2.0.9",
"element-ui": "^2.4.7",
"lockr": "^0.8.5",
"nuxt": "^2.1.0",
"nuxt-babel": "^0.1.2",
"nuxt-i18n": "^5.3.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"underscore": "^1.9.1",
"vue-apexcharts": "^1.2.1",
"vue-lodash": "^2.0.0",
"vue-wysiwyg": "^1.7.2",
"vue2-editor": "^2.6.6",
"vuedraggable": "^2.16.0"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"cross-env": "^5.2.0",
"electron": "2.0.0-beta.7",
"electron-builder": "^20.8.1",
"electron-devtools-installer": "^2.2.3",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0"
}
}
Hi,
Nice package! I'm facing an issue that blocks the loading, apparently caused by the axios package (https://github.com/nuxt-community/axios-module).
I get a "Cannot read property 'env' of undefined" error :
Any idea how to fix this? :) Thanks!
I'm trying to pass on a message from the main process to a vue component, but requiring electron inside a vue component doesn't work (Can't resolve 'fs' in...electron error). Looking at #3 it seems we can't include most packages, such as electron itself inside a vue component. So how is it done?
This problem occurs when I try to pack.
Steps to Reproduce:
npm run package:win
(npm run build && electron-packager ./ nuxt-cli --platform=win32 --arch=x64 --version=1.7.8 --out=./ --overwrite --icon=favicon.ico --ignore=node_modules --prune)
I extracted the created installer. But there is all my source code does not minified vue files.
If I extract below file:
$PLUGINSDIR\app-64\resources\app.asar
I think that it is not expected.
https://github.com/terion-name/metod-admin-temp
yarn build
app works
Cannot GET /
I've used this template, generated app. In dev mode everything works ok. But If I build the app I get this:
package.json:
{
"name": "metod-admin",
"version": "1.0.0",
"description": "METOD admin client",
"author": "Terion <[email protected]>",
"private": true,
"main": "main.js",
"build": {
"appId": "com.metod-admin.app",
"directories": {
"buildResources": "static"
}
},
"scripts": {
"dev": "cross-env NODE_ENV=DEV electron .",
"dev:web": "cross-env NODE_ENV=DEV BUILD_TARGET=web nuxt",
"build": "nuxt build && electron-builder",
"build:web": "cross-env nuxt build",
"start": "cross-env nuxt build && nuxt start"
},
"dependencies": {
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-flow": "^7.0.0",
"apexcharts": "^2.0.9",
"element-ui": "^2.4.7",
"lockr": "^0.8.5",
"nuxt": "^2.1.0",
"nuxt-babel": "^0.1.2",
"nuxt-i18n": "^5.3.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"underscore": "^1.9.1",
"vue-apexcharts": "^1.2.1",
"vue-lodash": "^2.0.0",
"vue-wysiwyg": "^1.7.2",
"vue2-editor": "^2.6.6",
"vuedraggable": "^2.16.0"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"cross-env": "^5.2.0",
"electron": "2.0.0-beta.7",
"electron-builder": "^20.8.1",
"electron-devtools-installer": "^2.2.3",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0"
}
}
I am new to electron and I just tried to use electron-packager to make an executable app with electron-packager .
Although there isn't any error messages but the app generated is not usable.
How should I do to build this app on desktop ? did I missing any configs ?
Thanks for answering.
Today to use this repository it is necessary to make a clone, why not add it to vue-cli
so that users can only start it with vue init nuxt-community/electron-template <folder>
, there is some restriction so you have not done so?
If it is the case I can send a PR with the changes
For developers who are looking for a reliable solution with configured electron-builder, unit / e2e testing.
https://codepen.io/gaspergrom/pen/bxQNgB
in nuxt.config.js
i changed to
css: [
'@/assets/css/global.scss'
]
and it throws error
15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07
This dependency was not found:
..\assets\css\global.scss in ./.nuxt/App.js
To install it, you can run: npm install --save ..\assets\css\global.scss
in normal nuxt structure i can easly add scss like this but in electron template i can't add it ... i have to add css not scss
to compile scss to css in nuxt structure
15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07
This dependency was not found:
..\assets\css\global.scss in ./.nuxt/App.js
To install it, you can run: npm install --save ..\assets\css\global.scss
Hey guys, I am trying to figure out how to start a nuxtjs app with express and electron. What I have tried so far is using the express-template
and installing electron
, electron-devtools-installer
then I copied the main.js
code to start electron
from electron-template
and pasted it into the start
method in the express-template
, it runs without errors but electron
isn't showing up.
Code is available here: https://codesandbox.io/s/927j4kzw6w
Run the project with: npm run dev:electron
Hi,
I am using this starter to migrate my electron app to Nuxt and so far I really like it.
Yet, I have a problem. Actually I have a solution to it and I understand why it is this way but I'd like to get it working just like any electron page.
Electron allows one to get rid (until a certain point) of client and server-side. But here, it is not possible to require any package needing fs
, tls
and net
(which includes a lot of packages). In a normal website or Nuxt project, this would be completely normal but here it can be problematic and troublesome sometimes isn't it ?
I could not even require('electron-router')
in the store or on client-side.
So right now, I have to make routes like this for example:
// main.js
const route = require('./assets/scripts/init/main.js').route(nuxt)
const server = http.createServer(route)
// assets/scripts/init/main/js
const URL = require('url-parse')
const {openExternal} = require('./openExternal.js')
const releases = require('./releases.js')
const seasons = require('./seasons.js')
exports.route = (nuxt) => {
return (req, res) => {
const url = new URL(req.url)
switch (url.pathname)
{
case '/openThis':
openExternal(url, res)
break
case '/seasons.json':
seasons.getSeason(url, res)
break
case '/releases.json':
releases.getLatest(url, res)
break
default:
nuxt.render(req, res)
}
}
}
Isn't it possible for client to have access to any module as well just like in a basic electron app where I could just require('fs')
anywhere in the app?
I do not intend to criticise anything, just asking 😮
When I want to build my app which work fine in development mode:
npm run build
After the successful nuxt build, I got this error:
Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
• electron-builder version=20.39.0
• loaded configuration file=package.json ("build" field)
• writing effective config file=dist/builder-effective-config.yaml
• rebuilding native production dependencies platform=linux arch=x64
Error: /usr/bin/node exited with code 1
Output:
> [email protected] install /mnt/data/workspace/retrobox/desktop/node_modules/lzma-native
> node-pre-gyp install --fallback-to-build && node node_modules/rimraf/bin.js build
Failed to execute '/usr/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64/lzma_native.node --module_name=lzma_native --module_path=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64' (1)
Error output:
node-pre-gyp ERR! Tried to download(404): https://node-pre-gyp.addaleax.net/lzma-native/lzma_native-v3.0.8-electron-v2.0-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (electron-v2.0 ABI, glibc) (falling back to source compile with node-gyp)
node-pre-gyp ERR! Tried to download(undefined): https://node-pre-gyp.addaleax.net/lzma-native/lzma_native-v3.0.8-electron-v2.0-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (electron-v2.0 ABI, glibc) (falling back to source compile with node-gyp)
gyp: Call to 'sh liblzma-config.sh "/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/build" "/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/deps/xz-5.2.3.tar.bz2"' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/lib/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (events.js:189:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Linux 5.0.0-arch1-1-ARCH
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64/lzma_native.node" "--module_name=lzma_native" "--module_path=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64"
gyp ERR! cwd /mnt/data/workspace/retrobox/desktop/node_modules/lzma-native
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64/lzma_native.node --module_name=lzma_native --module_path=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:189:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:970:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Linux 5.0.0-arch1-1-ARCH
node-pre-gyp ERR! command "/usr/bin/node" "/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /mnt/data/workspace/retrobox/desktop/node_modules/lzma-native
node-pre-gyp ERR! node -v v10.15.3
node-pre-gyp ERR! node-pre-gyp -v v0.6.39
node-pre-gyp ERR! not ok
I have done a fresh install followed all instructions and sass loader. I'm not so concerned about configs as I am making this a professional grade product. I should not be having this problem and if you want to replicate my problem simple...
git clone
cd my-project
yarn install
... and then modify a component to use SCSS and it will literally break in pieces in a sea of red. This should not be happening at all guys!
Hi,
how to add plugins in nuxt.config.js?
I am trying to add vuetify this.
like this
module.exports = {
/*
** Electron Settings
*/
electron: {
width: 1024,
height: 768
},
build: {
vendor: ['vuetify'],
plugins: ['~plugins/vuetify.js'],
head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
]
},
extend (config, { isClient }) {
// Extend only webpack config for client-bundle
if (isClient) {
config.target = 'electron-renderer'
}
}
}
}
After understanding the nuxt starter template, this template and electron-quick-start template, I managed to put together a new template for vue-cli: https://github.com/HoraceKeung/nuxtron
Since there are differences compare to this template, for example the repo structure is so different since it is a template for creating new project via vue-cli and electron-builder is used by default to build the app, it may not a be a good idea to submit a pull request here. Any idea?
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.