Vue-cli-plugin-electron-builder: How to publish a vue-electron release to github using this plugin?
_Helo friends,_
_I have an electron application that uses autoUpdater, but I don't know how to release_ ...
_I have this in the background.js:_
const server = 'https://cinecoqui.chrismichael.now.sh'
const feed = `${server}/update/${process.platform}/${app.getVersion()}`
autoUpdater.setFeedURL(feed);
setInterval(() => {
autoUpdater.checkForUpdates()
}, 60000);
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
const dialogOpts = {
type: 'info',
buttons: ['Restart', 'Later'],
title: 'Application Update',
message: process.platform === 'win32' ? releaseNotes : releaseName,
detail: 'A new version has been downloaded. Restart the application to apply the updates.'
}
dialog.showMessageBox(dialogOpts, (response) => {
if (response === 0) autoUpdater.quitAndInstall()
})
})
autoUpdater.on('error', message => {
console.error('There was a problem updating the application')
console.error(message)
})
When I write the
npm run electron:build
command it generates what is the dist_electron folder, next to the latest.yml file that have this:
version: 1.1.0
files:
- url: cinecoqui-Setup-1.1.0.exe
sha512: DNQh9JA/Ex2dNij3ZYNtKPXs1j9L+cHUFZR6xg2aSJkU6KglEAe6XBJMtc6UBtJIHaUXuAaZPrVmnBivJwEzrA==
size: 43692738
path: cinecoqui-Setup-1.1.0.exe
sha512: DNQh9JA/Ex2dNij3ZYNtKPXs1j9L+cHUFZR6xg2aSJkU6KglEAe6XBJMtc6UBtJIHaUXuAaZPrVmnBivJwEzrA==
releaseDate: '2019-09-26T15:06:02.912Z'
_Some help I will appreciate it_
ChrisMichaelPerezSantiago
All 21 comments
Try this page: https://www.electron.build/configuration/publish
I use this in my vue.config.js:
publish: [
{
provider: "github",
owner: "Christilut",
repo: "myrepo",
releaseType: 'draft'
}
]
And run the publish command vue-cli-service electron:build -p always with the GH_TOKEN prefixed, eg: GH_TOKEN=123 npm run publish
Took me a bit to figure all this out, the information is there just spread out.
Christilut
on 27 Sep 2019
Helo @Christilut ,
_Thank you very much for your input. I achieved what I wanted._
_I must mention is that the configuration of the vue.config.js file:_
 "publish": [
{
"provider": "github",
"owner": "ChrisMichaelPerezSantiago",
"repo": "cinecoqui",
"releaseType": "draft"
}
],
_It showed me an error, Invalid options in vue.config.js:_
"publish" is not allowed.
_To fix it, I took the configuration and pasted it into the package.json._
_Then I define the script of the publication:_
"gh-publish": "vue-cli-service electron: build -p always"
 _And in the line command I wrote the following:_
npm run gh-publish GH_TOKEN
c@Chris MINGW64 ~/Desktop/cinecoqui (master)
$ npm run gh-publish GH_TOKEN
> [email protected] gh-publish C:\Users\c\Desktop\cinecoqui
> vue-cli-service electron:build -p always "GH_TOKEN"
INFO Bundling render process:
\ Building modern bundle for production...
DONE Compiled successfully in 4870ms 11:14:24 AM
File Size Gzipped
dist_electron\bundled\js\chunk-vendors 474.95 KiB 130.95 KiB
.e63000b6.js
dist_electron\bundled\js\app.2547ac53. 109.93 KiB 29.40 KiB
js
dist_electron\bundled\css\app.a26b00bd 44.08 KiB 9.28 KiB
.css
Images and other types of assets omitted.
DONE Build complete. The dist_electron\bundled directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
| Bundling main process...
DONE Compiled successfully in 3065ms 11:14:28 AM
File Size Gzipped
dist_electron\bundled\background.js 161.28 KiB 50.06 KiB
Images and other types of assets omitted.
INFO Building app with electron-builder:
• electron-builder version=21.2.0 os=10.0.18362
• description is missed in the package.json appPackageFile=C:\Users\c\Desktop\cinecoqui\dist_electron\bundled\package.json
• author is missed in the package.json appPackageFile=C:\Users\c\Desktop\cinecoqui\dist_electron\bundled\package.json
• writing effective config file=dist_electron\builder-effective-config.yaml
• packaging platform=win32 arch=x64 electron=6.0.7 appOutDir=dist_electron\win-unpacked
• default Electron icon is used reason=application icon is not set
• building target=nsis file=dist_electron\cinecoqui Setup 1.1.0.exe archs=x64 oneClick=true perMachine=false
• building block map blockMapFile=dist_electron\cinecoqui Setup 1.1.0.exe.blockmap
• publishing publisher=Github (owner: ChrisMichaelPerezSantiago, project: cinecoqui, version: 1.1.0)
• uploading file=cinecoqui-Setup-1.1.0.exe.blockmap provider=GitHub
• uploading file=cinecoqui-Setup-1.1.0.exe provider=GitHub
• creating GitHub release reason=release doesn't exist tag=v1.1.0 version=1.1.0
[====================] 100% 0.0s | cinecoqui-Setup-1.1.0.exe to GitHub
DONE Build complete!
💯 _Now, in github in the releases section we will see our draft with the files._
ChrisMichaelPerezSantiago
on 27 Sep 2019
Glad it works!
In my vue.config.js it looks like this:
pluginOptions: {
electronBuilder: {
builderOptions: {
publish: [ etc ]
Maybe something was missing or a different builder version? I'm using 1.4.0
Christilut
on 27 Sep 2019
_Right,_
_Maybe it's a version problem. But I still thank you very much for your contribution. There really isn't much technical information about publishing in a correct way with the vue-cli-plugin-electron-builder plugin._
_I think that the community should create more useful documentation about this pluging._
ChrisMichaelPerezSantiago
on 27 Sep 2019
I agree, it's a bit hard to find out how to do it exactly. Bits and pieces of documentation everywhere that you have to puzzle together yourself
Christilut
on 27 Sep 2019
Hello @Christilut
_Apparently my program does not do auto update. When I execute the gh-publish command, it generates the files next to thelatest.yml correctly. But when I go to my electronic application I don't get the message to update._
_The problem I have is that the feed value is defined as it is in the documentation,,_
const feed = ${server}/update/${process.platform}/${app.getVersion ()}
_but really in the code I don't have the route._
_How can I configure the path /update/ in vuejs?_
${server}/update/${process.platform}/${app.getVersion()}
background.js
https://github.com/ChrisMichaelPerezSantiago/cinecoqui/blob/master/src/background.js
Releases:
https://github.com/ChrisMichaelPerezSantiago/cinecoqui/releases
ChrisMichaelPerezSantiago
on 1 Oct 2019
I don't think you need to use a custom feed. For me it automatically creates the correct feed URL from the publish property I mentioned earlier.
As for the background.js file, I only have this await autoUpdater.checkForUpdates() and the event handlers.
Christilut
on 1 Oct 2019
@Christilut
_I deleted these lines of code_
const server = 'https://cinecoqui.chrismichael.now.sh'
  const feed = `${server}/update/${process.platform}/${app.getVersion ()}`
  autoUpdater.setFeedURL(feed);
_But now it shows me the following error_
There was a problem updating the application
Error: Update URL is not set
at AutoUpdater.emitError (C:\Users\c\Desktop\cinecoqui\node_modules\electron\dist\resources\electron.asar\browser\api\auto-updater\auto-updater-win.js:67:28)
at AutoUpdater.checkForUpdates (C:\Users\c\Desktop\cinecoqui\node_modules\electron\dist\resources\electron.asar\browser\api\auto-updater\auto-updater-win.js:36:25)
at Timeout.eval [as _onTimeout] (webpack:///./src/background.js?:92:58)
at listOnTimeout (internal/timers.js:531:17)
at processTimers (internal/timers.js:475:7)
I'm not sure what the problem is. Maybe check the electron-builder and the electron-updater documentation? Sounds like you have a misconfiguration somewhere.
Try making a new project with the vue cli and add the vue-electron plugin because out of the box with the publish property it should work.
Christilut
on 1 Oct 2019
_Yes, the publish command works perfect for me and generates the packages for me. But the problem I have is that when I have a new release, my electronic application that I have installed on my computer is supposed to be updated to the latest version according to the release but that does not happen._
ChrisMichaelPerezSantiago
on 1 Oct 2019
@Christilut
_If you want, and you can provide your configuration so I can compare and solve the problem._
ChrisMichaelPerezSantiago
on 1 Oct 2019
Sure but the only thing I have regarding the auto updater is this in my vue.config.js:
publish: [
{
provider: "github",
owner: "Christilut",
repo: "my-repo",
releaseType: 'draft'
}
],
The updater gets the feed url from that, I already confirmed that a few days ago when I had trouble getting it working. I initially added a custom feed url too but turns out it is done automatically.
Are you sure yourpublish is on the same level as nsis and mac ? Because it seems that if the publish is inside there, it won't get set the feed url.
Christilut
on 1 Oct 2019
_It shows me the following error when I paste the code in the vue.config.js_
module.exports = {
productionSourceMap: false,
publish: [
{
provider: "github",
owner: "ChrisMichaelPerezSantiago",
repo: "cinecoqui",
releaseType: "draft"
}
],
};
ERROR Invalid options in vue.config.js: "publish" is not allowed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gh-publish: `vue-cli-service electron:build -p always "GH_TOKEN"`
npm ERR! Exit status 1
npm ERR!
@ChrisMichaelPerezSantiago that config option has to go in the builderOptions value:
module.exports = {
productionSourceMap: false,
pluginOptions: {
electronBuilder: {
builderOptions: {
publish: [
{
provider: "github",
owner: "ChrisMichaelPerezSantiago",
repo: "cinecoqui",
releaseType: "
}
]
}
}
}
}
nklayman
on 2 Oct 2019
_Hello @nklayman ,_
_Your solution worked for me, I recognize the value publish._
_The problem I have is that I created two test releases one in version 1.2.1 and another in version 1.2.2. I downloaded and installed version 1.2.1 to my computer to see if it showed me any update of version 1.2.2 but no. I don't know what my problem really is since the update is not recognizing me._
_Here I leave my project, if you want to see my configuration._
https://github.com/ChrisMichaelPerezSantiago/cinecoqui
ChrisMichaelPerezSantiago
on 2 Oct 2019
@ChrisMichaelPerezSantiago I looked at your original code snippet and I noticed that checkForUpdates was wrapped in a setInterval. The function in setInterval won't run till the time set has passed, so it is possible that you didn't wait the 60 seconds till the checkForUpdates to run. Try moving it out of the setInterval and see if that works.
nklayman
on 2 Oct 2019
Hi @nklayman ,
_I updated the file vue.config.js, but still don't want to recognize the autoupdate. I created two releases of test one in version 1.2.1 and one in 1.2.2. I installed the version 1.2.1 to verify if it showed me any message related to the update on 1.2.2 but showed nothing._
module.exports = {
productionSourceMap: false,
pluginOptions: {
electronBuilder: {
builderOptions: {
appId: "com.cinecoqui.app",
productName: "cinecoqui",
win: {
icon: "./public/logo.png",
target: [
{
target: "nsis",
arch: ["x64", "ia32"]
}
]
},
nsis:{
oneClick: false,
perMachine: true,
allowToChangeInstallationDirectory: true
},
publish: [
{
provider: "github",
owner: "ChrisMichaelPerezSantiago",
repo: "cinecoqui",
releaseType: "draft",
channel: "latest",
url: "cinecoqui.chrismichael.now.sh"
}
]
}
}
}
}
On your github repo, I don't see any new releases after 1.2.0. Did you run yarn electron:build -p always to upload the release to github?
nklayman
on 8 Oct 2019
Hello,
Yes, what happened was that I eliminated them. It was just to test.
But it didn't work out. I had previously made a release in v1.2.1 and
another in v1.2.2.
I downloaded the .exe version v1.2.1 but never in the electronic
application showed me a message to update to v1.2.2
ChrisMichaelPerezSantiago
on 8 Oct 2019
Try following the new auto update guide. It doesn't include instructions for a custom update notifier, but you can start with checkForUpdatesAndNotify, and add the custom notifier after.
nklayman
on 11 Oct 2019
@nklayman ,
_Very grateful that you have made a documentation on this subject and taken from your time to do the implementation._
_I made the changes according to the documentation, and it worked perfectly. Now it shows me the notification when a new release is made._
ChrisMichaelPerezSantiago
on 11 Oct 2019
Related issues
sanch941
·
6Comments
wakamin
·
3Comments
grantdfoster
·
3Comments
HeiShanLaoYao889
·
5Comments
AlexSHoffman
·
3Comments
Most helpful comment
Try this page: https://www.electron.build/configuration/publish
I use this in my vue.config.js:
And run the publish command
vue-cli-service electron:build -p alwayswith the GH_TOKEN prefixed, eg:GH_TOKEN=123 npm run publishTook me a bit to figure all this out, the information is there just spread out.