Building your first Electron app
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.
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.
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
Now, lets get to work. Set up the dev env of Electron ready for development.
- 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
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
Now, remove the contents of the
<table>and we will replace it with a dynamic content.
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
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!
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:
Electron app sample for the Medium tutorial. Contribute to jsdecena/electron-tut development by creating an account on…
Author: Jeff Simons Decena