Building your first Electron app

Electron

Building your very first Electron app

Many applications, back in the day, were made with native windows client. A user will just have to click a desktop icon and voila! Ready to use app. Fast track today, most of the applications are already in the “cloud” and is web based.

Web technology for most of the programmers is easier to learn and very fast to develop. When you know the semantics of the html, css and javascript, you would be able to create a stunning website or a web app.

With the delightful experience of programmers around the world using the web technology for creating stunning websites in just a short time, people from Github thought why not create a cross platform desktop app using the web technologies? And, why not? Then, Electron was born.

At first used with the Atom text editor, now Electron is an open-source desktop application framework for building cross platform desktop apps with JavaScript, HTML, and CSS. It can be bundled with your own favorite javascript framework such as react, angular, vue or others.

For this article, we will create a CMS built with Electron with the flavor of VueJS javascript framework.

What will this article talk about?

• Install Electron-vue
• Create and Delete operations for Posts
• Bootstrap 4 example HTML page

What will this article will NOT talk about?

• API Authentication
• API Authorization
• Compiling to OS specific app (will create another article)
• Signing of production app

Requirements:

• NodeJs
• NPM

Now, lets get to work. Set up the dev env of Electron ready for development.

1. Install the Vue CLI globally — (NodeJS must be installed in your machine)

npm install -g vue-cli

2. Initialize the Electron-Vue. More info here

vue init simulatedgreg/electron-vue my-project

3. Go to my-project and run npm install && npm run dev

Once everything is set up, we can now do our CMS.

Edit the landing route page

Route file in Electron is found in src/renderer/router/index.js.

By default, it has a landing page which we can customize. First, in the file LandingPage.vue remove the inline CSS style and replace with:

List the POSTS

Now, edit the <template> with

Now, remove the contents of the <table>and we will replace it with a dynamic content.

Add the getPost() method in the methodsblock of the script.

If you are not familiar with VueJs’s data and methods, refer here

Then, you need also the createdproperty and the datato render the data from external source

When everything is set up properly, you should have:

Check your console for the logs if it fetches the posts.

It is time to edit and render the dynamic posts from external source.

Edit your table into:

Create a POST

Create a link beside (or anywhere) of the Post title like this:

<h2>Posts <router-link to=”/post” class=”btn btn-sm btn-primary”>Add a post</router-link></h2>

then edit the router file in /src/renderer/router/index.jswith:

After that, when the route definition is created, create the Add Post page like so:

You have created a post!

Delete the POST

Add the delete button on the tablehtml like so:

and create the onDelete()method to remove the post from the saved posts

Try it and see it in action!

Additional

We can set a success message whenever you have deleted a post! Create a data property to hold the message

create the success message in the html

update your delete method to show your message!

Now you have a message whenever you delete a post!

That is it for now! Hope you enjoy this article! See you next time!

You can find the sample app below:

jsdecena/electron-tut

Author: Jeff Simons Decena