Axino + Electron = Desktop App.

Serge Hulne
Oct 30, 2020 · 4 min read

Developing, testing, debugging a desktop app the easy way.

How to build a desktop app : the simple, fast, efficient way.

Step 1 : Installing Axino.

Step 2: Installing Electron.

  • In the current directory, myapp, install Electron:
  • In a terminal, in your myapp directory type:
git clone https://github.com/electron/electron-quick-start

This will install a minimalist in myapp, like so:

- myapp/
¦- electron-quick-start/

The app is initialized with the following command (in the directory : electron-quick-start):

npm install

This command triggers the download of Electron and it’s dependencies in the node_modules sub-directory of the current working directory (“electron-quick-start”).

The configuration of the project is now:

- myapp/
¦- electron-quick-start/
index.html, main.js, renderer.js, package.json ... ¦- node_modules/
¦- electron/ (plus dependencies)
¦- axino/

The files index.html, main.js, renderer.js have been downloaded by the git clone command, above and are part of the electron-quick-start demo.

Step 3: Checking the electron-quick-start demo app.

Checking the demo app is done by typing the command:

npm start

in the directory where your package.json file is located.

This will start the following (minimalist) “Hello world” app:

Image for post
Image for post

Congratulations : Your “Hello World” demo app is running!

Step 4: Customizing your Hello World app.

How an Electron app works:

  • The message appearing on the Hello World app is coded in the render.js file:
  • The render.js file is connected to the app via the index.html file.
  • Basically, an Electron app is a JavaScript app running in a minimalist browser, Chromium (think of Chromium as a “mini Chrome”, totally customizable, programmable).
Chrome, Chromium
Chrome, Chromium
Chromium, Chrome.

Writing your own app using Electron therefore boils down to swapping the index.html file and the renderer.js file with your own app files.

The original “Hello World” index.html file:

The original “Hello World” renderer.js file

Step 4a: Writing your own customized Axino app.

For the sake of simplicity, we will use the simple app we have created in the previous article : Getting Started With Axino, namely, the following Typescript app (app.ts)

and the corresponding customized index.html file file:

This modified index.html file now points to your own app.ts and no longer to the original renderer.js demo file which came with the “Hello World” app.

As explained in the Axino Quick Start Article, compiling and bundling this Typescript code into a JavaScript app, using Parcel, is done by typing in a terminal:

parcel build index.html --no-source-maps --public-url .

(please note: the full stop “.” at the end of the command. It stands for “current directory”). It is not punctuation, it is part of the command. :-)

Running the parcel command, above will create a local “/dist” directory. This directory now contains an app.js file and a local copy of the associated index.htm file, like so:

- myapp/
¦- electron-quick-start/
index.html, main.js, renderer.js, package.json ... ¦- /dist/
¦- index.html app.js
¦- node_modules/
¦- electron/ (plus dependencies)
¦- axino/

Since our app files now reside in the ./dist/ sub-directory and no longer in the “root” directory of our app, we have to modify the main.js app accordingly, since the the main.js file basically configures our app:

Basically, we have changed:

mainWindow.loadFile(‘index.html’)into:mainWindow.loadFile(‘index.html’)

For our default Axino CSS file to play nicely with Electron, it is best to bundle it with the app as follows:

npm install picnic --save

This command creates a local copy of our CSS files in the assets directory of our app (node_modules), along with the Electron files and the Axino files.

This is why our customized index.html points to a local copy of the CSS file (rather than a URL as in the early Quick Start example).

<link rel="stylesheet" href="./node_modules/picnic/picnic.min.css">

Step 5: Running our customized app

In order to run our brand new app, we type:

npm start

Which launches our brand new app:

Image for post
Image for post

The tab on the right-hand side of the app’s window is used as a console for debugging the app (console.log() messages and error messages will appear there).

Once your app is full tested and debugged, it is possible to start the app without displaying the debugging console (aka “Dev Tools”).

This is done by commenting out the line in the main.js file which handles the console:

// mainWindow.webContents.openDevTools()

Congratulations! you have completed the coding of your first Desktop app !

The next chapter in these series with deal with the topic: How to bundle your app in order to distribute it.

Stay tuned!

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Serge Hulne

Written by

Author, scientist (Physics PhD), philosophy, Sci-Fi, thrillers, humor, blues and Irish music, green energy, origins of consciousness.

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Serge Hulne

Written by

Author, scientist (Physics PhD), philosophy, Sci-Fi, thrillers, humor, blues and Irish music, green energy, origins of consciousness.

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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