I have a project made in VueJS. I've started from vue cli
and almost finished the code. By npm run build
I've created /dist
folder with static folder and index.html. Now what I want is to convert web app into desktop app. It seems electron is what I need. However, after searching for instructions here and there, I'm not able to figure out where to start.
I have a project made in VueJS. I've started from vue cli
and almost finished the code. By npm run build
I've created /dist
folder with static folder and index.html. Now what I want is to convert web app into desktop app. It seems electron is what I need. However, after searching for instructions here and there, I'm not able to figure out where to start.
2 Answers
Reset to default 4some of the things I've used in the past...
- nw.js https://nwjs.io/
- electron https://electron.atom.io/
- zeit-pkg https://github./zeit/pkg
- nexe https://github./nexe/nexe
there are others out there, but I'd say that pkg was the easiest to use for creating a single executable, but it creates the largest files. Nexe is a bit more work to setup depending on your dependencies. nwjs and electron have a slightly more plex setup as-well, pared to a single pile mand, but they do give you more options.
I have used electron to make a desktop app. (https://electron.atom.io/)
Please follow the steps for basic setup with electron :
1) install electron globally using mand
npm install electron -g
2) Add this in your package.json
Make app.js as a entry file
package.json
"main": "app.js",
"scripts": {
"start": "electron ."
},
"bin" : "./bin/my-bin.js"
3) app.js
// Electron Desktop app
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let win;
function createWindow() {
win = new BrowserWindow({ icon: __dirname + '/images/brw.PNG', show: false
})
win.maximize()
win.show()
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'), //path to your index.html
protocol: false,
slashes: true
}));
win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
4) Add my-bin.js in app/my-bin.js directory
bin/my-bin.js
#!/usr/bin/env node
var join = require('path').join
var childProcess = require('child_process');
var args = process.argv.slice(2);
args.unshift(__dirname + '/../');
childProcess.exec('npm start', (err, stdout) => {
if (err) console.log(err);
console.log(stdout);
})
5) Then, in current working directory,
Execute
npm start
Yay, It will open your desktop application window.
Cheers !!
Note : You can develop this without "bin" entry in package.json, but if you would wish to package your app usig zeit/pkg, you will need it since it reads from bin entry.
pkg is used to make distribute executable's,where we can make executable's without source code.(hidden source code). But currently there is an issue for distributing electron app with pkg https://github./zeit/pkg/issues/52