I decided to repair the Travis CI build. What started as a small fix end up as setting up the whole automatic release system connected with GitHub releases. It sounds really cool, but the truth is that the electron-builder provided everything what we need. Then our task is “only” to set up everything correctly. So, today I will give you a step by step guide.
First thinks first, we have to install the electron-builder which allows us to create installers for all platforms.
npm install electron-builder --save-dev
After this simple install we can start by updating the
package.json file. We can start by adding two scripts
postinstall isn’t necessary as long as you have only one package.json file. The
dist should include any additional preprocessing (I have to run Webpack) and the build itself which creates the packages.
postinstall should stay as it is, but you can change the
npm run build by your own preprocessing in the
dist. If we want automatic publishing, we have to add
--publish onTagOrDraft which will create the draft release (read more about it here).
Another thing which we have to add in
package.json is whole new
There shouldn’t be a lot of troubles in this section, so I will explain only the tricky parts (full documentation). The
linux relate to certain platforms and you can set here the target package type and a few other things. If you want automatic updates you should use
squirrel instead of
nsis, but squirrel supports only
--x64 build. In
files you have to provide all files that have to be included in order to run your app (In
dist/ folder I have the
bundle.js produced by Webpack).
Last thing which I add is directories which specify the output directory. You also have to include the
One more and last thing before setting the AppVeyor and Travis CI are icons. All icons should be provided in the
build folder. I recommend using tool as https://iconverticons.com/online for creating all icon formats and resolutions (there are also other options, for example: https://www.websiteplanet.com/webtools/favicon-generator)
AppVeyor and Travis CI
You may think that we don’t need both Travis CI an AppVeyor. However, we want to build packages for three different platforms, so we have to use AppVeyor for Windows and Travis CI for Linux and OS X builds. In this tutorial I expect that you already registered and connected them with your repo.
Here is the simplified version (including everything necessary) of my
The nice thing about our
npm run dist script is that it builds package for the current platform, so we don’t need any additional settings. The only thing which you have to change here is the
GH_TOKEN. To generate this token you have to visit the https://github.com/settings/tokens and create token with at least ‘public_repo’ permission. Before publishing this token you have to encrypt it using: https://ci.appveyor.com/tools/encrypt and then place it in
GH_TOKEN. It should look something like this:
And that’s basically it. This should produce our Windows package and automatically send it to our GitHub draft release.
Travis CI can be setup can be done in a similar way. We only have to include both OS X and Linux (some of the packages may be unnecessary, but it works like this ?) in our
As you can see there is no
GH_TOKEN variable, but we still need it. So, generate another token or use the old one (it has to be unencrypted). Then go to Travis CI and then to the Settings of your repo. Here you should see an Environment Variables section where you create a new variable with name:
GH_TOKEN and value of your token (Don’t worry, the value wouldn’t be included in the public log).
And that’s it! ? You can go and push your first commit and watch your first build. But be patient, because OS X starts really slowly on Travis CI — but it is free.
Setting the electron builder is pretty easy if you have the right travis.yml and appveyor.yml. The only problem is with the code signing, which I need in order to do automatic updates on Mac. But you can sign your code only on Mac and I don’t own one. And I’m not able to get one anytime soon. On the other side, everything else is working correctly ?