Build Electron Applications With Vue.js And Webpack

If you’re like me, you thought you’d try to build a cross-platform desktop application using the very popular Electron framework as well as the very popular Vue.js JavaScript framework. At first glance it might seem as easy as defining an Electron configuration, but in reality, a little more needs to be done when using Webpack to build the project.

I had written a few tutorials a while back around Electron, and even one with Vue.js, but in that example the Vue CLI and Webpack were not part of the equation. In this tutorial, we’re going to see how to create a new Vue.js application using the Vue CLI, configure it for use with Electron, and then deploy it in all its glory.

Using NW.js To Convert A Website Into A Desktop Application

A while ago, I ran into a situation where I needed to make web application into a desktop application for a corporate client. The idea was to leverage as much of the existing app as possible, while still meeting the requirement of having a “desktop” application.

As a primarily Java developer, I had no idea how to do this, so I started doing research and found out that my best bet would be using JavaScript technologies.

Enter NW.js, a powerful mashup of Google Chrome and Node.js that allows you to package a web application to be run on the desktop.

Use Angular To Create A Cross-Platform Stellar XLM Desktop Wallet

With Android and iOS so obtainable and development so easy, people often forget the importance of desktop applications. I have a phone and tablet, but I depend on my desktop applications much more. However, the development of these applications are not difficult.

With frameworks like Electron, developers can create cross-platform desktop applications with JavaScript and HTML. Take the example I wrote about previously in the article titled, Create a Cross-Platform Desktop DigiByte DGB Wallet with Angular and Electron. I demonstrated how to leverage a very popular framework to create a cryptocurrency wallet.

DigiByte isn’t the only popular blockchain on the internet. I’ve also been looking into Stellar because of all the buzz it has been receiving from popular companies like Stripe.

We’re going to see how to create a Stellar XLM wallet for Mac, Windows, and Linux using Angular and Electron.

Create A Cross-Platform Desktop DigiByte DGB Wallet With Angular And Electron

A few weeks back I had written an article titled, Send And Manage DigiByte DGB Coins With Node.js, which had explained how to interact with DigiByte coins via Node.js and the CLI. We saw how to keep track of a wallet, compare against the market value, and send DGB to other wallets. The catch here was that it was all CLI based and not particularly user friendly.

A popular solution towards adding a GUI to a Node.js application comes in the flavor of Electron. With Electron you’re essentially packaging a web application that can interact with native platform APIs.

Since I’m a fan of Angular, we’re going to see how to create a fancy DigiByte wallet using Electron, Node.js, and Angular.

Create A Cross-Platform Desktop Ripple XRP Wallet With Vue.js And Electron

As you are probably aware, I’ve been interested in cryptocurrency and the blockchain lately. I haven’t necessarily been buying anything, but I’ve been doing a lot of watching as it has all been very interesting so far.

I decided, a few weeks ago, to purchase some Ripple (XRP) because it seems like it could do great things for the banking industry. When it came to keeping track of my XRP, there wasn’t really anything available. There is Ripple Wallet, but after having used it for a little bit, it seemed buggy. That got me thinking. What if I were to build my own wallet?

Ripple actually released a Node.js library called ripple-lib on GitHub which makes it very easy to interact with XRP. What makes things even better is that the cross-platform desktop application framework, Electron, uses Node.js.

We’re going to see how to create a cross-platform desktop application using Node.js, Vue.js, and Electron to keep track of our Ripple and how much our wallet is worth.

OTP Safe for Chrome Released

If you’ve been keeping up with my work, you’ll remember in 2014 I released an app called OTP Safe for Android and iOS. This was a hybrid application created with Ionic Framework, that manages time-based one-time passwords (TOTP) commonly used for two-factor authentication (2FA).

I’m starting 2015 off with a bang by releasing my first ever Google Chrome extension. OTP Safe for Chrome was designed to mimic the functionality of the iOS and Android versions, but for laptop and desktop computers.