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:
The app is initialized with the following command (in the directory : electron-quick-start):
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:
¦- electron-quick-start/ index.html, main.js, renderer.js, package.json ... ¦- node_modules/
¦- electron/ (plus dependencies)
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:
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.
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.
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:
¦- electron-quick-start/ index.html, main.js, renderer.js, package.json ... ¦- /dist/
¦- index.html app.js ¦- node_modules/
¦- electron/ (plus dependencies)
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:
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:
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:
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.