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:
- Tooling required to create desktop apps.
- Setting up your project.
- Building a medium blog reader app for your computer.
- Deploying the app.
So let’s get this started!
1. Tooling required to create desktop apps
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.
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.
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.
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:
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:
As you can see we’re importing the modules
BrowserWindow from the
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:
This is just a basic html 5 file that may seem confusing at first. Don’t worry, just focus on the
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:
- Create the stylesheet, import it and setup the HTML.
- Get medium data from the rss feed and process it.
- 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:
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.
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
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:
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:
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
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.
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
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
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!
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:
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:
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
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!