Ihre App aus Lovable, Bolt oder einem anderen KI-Builder auf Ihr WebOké-Hosting bringen

Sie haben eine App mit Lovable, Bolt oder einem anderen KI-Builder erstellt und möchten sie auf Ihrer eigenen Domain bei WebOké veröffentlichen? Das ist möglich. In diesem Artikel erfahren Sie, wie Sie den Code aus dem KI-Builder holen, wie Sie die App bauen und hochladen und wie GitHub das automatisch für Sie erledigen kann.

1. Welche Art von App haben Sie?

Öffnen Sie die Datei package.json in Ihrem Projekt. Daran erkennen Sie, um welche Art von App es sich handelt.

• Eine statische App (React mit Vite). In package.json steht vite und kein Server-Framework. Mit npm run build erstellen Sie einen Ordner dist mit gewöhnlichen HTML-, JavaScript- und CSS-Dateien. Diese laden Sie in public_html hoch. Das funktioniert mit jedem Hostingpaket. Viele Apps aus Bolt und die älteren Apps aus Lovable sind so aufgebaut.
• Eine App mit eigenem Server. Lovable erstellt seit dem 13. Mai 2026 Apps mit TanStack Start: Dann steht @tanstack/react-start in package.json. Eine solche App führt Servercode aus und funktioniert daher nicht als einzelne Dateien in public_html. Sie richten sie als Node.js-App ein (siehe Punkt 6). Dasselbe gilt für andere Apps mit eigenem Server, etwa mit einem Express-Backend.
• Eine App mit Supabase oder Lovable Cloud als Backend. Die Datenbank, die Anmeldung und die Funktionen bleiben dann bei Supabase oder Lovable. Bei WebOké veröffentlichen Sie nur die Oberfläche (das Frontend). Beim Bauen geben Sie allerdings die Adresse und den öffentlichen Schlüssel von Supabase mit (siehe Punkt 5).

2. Den Code über GitHub aus dem KI-Builder holen

Lovable und Bolt können Ihr Projekt in einem eigenen GitHub-Repository ablegen. Änderungen werden dann in beide Richtungen übertragen: Was Sie im KI-Builder ändern, landet in GitHub, und was Sie in GitHub ändern, landet wieder im KI-Builder.

In Lovable:

1. Öffnen Sie Ihr Projekt und gehen Sie zu Project settings > Git > GitHub.
2. Klicken Sie auf Add connection und gewähren Sie der Lovable-App Zugriff auf Ihr GitHub-Konto.
3. Klicken Sie unter Accounts auf Connect. Lovable erstellt ein privates Repository und hält es aktuell.

Es geht auch ohne GitHub: Mit Download codebase unter Project settings > Git laden Sie den Code herunter (mit einem kostenpflichtigen Lovable-Abonnement).

In Bolt:

1. Öffnen Sie Ihr Projekt und klicken Sie oben rechts auf das GitHub-Symbol.
2. Melden Sie sich bei GitHub an, klicken Sie auf Authorize und installieren Sie die GitHub-App von Bolt.
3. Geben Sie einen Namen für das Repository ein und klicken Sie auf Create repository. Bolt arbeitet danach im Branch main.

3. Eine statische App bauen und hochladen

Sie bauen die App auf Ihrem eigenen Computer. Dafür benötigen Sie Node.js in Version 22 (das aktuelle Vite erfordert mindestens 20.19 oder 22.12).

1. Holen Sie den Code: per git clone Ihres Repositorys oder durch Entpacken des Downloads.
2. Öffnen Sie ein Terminal im Projektordner und installieren Sie die Pakete mit npm ci (oder npm install, wenn keine package-lock.json vorhanden ist).
3. Bauen Sie die App mit npm run build. Nun gibt es einen Ordner dist mit einer index.html und einem Ordner assets.
4. Laden Sie den Inhalt von dist nach domains/ihredomain.de/public_html hoch, mit einem FTP-Programm oder mit dem Dateimanager in DirectAdmin. Laden Sie also nicht den Ordner dist selbst hoch und auch nicht den Quellcode oder node_modules.
5. Legen Sie die unten stehende .htaccess-Datei in public_html ab.

Bei einer App mit mehreren Seiten (einem Router) zeigt der Browser Adressen wie ihredomain.de/ueber-uns an. Diese Seiten existieren nicht als Datei auf dem Server. Wenn Sie eine solche Seite neu laden oder den Link direkt öffnen, erhalten Sie einen 404-Fehler. Mit dieser .htaccess-Datei leitet der Server diese Adressen an index.html weiter, und die App zeigt dann die richtige Seite an:

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

Vorhandene Dateien und Ordner liefert der Server ganz normal aus. Eine fehlende Datei in assets ergibt einen echten 404-Fehler, sodass Sie einen Fehler leichter erkennen. Alles andere wird an die App weitergeleitet.

4. Die App in einem Unterordner veröffentlichen

Sie möchten die App nicht unter ihredomain.de, sondern unter ihredomain.de/app veröffentlichen? Dann muss die App das schon beim Bauen wissen. Andernfalls sucht der Browser die Dateien in /assets statt in /app/assets, und der Bildschirm bleibt weiß.

1. Setzen Sie in vite.config.js (oder vite.config.ts) die Option base: '/app/'.
2. Geben Sie dem Router denselben Pfad mit. Bei React Router geschieht das mit <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Bauen Sie die App neu und laden Sie den Inhalt von dist nach public_html/app hoch.
4. Legen Sie in public_html/app/.htaccess dieselbe Datei wie oben ab, mit RewriteBase /app/.

5. Supabase, Lovable Cloud und weitere Einstellungen (Umgebungsvariablen)

Einstellungen, die mit VITE_ beginnen, wie VITE_SUPABASE_URL und VITE_SUPABASE_PUBLISHABLE_KEY (in älteren Projekten VITE_SUPABASE_ANON_KEY), schreibt Vite beim Erstellen in die JavaScript-Dateien. Auf dem Server können Sie diese nachträglich nicht mehr festlegen.

• Sie finden die Werte in der Datei .env Ihres Projekts. Übernehmen Sie die Namen genau so.
• Ist in Ihrem Projekt keine .env vorhanden, legen Sie diese selbst im Projektordner an, bevor Sie npm run build ausführen. Bei GitHub Actions hinterlegen Sie die Werte als Secret (siehe Punkt 7).
• Haben Sie einen Wert geändert, erstellen und laden Sie die App erneut hoch.

6. Eine App mit eigenem Server: als Node.js-App

Eine App mit Servercode, wie eine TanStack Start-App aus Lovable, richten Sie in DirectAdmin über Setup Node.js App ein. Wie das funktioniert, lesen Sie in Node.js in DirectAdmin aktivieren. Für eine TanStack Start-App gehen Sie so vor:

1. Erstellen Sie die App auf Ihrem Computer mit NITRO_PRESET=node-server npm run build. Danach gibt es einen Ordner .output.
2. Legen Sie unter Setup Node.js App eine App an, mit Node.js 22 und einem Ordner außerhalb von public_html, zum Beispiel apps/myapp.
3. Laden Sie den Ordner .output in diesen Ordner hoch.
4. Erstellen Sie im selben Ordner eine Datei start.cjs mit dieser einen Zeile und tragen Sie start.cjs unter Application startup file ein:

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

5. Hinterlegen Sie die Einstellungen, die der Server benötigt, wie SUPABASE_URL und SUPABASE_PUBLISHABLE_KEY, unter Environment variables.
6. Klicken Sie auf Restart. Tun Sie das auch nach jedem neuen Upload.

Die kleine Datei start.cjs ist nötig, weil der Server aus .output ein modernes JavaScript-Modul ist (.mjs) und die Node.js-Umgebung die Startdatei auf die alte Weise lädt. Zeigt die App einen Fehler 503, sehen Sie in der Datei stderr.log im Ordner Ihrer App nach.

7. Automatisch bereitstellen mit GitHub Actions

Mit GitHub Actions baut GitHub Ihre App bei jeder Änderung im Branch main und überträgt das Ergebnis auf Ihr Paket. Da Lovable und Bolt nach GitHub schreiben, ist eine Änderung aus dem KI-Builder dann nach wenigen Minuten online. Die Git-Funktion in DirectAdmin baut nichts, sie legt nur Dateien ab. Für eine Vite-App ist GitHub Actions daher praktischer.

Passwörter und Schlüssel speichern Sie nie in Ihrem Repository, sondern als Secret in GitHub:

1. Öffnen Sie Ihr Repository auf GitHub und gehen Sie zu Settings > Secrets and variables > Actions.
2. Klicken Sie auf New repository secret, geben Sie den Namen und den Wert ein und klicken Sie auf Add secret. Wiederholen Sie das für jedes Secret der Variante, die Sie wählen.
3. Legen Sie in Ihrem Repository die Datei .github/workflows/deploy.yml mit einem der beiden Beispiele unten an.
4. Prüfen Sie nach der nächsten Änderung im Tab Actions, ob es geklappt hat. Mit Run workflow starten Sie den Workflow auch manuell.

Variante A: über FTPS (alle Hosting-Pakete). Legen Sie in DirectAdmin ein separates FTP-Konto für GitHub an und wählen Sie bei Stammverzeichnis die Option Domain (siehe Wie funktioniert FTP bei WebOké?). Secrets: FTP_SERVER (der Servername Ihres Pakets, zum Beispiel linux2023.webawere.nl, nicht Ihr Domainname), FTP_USERNAME (der vollständige Name, zum Beispiel github@ihredomain.de), FTP_PASSWORD sowie die VITE_-Werte Ihrer App.

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: über SSH mit rsync (Pakete mit SSH). SSH ist in Power Webhost Three und Four, AI Wordpress Three und Power Reseller enthalten, auf Port 1967 und nur mit einem Schlüssel (siehe SSH-Zugang und das Terminal in DirectAdmin).

1. Erstellen Sie auf Ihrem Computer einen separaten Schlüssel für GitHub, ohne Passwort: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Fügen Sie den Inhalt von github-deploy.pub in DirectAdmin unter SSH-Schlüssel > SCHLÜSSEL EINFÜGEN ein.
3. Speichern Sie den Inhalt von github-deploy (den privaten Schlüssel) im Secret SSH_PRIVATE_KEY. Löschen Sie die Datei danach von Ihrem Computer.
4. Führen Sie ssh-keyscan -p 1967 linux2023.webawere.nl aus und speichern Sie die Ausgabe im Secret SSH_KNOWN_HOSTS. So prüft GitHub, dass es sich wirklich mit Ihrem Server verbindet.
5. Legen Sie außerdem SSH_HOST (den Servernamen), SSH_USER (Ihren DA-Benutzernamen), DOMEIN (zum Beispiel ihredomain.de) und die VITE_-Werte als Secret an.

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/"

Wenn Sie Supabase nicht verwenden, lassen Sie die Zeilen mit VITE_SUPABASE weg oder tragen Sie dort die VITE_-Variablen Ihrer eigenen App ein. Schlägt die Anmeldung mehrmals fehl, sperrt der Server die IP-Adresse von GitHub vorübergehend. Prüfen Sie dann Ihre Secrets und starten Sie den Workflow erneut.

8. Häufige Fehler

• Die Startseite funktioniert, aber beim Neuladen oder über einen direkten Link erscheint ein 404-Fehler. Die .htaccess-Datei aus Punkt 3 fehlt oder liegt im falschen Ordner.
• Ein weißer Bildschirm. Öffnen Sie die Entwicklertools Ihres Browsers (F12) und sehen Sie unter Console oder Network nach. Sehen Sie 404-Fehler bei Dateien in /assets? Dann stimmt der Pfad nicht: Sie haben den Ordner dist selbst hochgeladen statt seines Inhalts, oder die App liegt in einem Unterordner ohne die richtige base (Punkt 4).
• Die App lädt, aber die Anmeldung oder die Daten funktionieren nicht, oder Sie sehen eine Meldung wie supabaseUrl is required. Die VITE_-Variablen waren beim Erstellen des Builds nicht vorhanden. Legen Sie sie in .env oder als Secret an und erstellen Sie den Build erneut.
• Der Build schlägt mit einer Meldung zur Node.js-Version fehl. Verwenden Sie Node.js 22, sowohl auf Ihrem Computer als auch im Workflow (node-version: 22).
• npm ci schlägt fehl. Es gibt keine package-lock.json, zum Beispiel weil das Projekt nur eine bun.lock hat. Führen Sie einmal npm install aus und legen Sie die neue package-lock.json in Ihrem Repository ab.
• Im Build ist keine index.html enthalten. Dann handelt es sich um eine App mit eigenem Server, wie TanStack Start. Richten Sie diese als Node.js-App ein (Punkt 6).

Siehe auch: Verbindung mit FileZilla herstellen (FTP, FTPS und SFTP) und SSH-Schlüssel und Anmelden per SSH.

Ausführliche Erklärung mit Screenshots: Eine Node.js-App einrichten in der DirectAdmin-Anleitung.