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.

• javascript
• web
• vuejs2
• electron
• desktop

2 Answers 2

some 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