Mettre en ligne sur votre hébergement WebOké votre application créée avec Lovable, Bolt ou un autre générateur d'applications IA

Vous avez créé une application avec Lovable, Bolt ou un autre générateur IA et vous souhaitez la mettre en ligne sur votre propre domaine chez WebOké ? C'est possible. Dans cet article, vous découvrirez comment récupérer le code depuis le générateur IA, comment compiler et téléverser l'application, et comment GitHub peut s'en charger automatiquement pour vous.

1. Quel type d'application avez-vous ?

Ouvrez le fichier package.json de votre projet. Il vous indique de quel type d'application il s'agit.

• Une application statique (React avec Vite). Le fichier package.json contient vite et aucun framework serveur. La commande npm run build crée un dossier dist contenant de simples fichiers HTML, JavaScript et CSS. Vous les téléversez dans public_html. Cela fonctionne avec toutes les offres d'hébergement. De nombreuses applications Bolt et les anciennes applications Lovable sont construites de cette façon.
• Une application avec son propre serveur. Depuis le 13 mai 2026, Lovable crée des applications avec TanStack Start : le fichier package.json contient alors @tanstack/react-start. Une telle application exécute du code côté serveur et ne fonctionne donc pas sous forme de simples fichiers dans public_html. Vous la mettez en place en tant qu'application Node.js (voir le point 6). Il en va de même pour les autres applications disposant de leur propre serveur, comme un backend Express.
• Une application avec Supabase ou Lovable Cloud comme backend. La base de données, la connexion et les fonctions restent alors chez Supabase ou Lovable. Sur WebOké, vous hébergez uniquement l'interface (le front-end). Lors de la compilation, vous devez toutefois fournir l'adresse et la clé publique de Supabase (voir le point 5).

2. Récupérer le code depuis le générateur IA via GitHub

Lovable et Bolt peuvent enregistrer votre projet dans votre propre dépôt GitHub. Les modifications sont alors synchronisées dans les deux sens : ce que vous modifiez dans le générateur IA arrive dans GitHub, et ce que vous modifiez dans GitHub revient dans le générateur IA.

Dans Lovable :

1. Ouvrez votre projet et accédez à Project settings > Git > GitHub.
2. Cliquez sur Add connection et autorisez l'application Lovable à accéder à votre compte GitHub.
3. Sous Accounts, cliquez sur Connect. Lovable crée un dépôt privé et le maintient à jour.

Vous pouvez aussi vous passer de GitHub : avec Download codebase dans Project settings > Git, vous téléchargez le code (avec un abonnement Lovable payant).

Dans Bolt :

1. Ouvrez votre projet et cliquez sur l'icône GitHub en haut à droite.
2. Connectez-vous à GitHub, cliquez sur Authorize et installez l'application GitHub de Bolt.
3. Saisissez un nom pour le dépôt et cliquez sur Create repository. Bolt travaille ensuite dans la branche main.

3. Compiler et téléverser une application statique

Vous compilez l'application sur votre propre ordinateur. Pour cela, vous avez besoin de Node.js, version 22 (la version actuelle de Vite requiert au minimum la version 20.19 ou 22.12).

1. Récupérez le code : faites un git clone de votre dépôt ou décompressez le téléchargement.
2. Ouvrez un terminal dans le dossier du projet et installez les paquets avec npm ci (ou npm install s'il n'y a pas de package-lock.json).
3. Compilez l'application avec npm run build. Vous obtenez alors un dossier dist contenant un fichier index.html et un dossier assets.
4. Téléversez le contenu de dist dans domains/votredomaine.nl/public_html, à l'aide d'un logiciel FTP ou du Gestionnaire de fichiers de DirectAdmin. Ne téléversez donc pas le dossier dist lui-même, ni le code source ou node_modules.
5. Placez le fichier .htaccess ci-dessous dans public_html.

Une application comportant plusieurs pages (un routeur) affiche dans le navigateur des adresses comme votredomaine.nl/a-propos. Ces pages n'existent pas sous forme de fichiers sur le serveur. Si vous actualisez une telle page ou ouvrez directement le lien, vous obtenez une erreur 404. Grâce à ce fichier .htaccess, le serveur redirige ces adresses vers index.html, et l'application affiche alors la bonne page :

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^assets/ - [R=404,L]
RewriteRule ^ index.html [L]

Le serveur affiche normalement les fichiers et dossiers existants. Un fichier manquant dans assets renvoie une véritable erreur 404, ce qui vous permet de repérer plus facilement une erreur. Tout le reste est transmis à l'application.

4. Placer l'application dans un sous-dossier

Vous souhaitez placer l'application non pas sur votredomaine.nl mais sur votredomaine.nl/app ? L'application doit alors le savoir dès la compilation. Sinon, le navigateur cherche les fichiers dans /assets au lieu de /app/assets et l'écran reste blanc.

1. Dans vite.config.js (ou vite.config.ts), définissez l'option base: '/app/'.
2. Indiquez le même chemin au routeur. Avec React Router, utilisez <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Compilez à nouveau et téléversez le contenu de dist dans public_html/app.
4. Placez dans public_html/app/.htaccess le même fichier que ci-dessus, avec RewriteBase /app/.

5. Supabase, Lovable Cloud et autres paramètres (variables d'environnement)

Les paramètres qui commencent par VITE_, comme VITE_SUPABASE_URL et VITE_SUPABASE_PUBLISHABLE_KEY (VITE_SUPABASE_ANON_KEY dans les projets plus anciens), sont intégrés par Vite dans les fichiers JavaScript lors de la compilation. Vous ne pouvez plus les définir ultérieurement sur le serveur.

• Vous trouverez les valeurs dans le fichier .env de votre projet. Reprenez les noms exactement tels quels.
• Si le fichier .env ne figure pas dans votre projet, créez-le vous-même dans le dossier du projet avant d'exécuter npm run build. Avec GitHub Actions, définissez-les comme secret (voir le point 7).
• Si vous avez modifié une valeur, compilez et téléversez à nouveau l'application.

6. Une application avec son propre serveur : en tant qu'application Node.js

Une application avec du code serveur, comme une application TanStack Start issue de Lovable, se met en place via Setup Node.js App dans DirectAdmin. Pour savoir comment procéder, consultez Activer Node.js dans DirectAdmin. Pour une application TanStack Start, procédez comme suit :

1. Compilez l'application sur votre ordinateur avec NITRO_PRESET=node-server npm run build. Un dossier .output est alors créé.
2. Créez une application dans Setup Node.js App, avec Node.js 22 et un dossier situé en dehors de public_html, par exemple apps/monapp.
3. Téléversez le dossier .output dans ce dossier.
4. Dans ce même dossier, créez un fichier start.cjs contenant cette seule ligne, puis indiquez start.cjs dans Application startup file :

   import('./.output/server/index.mjs');

5. Définissez les paramètres dont le serveur a besoin, comme SUPABASE_URL et SUPABASE_PUBLISHABLE_KEY, dans Environment variables.
6. Cliquez sur Restart. Faites-le également après chaque nouveau téléversement.

Le petit fichier start.cjs est nécessaire, car le serveur de .output est un module JavaScript moderne (.mjs) et l'environnement Node.js charge le fichier de démarrage selon l'ancienne méthode. Si l'application renvoie une erreur 503, consultez le fichier stderr.log dans le dossier de votre application.

7. Déployer automatiquement avec GitHub Actions

Avec GitHub Actions, GitHub compile votre application à chaque modification de la branche main et place le résultat sur votre hébergement. Comme Lovable et Bolt écrivent dans GitHub, une modification faite dans le générateur IA est alors en ligne après quelques minutes. La fonction Git de DirectAdmin ne compile rien, elle se contente de déposer des fichiers ; pour une application Vite, GitHub Actions est donc plus pratique.

Ne placez jamais de mots de passe ni de clés dans votre dépôt : enregistrez-les plutôt comme secrets dans GitHub.

1. Ouvrez votre dépôt sur GitHub et allez dans Settings > Secrets and variables > Actions.
2. Cliquez sur New repository secret, saisissez le nom et la valeur, puis cliquez sur Add secret. Faites-le pour chaque secret de la variante que vous choisissez.
3. Créez dans votre dépôt le fichier .github/workflows/deploy.yml avec l'un des deux exemples ci-dessous.
4. Après la modification suivante, vérifiez dans l'onglet Actions que tout s'est bien passé. Avec Run workflow, vous pouvez aussi le lancer manuellement.

Variante A : via FTPS (tous les hébergements). Dans DirectAdmin, créez un compte FTP distinct pour GitHub, en choisissant l'option Domain pour Directory (voir Comment fonctionne le FTP chez WebOké ?). Secrets : FTP_SERVER (le nom du serveur de votre hébergement, par exemple linux2023.webawere.nl, et non votre nom de domaine), FTP_USERNAME (le nom complet, par exemple github@votredomaine.nl), FTP_PASSWORD, ainsi que les valeurs VITE_ de votre application.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - uses: SamKirkland/FTP-Deploy-Action@v4.4.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          protocol: ftps
          port: 21
          local-dir: ./dist/
          server-dir: public_html/

Variante B : via SSH avec rsync (hébergements avec SSH). Le SSH est inclus dans Power Webhost Three et Four, AI Wordpress Three et Power Reseller, sur le port 1967 et uniquement avec une clé (voir Accès SSH et Terminal dans DirectAdmin).

1. Sur votre ordinateur, créez une clé distincte pour GitHub, sans mot de passe : ssh-keygen -t ed25519 -f github-deploy -N "".
2. Collez le contenu de github-deploy.pub dans DirectAdmin sous SSH Keys > PASTE KEY.
3. Placez le contenu de github-deploy (la clé privée) dans le secret SSH_PRIVATE_KEY. Supprimez ensuite le fichier de votre ordinateur.
4. Exécutez ssh-keyscan -p 1967 linux2023.webawere.nl et placez le résultat dans le secret SSH_KNOWN_HOSTS. GitHub vérifie ainsi qu'il se connecte bien à votre serveur.
5. Ajoutez aussi comme secrets SSH_HOST (le nom du serveur), SSH_USER (votre nom d'utilisateur DA), DOMEIN (par exemple votredomaine.nl) et les valeurs VITE_.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - name: Deploy
        env:
          SSH_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_USER: ${{ secrets.SSH_USER }}
          DOMEIN: ${{ secrets.DOMEIN }}
        run: |
          mkdir -p ~/.ssh
          printf '%s\n' "$SSH_KEY" > ~/.ssh/deploy_key
          chmod 600 ~/.ssh/deploy_key
          printf '%s\n' "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
          rsync -rlptz --delete --exclude=.well-known --exclude=cgi-bin \
            -e "ssh -p 1967 -i ~/.ssh/deploy_key" \
            dist/ "$SSH_USER@$SSH_HOST:domains/$DOMEIN/public_html/"

Si vous n'utilisez pas Supabase, supprimez les lignes contenant VITE_SUPABASE ou remplacez-les par les variables VITE_ de votre propre application. Si la connexion échoue plusieurs fois, le serveur bloque temporairement l'adresse IP de GitHub. Vérifiez alors vos secrets et relancez le workflow.

8. Erreurs fréquentes

• La page d'accueil fonctionne, mais un rafraîchissement ou un lien direct renvoie une erreur 404. Le fichier .htaccess du point 3 est manquant ou se trouve dans le mauvais dossier.
• Un écran blanc. Ouvrez les outils de développement de votre navigateur (F12) et consultez l'onglet Console ou Network. Vous voyez des erreurs 404 sur des fichiers dans /assets ? Le chemin n'est alors pas correct : vous avez téléversé le dossier dist lui-même au lieu de son contenu, ou l'application se trouve dans un sous-dossier sans la bonne valeur base (point 4).
• L'application se charge, mais la connexion ou les données ne fonctionnent pas, ou vous voyez un message tel que supabaseUrl is required. Les variables VITE_ n'étaient pas présentes lors de la compilation. Placez-les dans .env ou en tant que secret, puis relancez la compilation.
• La compilation échoue avec un message concernant la version de Node.js. Utilisez Node.js 22, sur votre ordinateur et dans le workflow (node-version: 22).
• npm ci échoue. Il n'y a pas de package-lock.json, par exemple parce que le projet ne contient qu'un bun.lock. Exécutez une fois npm install et ajoutez le nouveau package-lock.json à votre dépôt.
• Il n'y a pas de index.html dans la build. Il s'agit alors d'une application avec son propre serveur, comme TanStack Start. Configurez-la en tant qu'application Node.js (point 6).

Voir aussi : Se connecter avec FileZilla (FTP, FTPS et SFTP) et Clés SSH et connexion via SSH.

Explications détaillées avec captures d'écran : Configurer une application Node.js dans le manuel DirectAdmin.