A complete VueJS/Vuex Electron Boilerplate with predefined settings for automatic updates, and cross-platform availability and much more

Simplicity is the first step of nature, and the last step of art , by James Bailey

👨‍💻 Technologies

List of technologies used for the VueJS Electron Boilerplate project.

📦 Framework & Tools Used

• vuejs is a progressive framework for building user interfaces.
• vue-hooks⚡️Awesome Vue Hooks.
• vuejs composition api a set of additive, function-based APIs that allow flexible composition of component logic.
• electronjs Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.
• Vue CLI Plugin Electron Builder An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack
• electron-updater This module allows you to automatically update your application. You only need to install this module and write two lines of code! To publish your updates you just need simple file hosting, it does not require a dedicated server.
• electron-icon-builder An icon generator to generate all the icon files needed for electron packaging
• adblocker-electron Electron Adblocker

🔧 Developer usage

Set up project

Before cloning the repo be sure you have installed:

• NODE (version >= 10.16.x)
• NPM (version >= 6.9.x)

Then:

• Choose a folder project in your system and switch in cd [folder path]
• Clone the repo in your folder path git clone https://github.com/ChrisMichaelPerezSantiago/vue-electron-boilerplate.git

---

Installation

In order to install the project and all dependencies, enter in the project folder and run npm install

---

vue.config.js

Predefined settings for windows, but can be configured for other platforms.

In the publish section you should change:

• The value of the owner property to the username you use on github.
• The property value repo repository name on github.

and make value changes in the properties appId, and productName.

to see available options, check out Electron Builder Configuration Options

module.exports = {
  productionSourceMap: false,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.vue-electron-boilerplate.app",
        productName: "vue-electron-boilerplate",
        win: {
          icon: "src/assets/logo.png",
          target: [
            {
              target: "nsis",
              arch: ["x64", "ia32"]
            }
          ]
        },
        nsis:{
          oneClick: false,
          perMachine: true,
          allowToChangeInstallationDirectory: true
        },
        publish: [
          {
            provider: "github",
            owner: "ChrisMichaelPerezSantiago",
            repo: "vue-electron-boilerplate",
            releaseType: "draft",
          }
        ]
      }
    }
  }
}

GH_TOKEN

You should assign an environment variable called GH_TOKEN with the token that github provides you. This is mandatory as it will help to apply automatic updates. For more information visit the Auto Update section for more details.

How to release the application to github?

• First, you must generate the icons that will be used as the logo of the executable icon and the application installation process.

Before generating the icons you should go to the package.json and change the --input path where the icon is located

"electron:generate-icons": "electron-icon-builder --input=./src/assets/logo.png --output=build --flatten"

then ...

npm run electron:generate-icons

• Second, you should create the environment variable named GH_TOKEN and assign the value of the token that github provides you.

• Then with the following command

npm run gh-publish GH_TOKEN

It will perform the build of the application and the release as draf. Now you should go to the repository and you will see that a release draf has created for you.

This is very useful because now the user should not go to the release section to download the new release of the application. It would only be enough to enter the application, and if there is a new version windows will show a notification to perform the update.

Donations

VueJS Electron Boilerplate is an open source project licensed by MIT with continuous development. If you want me to continue maintaining this library and you are interested in continuing to use it, you can help me with a monetary help in the following link:

• One-time donation via PayPal.

These are projects that take a lot of effort and time to maintain. So with your help I will be more motivated to continue maintaining the VueJS Electron Boilerplate project.

🤝 Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request

---

👥 Credits

• Chris Michael (Project Leader, and Developer)

---

💢 Troubleshootings

This is just a personal project created for study / demonstration purpose and to simplify my working life, it may or may not be a good fit for your project(s).

---

❤️ Show your support

Please ⭐ this repository if you like it or this project helped you!
Feel free to open issues or submit pull-requests to help me improving my work.

---

🤖 Author

Chris Michael

You can follow me on github · twitter

---

Copyright © 2020 vue-electron-boilerplate.