Sæt din app fra Lovable, Bolt eller en anden AI-bygger på din WebOké-hosting

Har du lavet en app med Lovable, Bolt eller en anden AI-bygger, og vil du lægge den på dit eget domæne hos WebOké? Det kan du sagtens. I denne artikel kan du læse, hvordan du henter koden ud af AI-byggeren, hvordan du bygger og uploader appen, og hvordan GitHub kan gøre det automatisk for dig.

1. Hvilken slags app har du?

Åbn filen package.json i dit projekt. Her kan du se, hvilken slags app det er.

• En statisk app (React med Vite). I package.json står der vite og intet server-framework. Med npm run build laver du en mappe dist med almindelige HTML-, JavaScript- og CSS-filer. Dem uploader du til public_html. Det virker på alle hostingpakker. Mange apps fra Bolt og de ældre apps fra Lovable er bygget sådan.
• En app med sin egen server. Siden 13. maj 2026 laver Lovable apps med TanStack Start: så står der @tanstack/react-start i package.json. Sådan en app kører serverkode og virker derfor ikke som løse filer i public_html. Du sætter den op som Node.js-app (se punkt 6). Det samme gælder andre apps med egen server, fx en Express-backend.
• En app med Supabase eller Lovable Cloud som backend. Databasen, login og funktionerne bliver så hos Supabase eller Lovable. På WebOké lægger du kun forsiden (front-end). Når du bygger, skal du dog angive adressen og den offentlige nøgle til Supabase (se punkt 5).

2. Hent koden ud af AI-byggeren via GitHub

Lovable og Bolt kan lægge dit projekt i dit eget GitHub-repository. Ændringer går så begge veje: det, du ændrer i AI-byggeren, havner i GitHub, og det, du ændrer i GitHub, kommer tilbage i AI-byggeren.

I Lovable:

1. Åbn dit projekt, og gå til Project settings > Git > GitHub.
2. Klik på Add connection, og giv Lovable-appen adgang til din GitHub-konto.
3. Klik på Connect ved Accounts. Lovable opretter et privat repository og holder det opdateret.

Det kan også gøres uden GitHub: med Download codebase under Project settings > Git downloader du koden (kræver et betalt Lovable-abonnement).

I Bolt:

1. Åbn dit projekt, og klik på GitHub-ikonet øverst til højre.
2. Log ind på GitHub, klik på Authorize, og installer Bolts GitHub-app.
3. Skriv et navn til dit repository, og klik på Create repository. Bolt arbejder derefter i branchen main.

3. Byg og upload en statisk app

Du bygger appen på din egen computer. Til det skal du bruge Node.js, version 22 (den nuværende Vite kræver mindst 20.19 eller 22.12).

1. Hent koden: git clone dit repository, eller pak downloadet ud.
2. Åbn en terminal i projektmappen, og installer pakkerne med npm ci (eller npm install, hvis der ikke er nogen package-lock.json).
3. Byg appen med npm run build. Nu er der en mappe dist med en index.html og en mappe assets.
4. Upload indholdet af dist til domains/ditdomæne.dk/public_html med et FTP-program eller med File Manager i DirectAdmin. Upload altså ikke selve mappen dist, og heller ikke kildekoden eller node_modules.
5. Læg .htaccess-filen herunder i public_html.

En app med flere sider (en router) viser adresser i browseren som ditdomæne.dk/om-os. De sider findes ikke som filer på serveren. Genindlæser du sådan en side, eller åbner du linket direkte, får du en 404. Med denne .htaccess-fil sender serveren de adresser til index.html, og appen viser så den rigtige side:

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

Eksisterende filer og mapper viser serveren helt normalt. En manglende fil i assets giver en rigtig 404, så du lettere opdager en fejl. Alt andet går til appen.

4. Læg appen i en undermappe

Vil du ikke have appen på ditdomæne.dk, men på ditdomæne.dk/app? Så skal appen vide det allerede, når du bygger den. Ellers leder browseren efter filerne i /assets i stedet for /app/assets, og skærmen forbliver hvid.

1. Sæt indstillingen base: '/app/' i vite.config.js (eller vite.config.ts).
2. Giv routeren den samme sti. Med React Router gør du det med <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Byg igen, og upload indholdet af dist til public_html/app.
4. Læg den samme fil som ovenfor i public_html/app/.htaccess, men med RewriteBase /app/.

5. Supabase, Lovable Cloud og andre indstillinger (env-variabler)

Indstillinger, der starter med VITE_, som VITE_SUPABASE_URL og VITE_SUPABASE_PUBLISHABLE_KEY (i ældre projekter VITE_SUPABASE_ANON_KEY), bygger Vite ind i JavaScript-filerne, når appen bygges. Du kan ikke ændre dem på serveren bagefter.

• Du finder værdierne i filen .env i dit projekt. Skriv navnene præcis, som de står.
• Findes .env ikke i dit projekt, så opret den selv i projektmappen, før du kører npm run build. Bruger du GitHub Actions, så gem dem som secrets (se punkt 7).
• Har du ændret en værdi, så byg og upload appen igen.

6. En app med sin egen server: som Node.js-app

En app med serverkode, som en TanStack Start-app fra Lovable, sætter du op med Setup Node.js App i DirectAdmin. Hvordan det virker, kan du læse i Aktivér Node.js i DirectAdmin. For en TanStack Start-app gør du sådan her:

1. Byg appen på din computer med NITRO_PRESET=node-server npm run build. Nu har du en mappe .output.
2. Opret en app under Setup Node.js App med Node.js 22 og en mappe uden for public_html, for eksempel apps/myapp.
3. Upload mappen .output til den mappe.
4. Opret i samme mappe en fil start.cjs med denne ene linje, og skriv start.cjs i feltet Application startup file:

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

5. Angiv de indstillinger, serveren har brug for, som SUPABASE_URL og SUPABASE_PUBLISHABLE_KEY, under Environment variables.
6. Klik på Restart. Gør det også efter hver ny upload.

Den lille fil start.cjs er nødvendig, fordi serveren i .output er et moderne JavaScript-modul (.mjs), mens Node.js-miljøet indlæser startfilen på den gamle måde. Giver appen fejl 503, så kig i stderr.log i din apps mappe.

7. Automatisk udrulning med GitHub Actions

Med GitHub Actions bygger GitHub din app ved hver ændring i branchen main og lægger resultatet på din pakke. Da Lovable og Bolt skriver til GitHub, er en ændring fra AI-byggeren online efter få minutter. Git-funktionen i DirectAdmin bygger ikke noget, den lægger kun filer på plads. Til en Vite-app er GitHub Actions derfor mere praktisk.

Adgangskoder og nøgler lægger du aldrig i dit repository, men som secret i GitHub:

1. Åbn dit repository på GitHub, og gå til Settings > Secrets and variables > Actions.
2. Klik på New repository secret, udfyld navn og værdi, og klik på Add secret. Gør det for hvert secret fra den variant, du vælger.
3. Opret filen .github/workflows/deploy.yml i dit repository med et af de to eksempler nedenfor.
4. Tjek efter næste ændring på fanen Actions, om det lykkedes. Med Run workflow kan du også starte den manuelt.

Variant A: via FTPS (alle hostingpakker). Opret en separat FTP-konto til GitHub i DirectAdmin, og vælg Domain ved Root Directory (se Hvordan fungerer FTP hos WebOké?). Secrets: FTP_SERVER (servernavnet på din pakke, f.eks. linux2023.webawere.nl, ikke dit domænenavn), FTP_USERNAME (det fulde navn, f.eks. github@example.com), FTP_PASSWORD og VITE_-værdierne fra din 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/

Variant B: via SSH med rsync (pakker med SSH). SSH er inkluderet i Power Webhost Three og Four, AI Wordpress Three og Power Reseller, på port 1967 og kun med en nøgle (se SSH-adgang og Terminal i DirectAdmin).

1. Opret en separat nøgle til GitHub på din computer, uden adgangskode: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Indsæt indholdet af github-deploy.pub i DirectAdmin under SSH Keys > PASTE KEY.
3. Indsæt indholdet af github-deploy (den private nøgle) i secret SSH_PRIVATE_KEY. Slet derefter filen fra din computer.
4. Kør ssh-keyscan -p 1967 linux2023.webawere.nl, og indsæt outputtet i secret SSH_KNOWN_HOSTS. Så kontrollerer GitHub, at den virkelig forbinder til din server.
5. Opret også SSH_HOST (servernavnet), SSH_USER (dit DA-brugernavn), DOMEIN (f.eks. example.com) og VITE_-værdierne som secret.

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

Bruger du ikke Supabase, så udelad linjerne med VITE_SUPABASE, eller indsæt i stedet VITE_-variablerne fra din egen app. Mislykkes login et par gange, blokerer serveren midlertidigt GitHubs IP-adresse. Tjek så dine secrets, og start workflowet igen.

8. Almindelige fejl

• Forsiden virker, men en genindlæsning eller et direkte link giver en 404. Filen .htaccess fra punkt 3 mangler eller ligger i den forkerte mappe.
• En hvid skærm. Åbn din browsers udviklerværktøjer (F12), og kig under Console eller Network. Ser du 404-fejl på filer i /assets? Så passer stien ikke: Du har uploadet selve mappen dist i stedet for indholdet, eller appen ligger i en undermappe uden den rigtige base (punkt 4).
• Appen indlæses, men login eller data virker ikke, eller du ser en meddelelse som supabaseUrl is required. VITE_-variablerne var der ikke, da appen blev bygget. Sæt dem i .env eller som secret, og byg igen.
• Buildet fejler med en meddelelse om Node.js-versionen. Brug Node.js 22, både på din computer og i workflowet (node-version: 22).
• npm ci fejler. Der er ingen package-lock.json, for eksempel fordi projektet kun har en bun.lock. Kør npm install én gang, og læg den nye package-lock.json i dit repository.
• Der er ingen index.html i buildet. Så er det en app med sin egen server, som TanStack Start. Sæt den op som Node.js-app (punkt 6).

Se også: Forbind med FileZilla (FTP, FTPS og SFTP) og SSH-nøgler og login med SSH.

Udførlig vejledning med skærmbilleder: Opsæt en Node.js-app i DirectAdmin-vejledningen.