A crash course in app development using Axino (step-by-step tutorial).
Axino is a component library, alternative to frameworks like Vue, React, Angular for front-end app development. Small footprint. Pure HTML5 / CSS / TS.
If you come from the Java world, think “Swing” GUI components library.
If you come from the Python world, think “Tkinter”.
Axino on Electron:
In order to get started with Axino and to write your first “hello world” minimalist app, here is a step-by step tutorial:
Step 1 Download the tools:
Tool 1: npm
Npm is required to install Axino, Typescript and Parcel:
npm is installed as explained on the npm homepage: https://www.npmjs.com/get-npm
Be sure to download the version of npm which is compatible with your platform: Mac, Windows or Linux.
Tool 2: Typescript
Once npm is installed on your system, all the other tools can be installed via npm:
Typescript is installed by entering the following npm command in a terminal:
npm install -g typescript
Tool 3: Parcel
Parcel is installed in the same way by entering:
npm install -g parcel-bundler
Running the “hello word” example (and other examples)
Create a directory for your app:
mkdir myapp (Linux and Mac)
or use your favorite “file manager” to create a dedicated directory.
In the directory in question, run the command:
npm init -y
npm i Axino
in order to have a local “node_modules” directory installed by npm (which in turn will contain the Axino directory) , like this:
- hello.ts (the type source for the app)
- hello.html (the html skeleton of the app)
The content of your directory should look like:
myapp - hello.html
That is your myapp directory contains now:
- the source code file: hello.html
- the source code file: hello.ts
- the directory : node_modules
- the directory : axino (inside the dir node_modules)
- Quick reminder for the newbies: node_modules and its content have been intalled in one go with the command:
npm i Axino
as explained in “step 2”, above.
Step 4 : Testing the app locally:
Using the parcel command which we have installed previously, we can type:
This command will, on-the-fly:
- read the hello.html file which contains the actual hello.ts app.
- locate the link to hello.ts inside of hello.html.
- Display the link at which you may see and test your app, like:
Congratulations: your app is now available at the address http://localhost:1234 in your browser on your local PC !
Beyond testing the app on a local machine: Publishing it on a server.
If you have your own internet server, a server app on your machine or an external server rented from a provider, the procedure to bundle your source files into an app is as follows:
parcel build index.html --no-source-maps --public-url .
parcel will bundle your app into the local “dist” directory inside your current app development directory, ready to be copied to your server:
- hello.ts ¦-- /dist/ <-------------[your app is here]
How to debug your app as you are in the process of developing it.
As you have compiled your first app and as it is made available to your local browser (via parcel) as explained above at the address http://localhost:1234, you can debug it by hitting the key combination “Ctrl-Shift-J” on your keyboard (as your app is displayed in your browser). This will open a debugging console for your app, displaying your logged messages and the error messages, if any, linked to your app’s code.
For more examples, check:
In particular, there is an example of a calculator app, implemented with Axino:
This example will be detailed in the next article of these series about Axino as a step-by-step tutorial.