Jak umístit Vaši aplikaci z Lovable, Bolt nebo jiného AI nástroje pro tvorbu aplikací na hosting WebOké

Vytvořili jste aplikaci pomocí Lovable, Bolt nebo jiného AI nástroje pro tvorbu aplikací a chcete ji provozovat na své vlastní doméně u WebOké? To je možné. V tomto článku se dozvíte, jak z AI nástroje získat kód, jak aplikaci sestavit a nahrát a jak to za Vás může automaticky dělat GitHub.

1. Jaký typ aplikace máte?

Otevřete ve svém projektu soubor package.json. Podle něj poznáte, o jaký typ aplikace jde.

• Statická aplikace (React s Vite). V package.json je uvedeno vite a žádný serverový framework. Příkazem npm run build vytvoříte složku dist s běžnými soubory HTML, JavaScript a CSS. Ty nahrajete do public_html. Funguje to na každém hostingovém balíčku. Takto je postavena řada aplikací z Bolt i starší aplikace z Lovable.
• Aplikace s vlastním serverem. Lovable od 13. května 2026 vytváří aplikace s TanStack Start: v takovém případě je v package.json uvedeno @tanstack/react-start. Taková aplikace spouští serverový kód, a proto nefunguje jako samostatné soubory v public_html. Nastavíte ji jako Node.js aplikaci (viz bod 6). Totéž platí pro další aplikace s vlastním serverem, například s backendem v Express.
• Aplikace se Supabase nebo Lovable Cloud jako backendem. Databáze, přihlašování a funkce v tomto případě zůstávají u Supabase nebo Lovable. Na WebOké umístíte pouze frontend (front-end). Při sestavování však musíte zadat adresu a veřejný klíč Supabase (viz bod 5).

2. Získání kódu z AI nástroje přes GitHub

Lovable a Bolt umí uložit Váš projekt do vlastního GitHub repozitáře. Změny se pak přenášejí oběma směry: co změníte v AI nástroji, se objeví na GitHubu, a co změníte na GitHubu, se promítne zpět do AI nástroje.

V Lovable:

1. Otevřete svůj projekt a přejděte do Project settings > Git > GitHub.
2. Klikněte na Add connection a udělte aplikaci Lovable přístup ke svému účtu GitHub.
3. U položky Accounts klikněte na Connect. Lovable vytvoří soukromý repozitář a bude jej průběžně aktualizovat.

Jde to i bez GitHubu: pomocí Download codebase v Project settings > Git si kód stáhnete (s placeným předplatným Lovable).

V Bolt:

1. Otevřete svůj projekt a vpravo nahoře klikněte na ikonu GitHubu.
2. Přihlaste se na GitHub, klikněte na Authorize a nainstalujte GitHub aplikaci od Bolt.
3. Zadejte název repozitáře a klikněte na Create repository. Bolt pak pracuje ve větvi main.

3. Sestavení a nahrání statické aplikace

Aplikaci sestavíte na svém počítači. K tomu potřebujete Node.js ve verzi 22 (aktuální Vite vyžaduje minimálně 20.19 nebo 22.12).

1. Získejte kód: proveďte git clone svého repozitáře, nebo rozbalte stažený archiv.
2. Otevřete terminál ve složce projektu a nainstalujte balíčky příkazem npm ci (nebo npm install, pokud chybí package-lock.json).
3. Sestavte aplikaci příkazem npm run build. Nyní máte složku dist se souborem index.html a složkou assets.
4. Nahrajte obsah složky dist do domains/example.com/public_html, a to pomocí FTP klienta nebo Správce souborů v DirectAdmin. Nenahrávejte tedy samotnou složku dist, ani zdrojový kód či node_modules.
5. Umístěte níže uvedený soubor .htaccess do public_html.

Aplikace s více stránkami (s routerem) zobrazuje v prohlížeči adresy jako example.com/about. Tyto stránky na serveru neexistují jako soubory. Pokud takovou stránku obnovíte nebo odkaz otevřete přímo, zobrazí se chyba 404. Díky tomuto souboru .htaccess server tyto adresy přesměruje na index.html a aplikace pak zobrazí správnou 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ící soubory a složky server zobrazí normálně. Chybějící soubor ve složce assets vrátí skutečnou chybu 404, takže chybu snáze odhalíte. Vše ostatní se předá aplikaci.

4. Umístění aplikace do podsložky

Chcete aplikaci provozovat ne na example.com, ale na example.com/app? Pak to aplikace musí vědět už při sestavení. Jinak bude prohlížeč hledat soubory v /assets místo v /app/assets a obrazovka zůstane bílá.

1. V souboru vite.config.js (nebo vite.config.ts) nastavte volbu base: '/app/'.
2. Předejte stejnou cestu i routeru. U React Router to uděláte pomocí <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Aplikaci znovu sestavte a nahrajte obsah složky dist do public_html/app.
4. Do public_html/app/.htaccess vložte stejný soubor jako výše, ale s RewriteBase /app/.

5. Supabase, Lovable Cloud a další nastavení (proměnné prostředí)

Nastavení začínající na VITE_, například VITE_SUPABASE_URL a VITE_SUPABASE_PUBLISHABLE_KEY (ve starších projektech VITE_SUPABASE_ANON_KEY), vloží Vite při sestavení přímo do souborů JavaScriptu. Na serveru je proto dodatečně nastavit nelze.

• Hodnoty najdete v souboru .env ve Vašem projektu. Názvy převezměte přesně tak, jak jsou.
• Pokud ve Vašem projektu soubor .env není, vytvořte ho sami ve složce projektu dříve, než spustíte npm run build. V GitHub Actions je nastavte jako secret (viz bod 7).
• Pokud jste některou hodnotu změnili, aplikaci znovu sestavte a nahrajte.

6. Aplikace s vlastním serverem: jako aplikace Node.js

Aplikaci se serverovým kódem, například aplikaci TanStack Start z Lovable, nasadíte pomocí Setup Node.js App v DirectAdmin. Jak to funguje, se dočtete v článku Aktivace Node.js v DirectAdmin. U aplikace TanStack Start postupujte takto:

1. Sestavte aplikaci na svém počítači příkazem NITRO_PRESET=node-server npm run build. Vznikne složka .output.
2. Vytvořte aplikaci v Setup Node.js App s Node.js 22 a složkou mimo public_html, například apps/myapp.
3. Nahrajte složku .output do této složky.
4. Ve stejné složce vytvořte soubor start.cjs s tímto jediným řádkem a do pole Application startup file zadejte start.cjs:

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

5. Nastavení, která server potřebuje, například SUPABASE_URL a SUPABASE_PUBLISHABLE_KEY, zadejte v části Environment variables.
6. Klikněte na Restart. Udělejte to také po každém novém nahrání.

Soubor start.cjs je potřeba, protože server ze složky .output je moderní modul JavaScriptu (.mjs), zatímco prostředí Node.js načítá spouštěcí soubor starším způsobem. Pokud aplikace vrací chybu 503, podívejte se do souboru stderr.log ve složce Vaší aplikace.

7. Automatické nasazení pomocí GitHub Actions

Díky GitHub Actions GitHub sestaví Vaši aplikaci při každé změně ve větvi main a výsledek nahraje na Váš hostingový balíček. Protože Lovable a Bolt zapisují do GitHubu, je změna z AI nástroje pro tvorbu aplikací online už za několik minut. Funkce Git v DirectAdmin nic nesestavuje, pouze umísťuje soubory. Pro aplikaci ve Vite je proto GitHub Actions praktičtější.

Hesla a klíče nikdy neukládejte do svého repozitáře, ale jako secret v GitHubu:

1. Otevřete svůj repozitář na GitHubu a přejděte do Settings > Secrets and variables > Actions.
2. Klikněte na New repository secret, vyplňte název a hodnotu a klikněte na Add secret. Udělejte to pro každý secret z varianty, kterou zvolíte.
3. Ve svém repozitáři vytvořte soubor .github/workflows/deploy.yml s jedním ze dvou příkladů níže.
4. Po další změně zkontrolujte na kartě Actions, zda vše proběhlo úspěšně. Pomocí Run workflow jej můžete spustit také ručně.

Varianta A: přes FTPS (všechny hostingové balíčky). V DirectAdmin vytvořte samostatný FTP účet pro GitHub a u položky Kořenová složka zvolte možnost Doména (viz Jak funguje FTP u WebOké?). Secrets: FTP_SERVER (název serveru Vašeho balíčku, například linux2023.webawere.nl, nikoli název Vaší domény), FTP_USERNAME (celé jméno, například github@example.com), FTP_PASSWORD a hodnoty VITE_ Vaší aplikace.

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/

Varianta B: přes SSH s rsync (balíčky s SSH). SSH je součástí balíčků Power Webhost Three a Four, AI Wordpress Three a Power Reseller, na portu 1967 a pouze s klíčem (viz Přístup přes SSH a Terminal v DirectAdmin).

1. Na svém počítači vytvořte samostatný klíč pro GitHub, bez hesla: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Obsah souboru github-deploy.pub vložte v DirectAdmin do SSH klíče > VLOŽIT KLÍČ.
3. Obsah souboru github-deploy (soukromý klíč) vložte do secretu SSH_PRIVATE_KEY. Poté soubor ze svého počítače smažte.
4. Spusťte ssh-keyscan -p 1967 linux2023.webawere.nl a výstup vložte do secretu SSH_KNOWN_HOSTS. GitHub tak ověří, že se opravdu připojuje k Vašemu serveru.
5. Jako secret nastavte také SSH_HOST (název serveru), SSH_USER (Vaše uživatelské jméno v DA), DOMEIN (například example.com) 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/"

Pokud nepoužíváte Supabase, řádky s VITE_SUPABASE vynechte nebo místo nich uveďte proměnné VITE_ své vlastní aplikace. Pokud se přihlášení několikrát nezdaří, server dočasně zablokuje IP adresu GitHubu. V takovém případě zkontrolujte své secrets a spusťte workflow znovu.

8. Časté chyby

• Domovská stránka funguje, ale po obnovení stránky nebo při přímém odkazu se zobrazí chyba 404. Soubor .htaccess z bodu 3 chybí nebo je ve špatné složce.
• Bílá obrazovka. Otevřete vývojářské nástroje svého prohlížeče (F12) a podívejte se na kartu Console nebo Network. Vidíte chyby 404 u souborů ve složce /assets? Pak nesedí cesta: nahráli jste samotnou složku dist místo jejího obsahu, nebo je aplikace v podsložce bez správného nastavení base (bod 4).
• Aplikace se načte, ale přihlášení nebo data nefungují, případně se zobrazí hlášení jako supabaseUrl is required. Proměnné VITE_ nebyly při sestavení k dispozici. Uložte je do .env nebo jako secret a sestavte aplikaci znovu.
• Sestavení selže s hlášením o verzi Node.js. Používejte Node.js 22, na svém počítači i ve workflow (node-version: 22).
• npm ci selže. Chybí soubor package-lock.json, například proto, že projekt obsahuje pouze bun.lock. Spusťte jednou npm install a nový soubor package-lock.json uložte do svého repozitáře.
• V sestavení není žádný soubor index.html. Pak jde o aplikaci s vlastním serverem, například TanStack Start. Nastavte ji jako aplikaci Node.js (bod 6).

Viz také: Připojení pomocí FileZilla (FTP, FTPS a SFTP) a SSH klíče a přihlášení přes SSH.

Podrobný návod se snímky obrazovky: Nastavení aplikace Node.js v příručce k DirectAdmin.