Getting Started With Axino

Serge Hulne

Follow

Oct 27, 2020 · 4 min read

A crash course in app development using Axino (step-by-step tutorial).

Link : Axino vs Vue, React, Angular.

About Axino

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:

(Check the demo here: https://serge-hulne.medium.com/build-a-desktop-calculator-app-with-axino-and-electron-in-one-minute-459c9d29d72d)

Quick start

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)

Step 1:

Create a directory for your app:

mkdir myapp (Linux and Mac)

or use your favorite “file manager” to create a dedicated directory.

Step 2:

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:

myapp
    ¦-- node_modules
        ¦-- axino

Step 3:

In a code editor of your choice (I recommend VSCode, because it helps you with JavaScript, HTML, Typescript), via its numerous plugins, copy and paste :

• 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
    - hello.ts
      ¦-- /node_modules
          ¦-- /axino

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:

parcel hello.html

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.
• process the Typescript code of the hello.ts app : compile it and bundle it transparently into one single JavaScript file for your browser.
• Display the link at which you may see and test your app, like:

http://localhost:1234

Congratulations: your app is now available at the address http://localhost:1234 in your browser on your local PC !

Step 5:

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:

Simply type:

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:

myapp
   - hello.html
   - hello.ts      ¦-- /dist/ <-------------[your app is here] 
      ¦-- /node_modules/
          ¦-- /axino/

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.

Happy programming!

:-)

More examples:

For more examples, check:

https://github.com/serge-hulne/axino/tree/main/examples

In particular, there is an example of a calculator app, implemented with Axino:

https://github.com/serge-hulne/axino/tree/main/examples/calculator

This example will be detailed in the next article of these series about Axino as a step-by-step tutorial.

More tutorials:

https://serge-hulne.medium.com/getting-started-with-axino-4584bcdb99ca

https://serge-hulne.medium.com/axino-vs-vue-js-part-1-the-basics-f58872f54022

https://serge-hulne.medium.com/axino-vs-vue-react-angular-d312fdaf9277

https://serge-hulne.medium.com/axino-electron-desktop-app-9bfd8169b661

https://serge-hulne.medium.com/build-a-desktop-calculator-app-with-axino-and-electron-in-one-minute-459c9d29d72d