Nasadenie aplikácie z Lovable, Bolt alebo iného AI nástroja na tvorbu aplikácií na váš hosting WebOké

Vytvorili ste aplikáciu v Lovable, Bolt alebo inom AI nástroji na tvorbu aplikácií a chcete ju umiestniť na vlastnú doménu vo WebOké? Je to možné. V tomto článku sa dočítate, ako získať kód z AI nástroja, ako aplikáciu zostaviť a nahrať a ako to za vás môže automaticky urobiť GitHub.

1. Aký typ aplikácie máte?

Otvorte v projekte súbor package.json. Podľa neho zistíte, o aký typ aplikácie ide.

• Statická aplikácia (React s Vite). V package.json je uvedené vite a žiadny serverový framework. Príkazom npm run build vytvoríte priečinok dist s bežnými súbormi HTML, JavaScript a CSS. Tie nahráte do public_html. Funguje to na každom hostingovom balíku. Takto je postavených mnoho aplikácií z Bolt a starších aplikácií z Lovable.
• Aplikácia s vlastným serverom. Lovable od 13. mája 2026 vytvára aplikácie s TanStack Start: v package.json je potom uvedené @tanstack/react-start. Takáto aplikácia spúšťa serverový kód, a preto nefunguje ako samostatné súbory v public_html. Nastavíte ju ako Node.js aplikáciu (pozrite bod 6). To isté platí pre ďalšie aplikácie s vlastným serverom, napríklad s backendom Express.
• Aplikácia so Supabase alebo Lovable Cloud ako backendom. Databáza, prihlasovanie a funkcie v tom prípade zostávajú v Supabase alebo Lovable. Na WebOké umiestnite iba prednú časť (front-end). Pri zostavovaní však musíte zadať adresu a verejný kľúč Supabase (pozrite bod 5).

2. Získanie kódu z AI nástroja cez GitHub

Lovable a Bolt dokážu váš projekt uložiť do vlastného repozitára na GitHube. Zmeny sa potom prenášajú oboma smermi: čo zmeníte v AI nástroji, sa dostane na GitHub, a čo zmeníte na GitHube, sa vráti do AI nástroja.

V Lovable:

1. Otvorte projekt a prejdite do Project settings > Git > GitHub.
2. Kliknite na Add connection a povoľte aplikácii Lovable prístup k vášmu účtu GitHub.
3. V časti Accounts kliknite na Connect. Lovable vytvorí súkromný repozitár a bude ho priebežne aktualizovať.

Dá sa to aj bez GitHubu: pomocou Download codebase v Project settings > Git si kód stiahnete (pri platenom predplatnom Lovable).

V Bolt:

1. Otvorte projekt a kliknite vpravo hore na ikonu GitHubu.
2. Prihláste sa na GitHub, kliknite na Authorize a nainštalujte aplikáciu Bolt pre GitHub.
3. Zadajte názov repozitára a kliknite na Create repository. Bolt potom pracuje vo vetve main.

3. Zostavenie a nahratie statickej aplikácie

Aplikáciu zostavíte na vlastnom počítači. Potrebujete na to Node.js vo verzii 22 (aktuálne Vite vyžaduje minimálne 20.19 alebo 22.12).

1. Získajte kód: príkazom git clone z vášho repozitára alebo rozbalením stiahnutého súboru.
2. Otvorte terminál v priečinku projektu a nainštalujte balíky príkazom npm ci (alebo npm install, ak súbor package-lock.json neexistuje).
3. Zostavte aplikáciu príkazom npm run build. Teraz máte priečinok dist so súborom index.html a priečinkom assets.
4. Nahrajte obsah priečinka dist do domains/vasadomena.sk/public_html pomocou FTP programu alebo cez File Manager v DirectAdmin. Nenahrávajte teda samotný priečinok dist ani zdrojový kód či node_modules.
5. Umiestnite nižšie uvedený súbor .htaccess do public_html.

Aplikácia s viacerými stránkami (s routerom) zobrazuje v prehliadači adresy ako vasadomena.sk/o-nas. Tieto stránky na serveri neexistujú ako súbory. Ak takúto stránku obnovíte alebo otvoríte odkaz priamo, zobrazí sa chyba 404. Vďaka tomuto súboru .htaccess server presmeruje tieto adresy na index.html a aplikácia potom zobrazí správnu stránku:

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

Existujúce súbory a priečinky server zobrazí bežným spôsobom. Chýbajúci súbor v assets vráti skutočnú chybu 404, takže chybu ľahšie odhalíte. Všetko ostatné smeruje do aplikácie.

4. Umiestnenie aplikácie do podpriečinka

Chcete aplikáciu umiestniť nie na vasadomena.sk, ale na vasadomena.sk/app? Aplikácia to potom musí vedieť už pri zostavení. Inak prehliadač hľadá súbory v /assets namiesto /app/assets a obrazovka zostane biela.

1. V súbore vite.config.js (alebo vite.config.ts) nastavte možnosť base: '/app/'.
2. Zadajte rovnakú cestu aj routeru. Pri React Router to urobíte pomocou <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Aplikáciu znova zostavte a nahrajte obsah priečinka dist do public_html/app.
4. Do public_html/app/.htaccess vložte rovnaký súbor ako vyššie, s RewriteBase /app/.

5. Supabase, Lovable Cloud a ďalšie nastavenia (env premenné)

Nastavenia, ktoré začínajú na VITE_, napríklad VITE_SUPABASE_URL a VITE_SUPABASE_PUBLISHABLE_KEY (v starších projektoch VITE_SUPABASE_ANON_KEY), vkladá Vite pri zostavovaní priamo do súborov JavaScriptu. Na serveri ich už dodatočne nastaviť nemôžete.

• Hodnoty nájdete v súbore .env vášho projektu. Názvy prevezmite presne v rovnakom tvare.
• Ak sa súbor .env vo vašom projekte nenachádza, vytvorte ho sami v priečinku projektu ešte predtým, ako spustíte npm run build. Pri GitHub Actions ich nastavíte ako secret (pozrite bod 7).
• Ak ste niektorú hodnotu zmenili, aplikáciu znova zostavte a nahrajte.

6. Aplikácia s vlastným serverom: ako Node.js aplikácia

Aplikáciu so serverovým kódom, napríklad aplikáciu TanStack Start z Lovable, nastavíte pomocou Setup Node.js App v DirectAdmin. Ako to funguje, sa dočítate v článku Aktivácia Node.js v DirectAdmin. Pri aplikácii TanStack Start postupujte takto:

1. Zostavte aplikáciu na svojom počítači príkazom NITRO_PRESET=node-server npm run build. Vznikne priečinok .output.
2. Vytvorte aplikáciu v časti Setup Node.js App s Node.js 22 a priečinkom mimo public_html, napríklad apps/mojaapp.
3. Nahrajte priečinok .output do tohto priečinka.
4. V rovnakom priečinku vytvorte súbor start.cjs s týmto jediným riadkom a do poľa Application startup file zadajte start.cjs:

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

5. Nastavenia, ktoré server potrebuje, napríklad SUPABASE_URL a SUPABASE_PUBLISHABLE_KEY, zadajte v časti Environment variables.
6. Kliknite na Restart. Urobte to aj po každom novom nahratí.

Súbor start.cjs je potrebný, pretože server v priečinku .output je moderný JavaScript modul (.mjs), zatiaľ čo prostredie Node.js načítava štartovací súbor starším spôsobom. Ak aplikácia zobrazí chybu 503, pozrite si súbor stderr.log v priečinku vašej aplikácie.

7. Automatické nasadzovanie pomocou GitHub Actions

Pomocou GitHub Actions GitHub pri každej zmene vo vetve main zostaví vašu aplikáciu a výsledok nahrá na váš balík. Keďže Lovable a Bolt zapisujú do GitHubu, zmena z AI nástroja na tvorbu webov je potom o niekoľko minút online. Funkcia Git v DirectAdmin nič nezostavuje, iba ukladá súbory. Pre aplikáciu Vite je preto GitHub Actions praktickejší.

Heslá a kľúče nikdy neukladajte do repozitára, ale ako secret v GitHube:

1. Otvorte svoj repozitár na GitHube a prejdite do Settings > Secrets and variables > Actions.
2. Kliknite na New repository secret, vyplňte názov a hodnotu a kliknite na Add secret. Urobte to pre každý secret z variantu, ktorý si zvolíte.
3. Vo svojom repozitári vytvorte súbor .github/workflows/deploy.yml s jedným z dvoch príkladov nižšie.
4. Po ďalšej zmene skontrolujte na karte Actions, či všetko prebehlo úspešne. Pomocou Run workflow ho môžete spustiť aj ručne.

Variant A: cez FTPS (všetky hostingové balíky). V DirectAdmin vytvorte samostatný FTP účet pre GitHub a pri položke Root directory zvoľte možnosť Domain (pozrite Ako funguje FTP vo WebOké?). Secrets: FTP_SERVER (názov servera vášho balíka, napríklad linux2023.webawere.nl, nie názov vašej domény), FTP_USERNAME (celé meno, napríklad github@vasadomena.sk), FTP_PASSWORD a hodnoty VITE_ vašej aplikácie.

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: cez SSH s rsync (balíky so SSH). SSH je súčasťou balíkov Power Webhost Three a Four, AI Wordpress Three a Power Reseller, na porte 1967 a iba s kľúčom (pozrite Prístup cez SSH a Terminal v DirectAdmin).

1. Na svojom počítači vytvorte samostatný kľúč pre GitHub, bez hesla: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Obsah súboru github-deploy.pub vložte v DirectAdmin do SSH Keys > PASTE KEY.
3. Obsah súboru github-deploy (súkromný kľúč) uložte do secretu SSH_PRIVATE_KEY. Potom súbor zo svojho počítača odstráňte.
4. Spustite ssh-keyscan -p 1967 linux2023.webawere.nl a výstup uložte do secretu SSH_KNOWN_HOSTS. GitHub tak overí, že sa skutočne pripája k vášmu serveru.
5. Ako secret uložte aj SSH_HOST (názov servera), SSH_USER (vaše používateľské meno v DirectAdmin), DOMEIN (napríklad vasadomena.sk) a hodnoty 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/"

Ak nepoužívate Supabase, riadky s VITE_SUPABASE vynechajte alebo namiesto nich uveďte premenné VITE_ vašej vlastnej aplikácie. Ak sa prihlásenie niekoľkokrát nepodarí, server dočasne zablokuje IP adresu GitHubu. V takom prípade skontrolujte svoje secrets a workflow spustite znova.

8. Časté chyby

• Domovská stránka funguje, ale obnovenie stránky alebo priamy odkaz vráti chybu 404. Súbor .htaccess z bodu 3 chýba alebo sa nachádza v nesprávnom priečinku.
• Biela obrazovka. Otvorte vývojárske nástroje vášho prehliadača (F12) a pozrite sa do časti Console alebo Network. Vidíte chyby 404 pri súboroch v /assets? Potom nesedí cesta: nahrali ste samotný priečinok dist namiesto jeho obsahu alebo je aplikácia v podpriečinku bez správneho nastavenia base (bod 4).
• Aplikácia sa načíta, ale prihlásenie alebo údaje nefungujú, prípadne sa zobrazí hlásenie ako supabaseUrl is required. Premenné VITE_ neboli pri zostavovaní k dispozícii. Uložte ich do .env alebo ako secret a zostavte aplikáciu znova.
• Zostavenie zlyhá s hlásením o verzii Node.js. Používajte Node.js 22, na vašom počítači aj vo workflow (node-version: 22).
• npm ci zlyhá. Chýba súbor package-lock.json, napríklad preto, že projekt obsahuje iba bun.lock. Spustite raz npm install a nový súbor package-lock.json pridajte do vášho repozitára.
• V zostavení nie je súbor index.html. V tom prípade ide o aplikáciu s vlastným serverom, napríklad TanStack Start. Nastavte ju ako Node.js aplikáciu (bod 6).

Pozrite si aj: Pripojenie cez FileZilla (FTP, FTPS a SFTP) a SSH kľúče a prihlásenie cez SSH.

Podrobný návod so snímkami obrazovky: Nastavenie Node.js aplikácie v príručke k DirectAdmin.