Axino + Electron = Desktop App.

Serge Hulne

Follow

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.

• 1 create a new directory and name it myapp (for instance).
• Install Axino :Axino Quickstart

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:

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).

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:

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!