Front-end Developer Wojciech works with American actor, Chuck Norris, to demonstrate how easy it is to create a desktop app with Electron and Vue.
Hello, youve stumbled into the old Cogblog archives
We've switched our blogging focus to our new Innerworks content, where tech community members can share inspiring stories, content, and top tips. Because of this, old Cogworks blogs will soon be deleted from the site, so enjoy it while you can. A few of these might refer to images in the text, but those have been deleted already sorry. Some of these subjects will return, some aren't relevant anymore, and some just don't fit the unbiased community initiative of Innerworks.
If you'd like to take on this subject yourself please submit a new blog!
Farewell Cogworks Blog 💚
Electron.js is a runtime framework based on Node.js and Chromium that allows you to write multi-platform applications using JavaScript, HTML and CSS. We encounter Electron.js all the time in applications such as Slack, Skype, WhatsApp, VS Code, Spotify, WordPress Desktop and many more!
In this post, I will show a simple example of using Electron.js with Vue.js.
First, let's take a look at the process behind Electron applications.
Main process
The process that runs package.js’s main script is called the main process. The main process has the power of Node.js APIs and allows access to the system's native resources. An Electron app always has one main process.
Renderer process
Electron uses Chromium’s multi-process architecture to display web pages. Each web page in Electron runs its own separate process, which is called a renderer process. In most cases, you will also have a single renderer process, which is usually just a JavaScript application combined with your preferred JS framework.
You could say that the renderer is a "frontend" layer, while the main process (the layer behind) acts as a kind of “backend” to an Electron application.
Communication
When it comes to communication between the main process and renderer process, Electron provides two IPC (Inter-Process Communication) modules called ipcMain and ipcRenderer:
- The ipcMain module is used to communicate asynchronously from the main process to the renderer process.
- The ipcRenderer module communicates asynchronously from the renderer process to the main process.
Main → Renderer
Example use case:
- When you read information using Node.js (for example, from the local file) and want to send it to the renderer,
Renderer ← Main
Example use cases:
- When you want to save data to the file (or access any file on the file system).
- When you want to change the size of BrowserView after the window is resized,
There is one unique case that is not so obvious to understand at first glance. Sometimes, you have to communicate between elements like WebView (yes, every WebView has its own process) and the renderer that contains this WebView element (which is called host).
In such cases, we can use ipcRenderer and method sendToHost. It works the same as ipcRenderer.send method, but it sends events to the host page instead of the main process.
Example use cases:
- When you want to send the height of the HTML document displayed inside the WebView component to the host page.
- When you want to send a number of image tags to the host page.
That’s enough theory for now; let’s go to practice and create a simple application using Electron and Vue.js!
Project setup
The project is set up manually by installing Electron.js, as described here.
Next, install your preferred JavaScript framework (if you need any) for the web application, which will be wrapped by Electron and serve as a desktop application.
To make your life easier, use - Vue CLI Plugin Electron Builder, a Vue plugin created by Noah Klyman. It will do all the work with the configuration and integration of Vue and Electron.
As the creator of the plugin says, it extends the regular config and works with all plugins and customised web pack options. It organises the file structure of our app for you and makes the build process for all platforms much easier and faster!
To use this plugin, simply install:
1. Vue.js using Vue CLI: vue create image-checker
2. cd image-checker
3. Vue add electron-builder
After this step, your project is ready for development:
1. Run yarn serve to start vue application
2. Run yarn electron: serve to start electron desktop application
You should see something like this:
Voila! Now, you have set up a project with a simple Electron.js application that displays content from a web application created in Vue.js!
In the next step, let's create a Vue application that displays random Chuck Norris quotes; why not? (Grab the quotes from this free API)
First, create a file called TheQuoteWrapper.vue inside the components directory. Before you start to write this new component, install the Axios library, which will be needed to get random Chuck’s quote from the API.
npm install --save Axios
or
Yarn add Axios (if you use Yarn)
This is how the TheQuoteWrapper.vue looks:
<template>
<div>
<img class=“logo” src=“https://media.giphy.com/media/L0HIznJ2hn4WndRshY/source.gif”>
<h1>Chuck Norris Quotes</h1>
<TheQuote :quote=“quote” /> <button @click=“loadRandomQuote()“>Load another quote</button>
</div>
</template><script>
import axios from ‘axios’
import TheQuote from ‘./TheQuote.vue’export default {
name: ‘TheQuoteWrapper’,
components: {
TheQuote
},
data () {
return {
quote: ‘’,
apiUrl: ‘https://api.chucknorris.io/jokes/random’
}
},
created () {
this.loadRandomQuote()
},
methods: {
async loadRandomQuote () {
const response = await axios.get(this.apiUrl) this.quote = response. Data. value
}
}}
</script><style scoped>
.logo {
width: 200px;
}
</style>
As you can see, there is a listener triggered by clicking the event on the button. It evokes the async method loadRandomQuote, which will get a random quote from the API I mentioned above and be passed on to another component called TheQuote.
Additionally, you can trigger the loadRandomQuote function, also in the created lifecycle hook, to load the first quote from the API at the start of the application.
TheQuote.vue is really simple andValue like this:
<template>
<p class=“quote”>{{ quote }}</p>
</template>
<script>
export default {
name: ‘TheQuote’,
props: {
quote: String
}
}
</script>
<style>
.quote {
padding: 0 40px;
}
</style>
After this, we should be able to see a working desktop application that displays random Chuck quotes!
That’s all for now.
Hopefully, you can see how easy it is (and how much fun it can be) to create a desktop application using Electron with any JavaScript framework!
Thank You
Innerworks and Cogworks are proud to partner with Community TechAid who aim to enable sustainable access to technology and skills needed to ensure digital inclusion for all. Any support you can give is hugely appreciated.