Flytta din app från Lovable, Bolt eller en annan AI-byggare till ditt webbhotell hos WebOké

Har du byggt en app med Lovable, Bolt eller en annan AI-byggare och vill lägga den på din egen domän hos WebOké? Det går bra. I den här artikeln läser du hur du hämtar koden från AI-byggaren, hur du bygger och laddar upp appen och hur GitHub kan göra det automatiskt åt dig.

1. Vilken typ av app har du?

Öppna filen package.json i ditt projekt. Där ser du vilken typ av app det är.

• En statisk app (React med Vite). I package.json står vite och inget serverramverk. Med npm run build skapar du en mapp dist med vanliga HTML-, JavaScript- och CSS-filer. Dem laddar du upp till public_html. Det fungerar på alla webbhotellspaket. Många appar från Bolt och de äldre apparna från Lovable är byggda så.
• En app med egen server. Sedan 13 maj 2026 skapar Lovable appar med TanStack Start: då står @tanstack/react-start i package.json. En sådan app kör serverkod och fungerar därför inte som lösa filer i public_html. Du installerar den som en Node.js-app (se punkt 6). Detsamma gäller andra appar med egen server, till exempel en Express-backend.
• En app med Supabase eller Lovable Cloud som backend. Databasen, inloggningen och funktionerna ligger då kvar hos Supabase eller Lovable. På WebOké lägger du bara framsidan (front-end). När du bygger anger du dock adressen och den publika nyckeln för Supabase (se punkt 5).

2. Hämta koden från AI-byggaren via GitHub

Lovable och Bolt kan lägga ditt projekt i ett eget GitHub-repository. Ändringar går då åt båda hållen: det du ändrar i AI-byggaren hamnar i GitHub, och det du ändrar i GitHub kommer tillbaka till AI-byggaren.

I Lovable:

1. Öppna ditt projekt och gå till Project settings > Git > GitHub.
2. Klicka på Add connection och ge Lovable-appen åtkomst till ditt GitHub-konto.
3. Klicka på Connect under Accounts. Lovable skapar ett privat repository och håller det uppdaterat.

Det går också utan GitHub: med Download codebase under Project settings > Git laddar du ner koden (med ett betalt Lovable-abonnemang).

I Bolt:

1. Öppna ditt projekt och klicka på GitHub-ikonen uppe till höger.
2. Logga in på GitHub, klicka på Authorize och installera Bolts GitHub-app.
3. Ange ett namn på ditt repository och klicka på Create repository. Bolt arbetar sedan i branchen main.

3. Bygg och ladda upp en statisk app

Du bygger appen på din egen dator. Till det behöver du Node.js, version 22 (nuvarande Vite kräver minst 20.19 eller 22.12).

1. Hämta koden: git clone av ditt repository, eller packa upp nedladdningen.
2. Öppna en terminal i projektets mapp och installera paketen med npm ci (eller npm install om det inte finns någon package-lock.json).
3. Bygg appen med npm run build. Nu finns en mapp dist med en index.html och en mapp assets.
4. Ladda upp innehållet i dist till domains/dindoman.se/public_html, med ett FTP-program eller med File Manager i DirectAdmin. Ladda alltså inte upp själva mappen dist, och inte källkoden eller node_modules.
5. Lägg .htaccess-filen nedan i public_html.

En app med flera sidor (en router) visar adresser som dindoman.se/om-oss i webbläsaren. De sidorna finns inte som filer på servern. Om du laddar om en sådan sida eller öppnar länken direkt får du en 404. Med den här .htaccess-filen skickar servern de adresserna till index.html, och appen visar då rätt sida:

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

Befintliga filer och mappar visar servern som vanligt. En fil som saknas i assets ger en riktig 404, så att du lättare upptäcker ett fel. Allt annat går till appen.

4. Lägg appen i en undermapp

Vill du ha appen på dindoman.se/app i stället för på dindoman.se? Då måste appen veta det redan när du bygger den. Annars letar webbläsaren efter filerna i /assets i stället för /app/assets och skärmen förblir vit.

1. Ange alternativet base: '/app/' i vite.config.js (eller vite.config.ts).
2. Ge routern samma sökväg. I React Router gör du det med <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Bygg igen och ladda upp innehållet i dist till public_html/app.
4. Lägg samma fil som ovan i public_html/app/.htaccess, med RewriteBase /app/.

5. Supabase, Lovable Cloud och andra inställningar (env-variabler)

Inställningar som börjar med VITE_, till exempel VITE_SUPABASE_URL och VITE_SUPABASE_PUBLISHABLE_KEY (i äldre projekt VITE_SUPABASE_ANON_KEY), bäddar Vite in i JavaScript-filerna när appen byggs. Du kan inte ställa in dem på servern i efterhand.

• Du hittar värdena i filen .env i ditt projekt. Skriv av namnen exakt.
• Finns det ingen .env i ditt projekt? Skapa den då själv i projektmappen innan du kör npm run build. Med GitHub Actions lägger du in dem som secrets (se punkt 7).
• Har du ändrat ett värde? Bygg och ladda upp appen igen.

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

En app med serverkod, till exempel en TanStack Start-app från Lovable, sätter du upp med Setup Node.js App i DirectAdmin. Hur det fungerar läser du i Aktivera Node.js i DirectAdmin. För en TanStack Start-app gör du så här:

1. Bygg appen på din dator med NITRO_PRESET=node-server npm run build. Nu finns det en mapp .output.
2. Skapa en app i Setup Node.js App, med Node.js 22 och en mapp utanför public_html, till exempel apps/myapp.
3. Ladda upp mappen .output till den mappen.
4. Skapa en fil start.cjs i samma mapp med den här enda raden och ange start.cjs i Application startup file:

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

5. Lägg in de inställningar som servern behöver, till exempel SUPABASE_URL och SUPABASE_PUBLISHABLE_KEY, i Environment variables.
6. Klicka på Restart. Gör det även efter varje ny uppladdning.

Den lilla filen start.cjs behövs eftersom servern i .output är en modern JavaScript-modul (.mjs) medan Node.js-miljön laddar startfilen på det gamla sättet. Ger appen fel 503? Titta då i stderr.log i appens mapp.

7. Automatisk driftsättning med GitHub Actions

Med GitHub Actions bygger GitHub din app vid varje ändring i branchen main och lägger resultatet på ditt paket. Eftersom Lovable och Bolt skriver till GitHub ligger en ändring från AI-byggaren online efter några minuter. Git-funktionen i DirectAdmin bygger ingenting, den lägger bara ut filer. För en Vite-app är GitHub Actions därför smidigare.

Lösenord och nycklar lägger du aldrig i ditt repository, utan som secret i GitHub:

1. Öppna ditt repository på GitHub och gå till Settings > Secrets and variables > Actions.
2. Klicka på New repository secret, fyll i namn och värde och klicka på Add secret. Gör så för varje secret i varianten du väljer.
3. Skapa filen .github/workflows/deploy.yml i ditt repository med ett av de två exemplen nedan.
4. Kontrollera efter nästa ändring på fliken Actions om det har lyckats. Med Run workflow kan du också starta den manuellt.

Variant A: via FTPS (alla webbhotellpaket). Skapa ett separat FTP-konto för GitHub i DirectAdmin och välj alternativet Domain vid Root directory (se Hur fungerar FTP hos WebOké?). Secrets: FTP_SERVER (servernamnet för ditt paket, till exempel linux2023.webawere.nl, inte ditt domännamn), FTP_USERNAME (hela namnet, till exempel github@dindoman.se), FTP_PASSWORD och appens VITE_-värden.

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 (paket med SSH). SSH ingår i Power Webhost Three och Four, AI Wordpress Three och Power Reseller, på port 1967 och endast med nyckel (se SSH-åtkomst och Terminal i DirectAdmin).

1. Skapa en separat nyckel för GitHub på din dator, utan lösenord: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Lägg innehållet i github-deploy.pub i DirectAdmin under SSH Keys > PASTE KEY.
3. Lägg innehållet i github-deploy (den privata nyckeln) i secret SSH_PRIVATE_KEY. Ta sedan bort filen från din dator.
4. Kör ssh-keyscan -p 1967 linux2023.webawere.nl och lägg utdatan i secret SSH_KNOWN_HOSTS. Så kontrollerar GitHub att den verkligen ansluter till din server.
5. Lägg även till SSH_HOST (servernamnet), SSH_USER (ditt DA-användarnamn), DOMEIN (till exempel dindoman.se) och VITE_-värdena 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/"

Använder du inte Supabase kan du ta bort raderna med VITE_SUPABASE eller ersätta dem med din egen apps VITE_-variabler. Misslyckas inloggningen några gånger blockerar servern GitHubs IP-adress tillfälligt. Kontrollera då dina secrets och starta workflowen igen.

8. Vanliga fel

• Startsidan fungerar, men en uppdatering eller en direktlänk ger 404. Filen .htaccess från punkt 3 saknas eller ligger i fel mapp.
• En vit skärm. Öppna webbläsarens utvecklarverktyg (F12) och titta under Console eller Network. Ser du 404-fel på filer i /assets? Då stämmer inte sökvägen: du har laddat upp själva mappen dist i stället för innehållet, eller så ligger appen i en undermapp utan rätt base (punkt 4).
• Appen laddas, men inloggning eller data fungerar inte, eller så ser du ett meddelande som supabaseUrl is required. VITE_-variablerna fanns inte med vid bygget. Lägg in dem i .env eller som secret och bygg igen.
• Bygget misslyckas med ett meddelande om Node.js-versionen. Använd Node.js 22, både på din dator och i workflowet (node-version: 22).
• npm ci misslyckas. Det finns ingen package-lock.json, till exempel för att projektet bara har en bun.lock. Kör npm install en gång och lägg in den nya package-lock.json i ditt repository.
• Det finns ingen index.html i bygget. Då är det en app med egen server, som TanStack Start. Konfigurera den som en Node.js-app (punkt 6).

Se även: Ansluta med FileZilla (FTP, FTPS och SFTP) och SSH-nycklar och inloggning med SSH.

Utförlig guide med skärmbilder: Konfigurera en Node.js-app i DirectAdmin-guiden.