Premiers pas

Premiers pas

Nous allons voir ici comment écrire notre première application.

1. Mise en place du projet
2. Installation de X4
3. Outils de compilation
4. Debug / Production

Prérequis

Evidément vous devez connaitre TypeScript, vous devez maîtriser le CSS et un peu le HTML. Pour les applications desktop, vous devrez connaitre Electron (ne vous inquiétez pas, tout le travail a été mâché par les templates).

Outils:

1. Node v24 min
2. VS Code
3. Electron si vous voulez développer des applications desktop (https://www.electronjs.org/)

Pour simplifier la compilations nous allons utiliser x4build qui est l’outil de compilation x4js en ligne de commande.

x4build permet de créer des projets x4 très rapidement, il va gérer la création, la compilation et le live update de nos projets.

npm init
npm install x4build

ou utiliser npx ; npx est un outil qui télécharge globalement des modules npm et qui les exécute, nous n’utiliserons pas cette méthode.

Initialisation du projet

x4build permet de créer un projet en partant de zéro très rapidement.

x4build create demo --type=html

et voilà votre projet demo a été créé, voici la hiérarchie crée.

demo
│   package.json
│   readme.md
|   tsconfig.json
|   .gitignore
│
└───src
│   │   app.less
│   │   app.ts
|   |   index.html
│
└───node_modules
    │   ...

Création de notre application.

Tout est prêt. Ouvrons VSCode dans le répertoire demo. Nous pouvons lancer la compilation avec Shift+Ctrl+B (sous windows).

Cette commande compile nos sources en mode watch, toute modification des sources recompile le projet.

Par défaut, le projet est compilé en mode debug: pas de compression ni mangle

:: X4BUILD ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

type.........:  html
entry point..:  src/index.html
outdir.......:  C:\temp\test\bin
watch........:  yes
mode.........:  debug
serve........:  yes
hmr..........:  yes
monitor......:  no

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

★ HMR started
★ server listening on http://127.0.0.1:9876
★ watching for modifications on C:\temp\test\src

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

√ build done
✎ changes detected, hmr updated

Vous pouvez ouvrir votre browser sur le lien donné (127.0.0.1:9876)

Pour bien le voir en action, modifiez le .ts ou le .less, le projet sera recompilé et la page rafraichie sans aucune action de votre part.