Legg appen din fra Lovable, Bolt eller en annen KI-bygger på WebOké-hostingen din

Har du laget en app med Lovable, Bolt eller en annen KI-bygger og vil legge den på ditt eget domene hos WebOké? Det går fint. I denne artikkelen leser du hvordan du henter koden ut av KI-byggeren, hvordan du bygger og laster opp appen, og hvordan GitHub kan gjøre dette automatisk for deg.

1. Hva slags app har du?

Åpne filen package.json i prosjektet ditt. Der ser du hva slags app det er.

• En statisk app (React med Vite). I package.json står vite og ikke noe serverrammeverk. Med npm run build lager du en mappe dist med vanlige HTML-, JavaScript- og CSS-filer. Dem laster du opp til public_html. Dette fungerer på alle webhotellpakker. Mange apper fra Bolt og de eldre appene fra Lovable er bygget slik.
• En app med egen server. Siden 13. mai 2026 lager Lovable apper med TanStack Start: da står @tanstack/react-start i package.json. En slik app kjører serverkode og fungerer derfor ikke som løse filer i public_html. Du setter den opp som en Node.js-app (se punkt 6). Det samme gjelder andre apper med egen server, for eksempel en Express-backend.
• En app med Supabase eller Lovable Cloud som backend. Databasen, innloggingen og funksjonene blir da værende hos Supabase eller Lovable. Hos WebOké legger du bare ut forsiden (front-end). Når du bygger, oppgir du likevel adressen og den offentlige nøkkelen til Supabase (se punkt 5).

2. Hent koden ut av KI-byggeren via GitHub

Lovable og Bolt kan legge prosjektet ditt i ditt eget GitHub-repository. Endringer går da begge veier: det du endrer i KI-byggeren havner i GitHub, og det du endrer i GitHub kommer tilbake i KI-byggeren.

I Lovable:

1. Åpne prosjektet og gå til Project settings > Git > GitHub.
2. Klikk på Add connection og gi Lovable-appen tilgang til GitHub-kontoen din.
3. Klikk på Connect under Accounts. Lovable oppretter et privat repository og holder det oppdatert.

Det går også uten GitHub: med Download codebase under Project settings > Git laster du ned koden (krever et betalt Lovable-abonnement).

I Bolt:

1. Åpne prosjektet og klikk på GitHub-ikonet øverst til høyre.
2. Logg inn på GitHub, klikk på Authorize og installer GitHub-appen til Bolt.
3. Skriv inn et navn på repositoryet og klikk på Create repository. Bolt jobber deretter i branchen main.

3. Bygg og last opp en statisk app

Du bygger appen på din egen datamaskin. Til det trenger du Node.js, versjon 22 (dagens Vite krever minst 20.19 eller 22.12).

1. Hent koden: git clone av repositoryet ditt, eller pakk ut nedlastingen.
2. Åpne en terminal i prosjektmappen og installer pakkene med npm ci (eller npm install hvis det ikke finnes noen package-lock.json).
3. Bygg appen med npm run build. Nå finnes det en mappe dist med en index.html og en mappe assets.
4. Last opp innholdet i dist til domains/dittdomene.no/public_html, med et FTP-program eller med File Manager i DirectAdmin. Ikke last opp selve mappen dist, og heller ikke kildekoden eller node_modules.
5. Legg .htaccess-filen nedenfor i public_html.

En app med flere sider (en router) viser adresser i nettleseren som dittdomene.no/om-oss. Disse sidene finnes ikke som filer på serveren. Oppdaterer du en slik side eller åpner lenken direkte, får du en 404. Med denne .htaccess-filen sender serveren slike adresser til index.html, og appen viser riktig side:

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

Filer og mapper som finnes, viser serveren som vanlig. En fil som mangler i assets gir en ekte 404, så det blir lettere å oppdage feil. Alt annet går til appen.

4. Legg appen i en undermappe

Vil du ha appen på dittdomene.no/app i stedet for dittdomene.no? Da må appen vite det allerede når den bygges. Ellers leter nettleseren etter filene i /assets i stedet for /app/assets, og skjermen blir hvit.

1. Sett valget base: '/app/' i vite.config.js (eller vite.config.ts).
2. Gi routeren den samme stien. I React Router gjør du det med <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Bygg på nytt og last opp innholdet i dist til public_html/app.
4. Legg den samme filen som ovenfor i public_html/app/.htaccess, med RewriteBase /app/.

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

Innstillinger som begynner med VITE_, som VITE_SUPABASE_URL og VITE_SUPABASE_PUBLISHABLE_KEY (i eldre prosjekter VITE_SUPABASE_ANON_KEY), legger Vite inn i JavaScript-filene når appen bygges. Du kan ikke endre dem på serveren i etterkant.

• Du finner verdiene i filen .env i prosjektet ditt. Bruk navnene nøyaktig slik de står.
• Finnes ikke .env i prosjektet ditt, lager du den selv i prosjektmappen før du kjører npm run build. Med GitHub Actions legger du dem inn som secret (se punkt 7).
• Har du endret en verdi, må du bygge og laste opp appen på nytt.

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

En app med serverkode, som en TanStack Start-app fra Lovable, setter du opp med Setup Node.js App i DirectAdmin. Hvordan det fungerer, leser du i Aktiver Node.js i DirectAdmin. For en TanStack Start-app gjør du slik:

1. Bygg appen på datamaskinen din med NITRO_PRESET=node-server npm run build. Nå finnes det en mappe .output.
2. Opprett en app under Setup Node.js App, med Node.js 22 og en mappe utenfor public_html, for eksempel apps/minapp.
3. Last opp mappen .output til den mappen.
4. Lag en fil start.cjs i samme mappe med denne ene linjen, og skriv inn start.cjs under Application startup file:

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

5. Legg inn innstillingene serveren trenger, som SUPABASE_URL og SUPABASE_PUBLISHABLE_KEY, under Environment variables.
6. Klikk på Restart. Gjør det også etter hver nye opplasting.

Den lille filen start.cjs trengs fordi serveren i .output er en moderne JavaScript-modul (.mjs), mens Node.js-miljøet laster startfilen på den gamle måten. Gir appen feil 503, sjekker du stderr.log i mappen til appen din.

7. Automatisk utrulling med GitHub Actions

Med GitHub Actions bygger GitHub appen din ved hver endring i branchen main og legger resultatet på pakken din. Siden Lovable og Bolt skriver til GitHub, er en endring fra KI-byggeren da på nett etter noen minutter. Git-funksjonen i DirectAdmin bygger ingenting, den legger bare ut filer. For en Vite-app er GitHub Actions derfor mer praktisk.

Passord og nøkler legger du aldri i repositoryet ditt, men som secret i GitHub:

1. Åpne repositoryet ditt på GitHub og gå til Settings > Secrets and variables > Actions.
2. Klikk på New repository secret, fyll inn navnet og verdien og klikk på Add secret. Gjør dette for hver secret i varianten du velger.
3. Opprett filen .github/workflows/deploy.yml i repositoryet ditt med ett av de to eksemplene nedenfor.
4. Sjekk etter neste endring i fanen Actions om det gikk bra. Med Run workflow kan du også starte den manuelt.

Variant A: via FTPS (alle hostingpakker). Opprett en egen FTP-konto for GitHub i DirectAdmin, med valget Domain under Root directory (se Hvordan fungerer FTP hos WebOké?). Secrets: FTP_SERVER (servernavnet til pakken din, for eksempel linux2023.webawere.nl, ikke domenenavnet ditt), FTP_USERNAME (hele navnet, for eksempel github@dittdomene.no), FTP_PASSWORD, og VITE_-verdiene til appen din.

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 inkludert i Power Webhost Three og Four, AI Wordpress Three og Power Reseller, på port 1967 og bare med nøkkel (se SSH-tilgang og Terminal i DirectAdmin).

1. Lag en egen nøkkel for GitHub på datamaskinen din, uten passord: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Lim inn innholdet i github-deploy.pub i DirectAdmin under SSH Keys > PASTE KEY.
3. Legg innholdet i github-deploy (den private nøkkelen) i secreten SSH_PRIVATE_KEY. Slett deretter filen fra datamaskinen din.
4. Kjør ssh-keyscan -p 1967 linux2023.webawere.nl og legg utdataene i secreten SSH_KNOWN_HOSTS. Slik kontrollerer GitHub at den virkelig kobler til serveren din.
5. Legg også inn SSH_HOST (servernavnet), SSH_USER (DA-brukernavnet ditt), DOMEIN (for eksempel dittdomene.no) og VITE_-verdiene 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/"

Bruker du ikke Supabase, fjern linjene med VITE_SUPABASE eller bytt dem ut med VITE_-variablene til din egen app. Mislykkes innloggingen noen ganger, blokkerer serveren IP-adressen til GitHub midlertidig. Sjekk da secretene dine og start workflowen på nytt.

8. Vanlige feil

• Forsiden fungerer, men oppdatering eller en direkte lenke gir 404. .htaccess-filen fra punkt 3 mangler eller ligger i feil mappe.
• En hvit skjerm. Åpne utviklerverktøyene i nettleseren din (F12) og se under Console eller Network. Ser du 404-feil på filer i /assets? Da stemmer ikke stien: Du har lastet opp selve mappen dist i stedet for innholdet, eller appen ligger i en undermappe uten riktig base (punkt 4).
• Appen lastes, men innlogging eller data fungerer ikke, eller du ser en melding som supabaseUrl is required. VITE_-variablene var ikke med da appen ble bygget. Legg dem i .env eller som secret, og bygg på nytt.
• Bygget feiler med en melding om Node.js-versjonen. Bruk Node.js 22, både på datamaskinen din og i workflowen (node-version: 22).
• npm ci feiler. Det finnes ingen package-lock.json, for eksempel fordi prosjektet bare har en bun.lock. Kjør npm install én gang og legg den nye package-lock.json i repositoryet ditt.
• Det finnes ingen index.html i bygget. Da er det en app med egen server, som TanStack Start. Sett den opp som Node.js-app (punkt 6).

Se også: Koble til med FileZilla (FTP, FTPS og SFTP) og SSH-nøkler og innlogging med SSH.

Utfyllende forklaring med skjermbilder: Sette opp en Node.js-app i DirectAdmin-veiledningen.