Mettre en ligne

Une application x4js construite est un site statique : des fichiers HTML, JavaScript et CSS, sans serveur à faire tourner. npm run build les écrit dans le dossier bin, et n’importe quel hébergeur peut servir ce dossier.

Le modèle hosted

Le modèle hosted est le modèle app avec, en plus, la configuration pour Vercel et Netlify :

npx x4js create my-app --template hosted

Il ajoute deux fichiers à la racine du projet. Chacun indique à l’hébergeur la commande de construction, le dossier à publier, et de répondre avec index.html aux adresses qui ne sont pas des fichiers.

vercel.json

{
    "buildCommand": "npm run build",
    "outputDirectory": "bin",
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/index.html"
        }
    ]
}

netlify.toml

[build]
command = "npm run build"
publish = "bin"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Vous pouvez supprimer le fichier de l’hébergeur que vous n’utilisez pas.

Votre projet existe déjà ? Copiez simplement le fichier de votre hébergeur à sa racine : le modèle ne contient rien d’autre de particulier.

Depuis un dépôt Git

C’est la manière habituelle. Poussez le projet dans un dépôt Git, puis importez ce dépôt chez l’hébergeur. Chaque git push est ensuite construit et mis en ligne.

Hébergeur	Configuration
Vercel	vercel.json, rien à régler.
Netlify	netlify.toml, rien à régler.
Cloudflare Pages	Dans les réglages du projet : commande de construction npm run build, dossier de sortie bin.

Depuis votre machine, sans Git

Chaque hébergeur fournit une ligne de commande qui met le projet en ligne depuis son dossier. Au premier lancement, elle vous demande de vous connecter, puis de créer ou de choisir le projet.

Hébergeur	Commande	Construction
Vercel	npx vercel --prod	Faite par Vercel.
Netlify	npx netlify deploy --prod --dir bin	Faite par la commande, avant l’envoi.
Cloudflare Pages	npx wrangler pages deploy bin	Pas faite : lancez npm run build avant.

Pour Cloudflare Pages, créez le projet une fois avec npx wrangler pages project create.

Routes sans #

Par défaut, Router utilise des adresses à dièse (/#/users/12). Elles fonctionnent chez tous les hébergeurs, sans rien configurer.

Avec new Router(false), les adresses sont de vrais chemins (/users/12). L’hébergeur doit alors répondre à tous ces chemins avec index.html.

Le modèle hosted contient déjà cette règle : c’est le bloc rewrites de vercel.json et le bloc [[redirects]] de netlify.toml, montrés plus haut. Cloudflare Pages l’applique de lui-même, tant que le projet ne contient pas de fichier 404.html.

Une adresse qui ne correspond à aucune route reçoit elle aussi index.html : traitez ce cas avec l’événement error du Router.

Un autre hébergeur

Rien n’oblige à passer par l’un de ces trois services. Lancez npm run build et copiez le contenu du dossier bin sur votre serveur ou chez l’hébergeur de votre choix.

Si vous utilisez des routes sans #, configurez ce serveur pour qu’il réponde aux chemins inconnus avec index.html.