Premiers pas

Prérequis

Connaître TypeScript, le CSS (ou SCSS) et un peu le HTML vous aidera, mais ce n’est pas indispensable pour commencer.

Si vous ne les connaissez pas encore, un assistant IA fait très bien l’affaire : x4js lui fournit de quoi écrire du code juste, et vous apprenez en lisant ce qu’il produit. Voir Travailler avec un assistant IA.

Outils :

1. Node.js 24 ou plus récent est recommandé.
2. Un éditeur qui comprend TypeScript, par exemple VS Code.
3. Electron, Tauri ou NW.js si vous voulez faire une application de bureau : la même application tourne dans le navigateur ou dans une de ces enveloppes.

Il n’y a rien d’autre à installer : la ligne de commande x4js fait partie du paquet. Elle gère la création, la construction et le rechargement à chaud de vos projets.

Créer un projet

npx x4js create my-app

La commande crée le dossier my-app à partir d’un modèle et installe ses dépendances. Trois modèles existent :

Modèle	Contenu
app	Application x4js standard. C’est le modèle par défaut.
minimal	Application x4js minimale.
hosted	Application x4js prête pour Vercel, Netlify ou Cloudflare Pages. Voir Mettre en ligne.

Pour en choisir un : npx x4js create my-app --template minimal. La liste à jour s’obtient avec npx x4js templates.

Lancer le projet

cd my-app
npm install
npm run dev

Le projet est construit, puis servi en local. L’adresse s’affiche dans le terminal :

x4js       2.3.11
mode       dev
config     C:\work\my-app\x4.config.json
outdir     C:\work\my-app\bin
server     http://127.0.0.1:8000

La page se recharge à chaque modification d’un fichier source. Un changement qui ne touche que le CSS est appliqué sans rechargement.

Ce que contient un projet

Fichier	Rôle
package.json	Dépendance à x4js et scripts dev et build.
x4.config.json	Fichiers d’entrée, dossier de sortie, fichiers à copier.
tsconfig.json	Réglages TypeScript.
src/index.html	La page, qui charge main.js et main.css.
src/main.ts	Le point d’entrée de l’application.
src/main.scss	Les styles de l’application.

Une première interface

Tout part de src/main.ts. Voici une application complète : un libellé et un bouton qui le modifie.

import { Application, Button, Label, VBox } from 'x4js';

import "./main.scss";

const status = new Label( { text: "Ready" } );

const app = new Application( );

app.setMainView( new VBox( {
  content: [
    status,
    new Button( { label: "Run", click: ( ) => status.setText( "Done" ) } ),
  ]
}) );

Enregistrez le fichier : la page se met à jour toute seule.

Construire pour la production

npm run build

Le résultat est écrit dans le dossier bin, minifié et sans cartes de source. Ce dossier est vidé avant chaque construction : n’y gardez aucun fichier écrit à la main.

Mettre en ligne

Une application x4js construite est un site statique : n’importe quel hébergeur peut servir le dossier bin.

Le modèle hosted est le modèle app avec, en plus, la configuration pour Vercel et Netlify. La page Mettre en ligne détaille la publication sur Vercel, Netlify, Cloudflare Pages ou un autre hébergeur.

Pour aller plus loin

• Mettre en ligne : publier l’application chez un hébergeur.
• Design d’interfaces : découper un écran en conteneurs.
• Composants et événements : écrire ses propres vues.
• Ligne de commande : toutes les options de x4js et les clés de x4.config.json (en anglais).
• Référence de l’API.