The ultimate guide to create desktop apps for javascript entrepreneurs

Creating desktop applications was something considered hard not that long ago because you had to learn a language specifically for that purpose such as Java or C++. Luckily, now web developers can create excellent desktop applications using tools that convert your javascript code into valid apps. Let’s see how…

Before getting into the content, make sure to check my the ultimate desktop app guide here merunas.io/desktop-app-mastery.html where you’ll find the expanded edition to this guide with 5 projects and monetization tactics.

Here are the topic that we’ll cover in this tutorial:

  1. Tooling required to create desktop apps.
  2. Setting up your project.
  3. Building a medium blog reader app for your computer.
  4. Deploying the app.

So let’s get this started!

1. Tooling required to create desktop apps

To create desktop apps as a web developer, you need to understand the main options available out there so that you don’t waste time on tools that can’t provide you with what you need. Here is the breakdown of the 3 best desktop javascript frameworks for building desktop apps to give you an idea of what’s out there:

Electron

This is the tool we’ll use since it’s the most popular and powerful. It has been around for years, used by lots of companies including slack, atom, discord, intuit and many others.

It has been created by the github team so it has a strong reputation and quality code behind it. You can rest assured this framework will continue growing and dominating more projects in the future.

They use the chrome engine underneath which means your app will run extremely fast regardless of the computer used.

With it you can build product fast and easily since it uses javascript, html and css which is excellent for the many web developers out there that want to expand their skillset by being able to develop for desktop platforms.

NW.JS

Another great product but with much less popularity. It allows you to build desktop apps using node.js. It was known as the node-webkit engine because it uses the same technology that browsers like chrome and safari use.

Proton Native

For those of you familiar with react and react native, proton native is an excellent choice because it uses the react framework while allowing you to use all the react.js libraries available out there.

It has even better performance than electron at specific tasks because they implement their own engine underneath so you can expect near-native performance.

Great for those familiar with react that want more control at the expense of longer development times.

Now that you know the best options out there for building desktop apps as a web developer, let’s start right away with Electron since it’s the best for beginners and for most use cases.

2. Setting up your project with Electron.js

One of the great things about this framework is that you build your code once and you can deploy it to windows, mac and linux instantly.

First thing you’ll need is to download node.js, a project that allows you to run javascript code on your computer, outside a browser. You can get it here: https://nodejs.org/en/

Once the install is complete, you should be able to run node -v and npm -v on your command line or terminal.

When it comes to the initial files required, all you need is to setup a node project. To do that, go ahead and create a folder named blog-reader-electron on your desktop. Then execute npm init -y . You’ll see a package.json file being generated on that folder.

Then open the package.json file on your text editor. In my case I like to use atom.io as the text editor. Change the scripts section to the following, keep the rest the same:

Note: don’t delete the other data, just update your scripts section since we’ll need it later to run our desktop app. Here’s how your package.json should look like:

package.json

Next thing you have to do is install electron which is the command line utility to manage our projects as a dev dependency:

Next, create an index.js file in your root project folder. This is the main file used to run our desktop app as the starting point. Add this code inside index.js to display a basic window with an initial view:

index.js

As you can see we’re importing the modules app and BrowserWindow from the electron dependency.

App is used to setup the application we are creating while BrowserWindow is to generate a desktop window.

Now you have to create an index.html file at the root of your project, meaning outside any sub-folders with the following code:

index.html

This is just a basic html 5 file that may seem confusing at first. Don’t worry, just focus on the title and body tags where all the content will go. As you can see the title is My electron app and the body contains a heading with the same content.

Now your setup is done! Run the app by going to the folder in your terminal and executing npm start to open the app. You’ll see something like this pop up:

As you can see the title tag is showing up there while the heading is inside the box.

Continue with the next section where we’ll begin creating a very interesting blog reading application:

3. Building a medium blog reader app for your computer

The project that you’ll create today is a blog reader app that shows medium articles for a specific publication and allows you to access to them without leaving your app.

This is to save you time and provide you an app where you know you’ll get the content you’re looking for without getting distracted with all the usual attention grabbers from websites. Just you and the content you love in a lightweight app.

Just to hype you up, here’s how the app will look like in the end:

Interested in building your own? Keep reading…

Here are the 3 steps you’ll follow to get it done in record time:

  1. Create the stylesheet, import it and setup the HTML.
  2. Get medium data from the rss feed and process it.
  3. Create the final design and functionality.

Let’s do this. We’ll have a title for the particular publication we want to read with a list of 9 articles that you can expand by clicking on the link or in the picture. Once clicked, it will open an iframe with the content.

1. Create the stylesheet, import it and setup the HTML

Create a new file in your root folder called style.css which is the one where all of our CSS will go. Remember that we use web languages to create the desktop app.

Now in your index.html import it like this:

Then update your html file with a different body so that you include the required components:

index.html

We removed the heading to include a button that allows us to close the current article. Then we included a div with the id root which will be used to insert the entire content.

Finally the script source inside.js is a special script that will execute inside the page which in this case is the desktop app.

The initial index.js file is outside the scope of our application which means it can’t access the current page’s contents, that’s why we use another script called inside.js.

2. Get medium data from the rss feed and process it

Now that the html is setup, we can start getting data from medium to display the recent articles in our application. For that we’ll use RSS feeds which is just the blog converted to json or xml to be processed by apps like ours.

So go ahead and create a function called getMediumArticles in your inside.js with this content:

inside.js

As you can see the function is async because we want to use fetch which returns a promise to get the blog articles.

We are doing a GET request to rss2json.com which converts our publication’s url https://forge.medium.com/feed into a json object. We’ll use that to display our customised article blocks.

Next, generate the html required to display the items that we received into a structured block:

inside.js

It may look messy but it makes perfect sense once you start looking at what’s going on. I just added a variable named html that contains the string of html data.

First we setup the main title which comes from the response.feed.description this is the main heading that shows up at the top of the desktop app:

Then I’ve included an iframe section which is where the article content will be displayed after clicking on a box. Here’s how it will look like:

The close button is there to hide the article so you can continue scrolling for new pieces of content since you can’t scroll outside the iframe if you’re on top of it.

I’ve tried different solutions and the iframe is the most effective one because you can remove it easily and use it quickly.

After that, I’ve included a div with a class item-container to contain all the article boxes. The elements are generated using a for loop:

Each item is a div that contains a title and a content. The content includes the author name and the description which is the article’s intro and main photo.

In my case it’s called items[i].description and it contains the data sent from medium with their default html format.

Finally we close the html with the remaining div like so:

After that we insert the generated html into our page like this:

Now you should be seeing your blocks being inserted into the page. However the complete functionality is not done yet, we need a way to display the entire article once the user wants to read it. We’ll do that by replacing the src parameter from our inserted iframe which will display the piece of content.

Here’s how:

This findElement function selects all the clickable elements in each article box to detect when something is clicked and loads the iframe with the right data.

For instance, when you click on the box image, you’ll open the corresponding article on the iframe above to see the entire article.

This initial part can be confusing:

But it only means: “See if the main title has been rendered already and if not, try to execute this function again”. This is required to make sure we are able to access the inserted article boxes because it takes a few seconds to render from the data we’ve received.

Then, inside the else block, we are simply selecting all the clickable elements in all boxes and adding a click event listener to detect when they are pressed so that we can open the iframe with the new src content.

Just for clarification pay attention to this part:

There we are detecting whether the user clicked on an image or an actual link because as you know, the user can open the article in those 2 ways. So we’re simply selecting extracting the corresponding href to then use it into the iframe.

Now we can include the function findElement inside our getMediumArticles to detect link clicks on each box. Here’s the final inside.js file:

final inside.js

Notice how we added an event listener to the close button while executing the findElement() function at the end of getMediumArticles(). That should be enough to display all the items and open the article reader when clicked on each one.

3. Create the final design and functionality

Now let’s finish the design to make it look great. You can create your own but here’s my style.css so that you can get the same appearance:

Open the desktop app with yarn start or npm start in your terminal and you’ll see the working application!

final desktop app

4. Deploying the app

The final step is to deploy the app so that you get an executable file for your mac or pc computer and to be able to distribute it so that others can download it.

To do that, install the following package:

That will give you access to the electron-packager globally which is the right tool for the job.

Then, go to your project folder and execute:

By executing electron-packager . medium-reader what you’re doing is telling the app to compile the current project (that’s why there’s a dot right there) and naming the app medium-reader . You can use whatever name you want.

Once the execution is done, you’ll see your final application. I’m using mac so I got a medium-reader-darwin-x64 folder that contains the multiple files:

- LICENSE
- LICENSES.chromium.html
- medium-reader.app
- version

The main file is medium-reader.app which is the one you can click on and execute it. The app won’t be installed unless you move it manually to your Applications/ folder in mac.

If you’re using windows you’ll get an .exe file that can be opened the same way.

That’s it! You now know how to create desktop apps using electron with web technologies in record time. If you want to learn more, check this advanced guide I’m creating with 5 extra projects to build up your resume, gain more skills and land better jobs as a web and desktop app developer: https://merunas.io/desktop-app-mastery.html

https://merunas.io/desktop-app-mastery.html

You’ll learn how to create advanced desktop apps and how to monetize them to actually generate revenue for yourself and your business.

Be sure to clap the article 50 times if you found it useful and let me know any issues you find to fix them. Also share your progress so we can see your results, it’s always great to see others trying to learn new things!

Blockchain expert. Get my new Ethereum book on Amazon: https://amzn.to/2KBBNyu and my previous one here: https://merunas.org/book

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store