Jak umieścić aplikację z Lovable, Bolt lub innego kreatora AI na hostingu WebOké

Czy stworzyli Państwo aplikację w Lovable, Bolt lub innym kreatorze AI i chcą ją Państwo umieścić we własnej domenie w WebOké? To możliwe. W tym artykule wyjaśniamy, jak pobrać kod z kreatora AI, jak zbudować i przesłać aplikację oraz jak GitHub może zrobić to za Państwa automatycznie.

1. Jakiego rodzaju jest Państwa aplikacja?

Prosimy otworzyć plik package.json w projekcie. Na jego podstawie można rozpoznać rodzaj aplikacji.

• Aplikacja statyczna (React z Vite). W package.json znajduje się vite, a nie ma frameworka serwerowego. Poleceniem npm run build tworzą Państwo folder dist ze zwykłymi plikami HTML, JavaScript i CSS. Te pliki przesyłają Państwo do public_html. Działa to na każdym pakiecie hostingowym. W ten sposób zbudowanych jest wiele aplikacji z Bolt oraz starsze aplikacje z Lovable.
• Aplikacja z własnym serwerem. Od 13 maja 2026 Lovable tworzy aplikacje w TanStack Start: wtedy w package.json znajduje się @tanstack/react-start. Taka aplikacja uruchamia kod serwerowy, więc nie działa jako zwykłe pliki w public_html. Należy ją skonfigurować jako aplikację Node.js (zob. punkt 6). To samo dotyczy innych aplikacji z własnym serwerem, na przykład z backendem Express.
• Aplikacja z Supabase lub Lovable Cloud jako backendem. Baza danych, logowanie i funkcje pozostają wtedy w Supabase lub Lovable. W WebOké umieszczają Państwo tylko część widoczną dla użytkownika (front-end). Podczas budowania należy jednak podać adres i klucz publiczny Supabase (zob. punkt 5).

2. Pobieranie kodu z kreatora AI przez GitHub

Lovable i Bolt mogą umieścić Państwa projekt we własnym repozytorium GitHub. Zmiany są wtedy synchronizowane w obie strony: to, co zmienią Państwo w kreatorze AI, trafia do GitHub, a to, co zmienią Państwo w GitHub, wraca do kreatora AI.

W Lovable:

1. Prosimy otworzyć projekt i przejść do Project settings > Git > GitHub.
2. Kliknąć Add connection i przyznać aplikacji Lovable dostęp do konta GitHub.
3. W sekcji Accounts kliknąć Connect. Lovable utworzy prywatne repozytorium i będzie je aktualizować.

Można też obejść się bez GitHub: za pomocą Download codebase w Project settings > Git pobiorą Państwo kod (w płatnym abonamencie Lovable).

W Bolt:

1. Prosimy otworzyć projekt i kliknąć ikonę GitHub w prawym górnym rogu.
2. Zalogować się do GitHub, kliknąć Authorize i zainstalować aplikację GitHub od Bolt.
3. Wpisać nazwę repozytorium i kliknąć Create repository. Bolt będzie następnie pracować w gałęzi main.

3. Budowanie i przesyłanie aplikacji statycznej

Aplikację budują Państwo na własnym komputerze. Potrzebny jest do tego Node.js w wersji 22 (obecna wersja Vite wymaga co najmniej 20.19 lub 22.12).

1. Pobrać kod: wykonać git clone repozytorium lub rozpakować pobrany plik.
2. Otworzyć terminal w folderze projektu i zainstalować pakiety poleceniem npm ci (lub npm install, jeśli nie ma pliku package-lock.json).
3. Zbudować aplikację poleceniem npm run build. Powstanie folder dist z plikiem index.html i folderem assets.
4. Przesłać zawartość folderu dist do domains/twojadomena.pl/public_html, za pomocą programu FTP lub Menedżera plików w DirectAdmin. Prosimy nie przesyłać samego folderu dist ani kodu źródłowego czy node_modules.
5. Umieścić poniższy plik .htaccess w public_html.

Aplikacja z wieloma stronami (z routerem) wyświetla w przeglądarce adresy takie jak twojadomena.pl/o-nas. Te strony nie istnieją jako pliki na serwerze. Jeśli odświeżą Państwo taką stronę lub otworzą link bezpośrednio, pojawi się błąd 404. Dzięki temu plikowi .htaccess serwer kieruje takie adresy do index.html, a aplikacja wyświetla właściwą stronę:

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

Istniejące pliki i foldery serwer wyświetla normalnie. Brakujący plik w assets zwraca prawdziwy błąd 404, dzięki czemu łatwiej zauważyć problem. Wszystko inne trafia do aplikacji.

4. Umieszczanie aplikacji w podfolderze

Chcą Państwo umieścić aplikację nie pod adresem twojadomena.pl, lecz twojadomena.pl/app? W takim przypadku aplikacja musi o tym wiedzieć już podczas budowania. W przeciwnym razie przeglądarka będzie szukać plików w /assets zamiast w /app/assets, a ekran pozostanie biały.

1. W pliku vite.config.js (lub vite.config.ts) ustawić opcję base: '/app/'.
2. Przekazać routerowi tę samą ścieżkę. W React Router robi się to za pomocą <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Ponownie zbudować aplikację i przesłać zawartość dist do public_html/app.
4. W public_html/app/.htaccess umieścić ten sam plik co powyżej, z RewriteBase /app/.

5. Supabase, Lovable Cloud i inne ustawienia (zmienne środowiskowe)

Ustawienia zaczynające się od VITE_, takie jak VITE_SUPABASE_URL i VITE_SUPABASE_PUBLISHABLE_KEY (w starszych projektach VITE_SUPABASE_ANON_KEY), Vite umieszcza w plikach JavaScript podczas budowania. Na serwerze nie można ich już później ustawić.

• Wartości znajdą Państwo w pliku .env swojego projektu. Prosimy przepisać nazwy dokładnie w tej samej postaci.
• Jeśli w projekcie nie ma pliku .env, prosimy utworzyć go samodzielnie w katalogu projektu przed uruchomieniem npm run build. W przypadku GitHub Actions należy ustawić je jako secret (zob. punkt 7).
• Po zmianie wartości prosimy ponownie zbudować i przesłać aplikację.

6. Aplikacja z własnym serwerem: jako aplikacja Node.js

Aplikację z kodem serwerowym, taką jak aplikacja TanStack Start z Lovable, uruchamia się za pomocą Setup Node.js App w DirectAdmin. Jak to działa, opisujemy w artykule Aktywacja Node.js w DirectAdmin. W przypadku aplikacji TanStack Start postępuje się następująco:

1. Prosimy zbudować aplikację na swoim komputerze poleceniem NITRO_PRESET=node-server npm run build. Powstanie katalog .output.
2. Prosimy utworzyć aplikację w Setup Node.js App, z Node.js 22 i katalogiem poza public_html, na przykład apps/myapp.
3. Prosimy przesłać katalog .output do tego katalogu.
4. W tym samym katalogu prosimy utworzyć plik start.cjs z tą jedną linią i wpisać start.cjs w polu Application startup file:

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

5. Ustawienia potrzebne serwerowi, takie jak SUPABASE_URL i SUPABASE_PUBLISHABLE_KEY, prosimy dodać w Environment variables.
6. Prosimy kliknąć Restart. Należy to zrobić również po każdym nowym przesłaniu plików.

Plik start.cjs jest potrzebny, ponieważ serwer z .output jest nowoczesnym modułem JavaScript (.mjs), a środowisko Node.js ładuje plik startowy w dawny sposób. Jeśli aplikacja zwraca błąd 503, prosimy sprawdzić plik stderr.log w katalogu aplikacji.

7. Automatyczne wdrażanie za pomocą GitHub Actions

Dzięki GitHub Actions GitHub buduje Państwa aplikację przy każdej zmianie w gałęzi main i umieszcza wynik na Państwa pakiecie. Ponieważ Lovable i Bolt zapisują zmiany w GitHub, zmiana wprowadzona w kreatorze AI pojawia się online już po kilku minutach. Funkcja Git w DirectAdmin niczego nie buduje, a jedynie umieszcza pliki na serwerze, dlatego w przypadku aplikacji Vite wygodniejszy jest GitHub Actions.

Haseł i kluczy nigdy nie należy umieszczać w repozytorium, tylko zapisać je jako secret w GitHub:

1. Prosimy otworzyć repozytorium w GitHub i przejść do Settings > Secrets and variables > Actions.
2. Prosimy kliknąć New repository secret, wpisać nazwę i wartość, a następnie kliknąć Add secret. Należy to zrobić dla każdego secretu z wybranego wariantu.
3. W repozytorium prosimy utworzyć plik .github/workflows/deploy.yml z jednym z dwóch poniższych przykładów.
4. Po kolejnej zmianie prosimy sprawdzić na karcie Actions, czy wdrożenie się powiodło. Za pomocą Run workflow można je także uruchomić ręcznie.

Wariant A: przez FTPS (wszystkie pakiety hostingowe). Prosimy utworzyć w DirectAdmin osobne konto FTP dla GitHub, wybierając w polu Root Directory opcję Domain (zob. Jak działa FTP w WebOké?). Secrety: FTP_SERVER (nazwa serwera Państwa pakietu, np. linux2023.webawere.nl, a nie nazwa domeny), FTP_USERNAME (pełna nazwa, np. github@twojadomena.pl), FTP_PASSWORD oraz wartości VITE_ Państwa aplikacji.

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/

Wariant B: przez SSH z rsync (pakiety z SSH). SSH jest dostępne w pakietach Power Webhost Three i Four, AI Wordpress Three oraz Power Reseller, na porcie 1967 i wyłącznie z użyciem klucza (zob. Dostęp SSH i Terminal w DirectAdmin).

1. Prosimy utworzyć na swoim komputerze osobny klucz dla GitHub, bez hasła: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Zawartość pliku github-deploy.pub prosimy wkleić w DirectAdmin w sekcji SSH Keys > PASTE KEY.
3. Zawartość pliku github-deploy (klucz prywatny) prosimy zapisać w secrecie SSH_PRIVATE_KEY. Następnie prosimy usunąć ten plik ze swojego komputera.
4. Prosimy uruchomić ssh-keyscan -p 1967 linux2023.webawere.nl i zapisać wynik w secrecie SSH_KNOWN_HOSTS. Dzięki temu GitHub sprawdza, czy rzeczywiście łączy się z Państwa serwerem.
5. Jako secrety prosimy zapisać również SSH_HOST (nazwa serwera), SSH_USER (nazwa użytkownika DA), DOMEIN (np. twojadomena.pl) oraz wartości 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/"

Jeśli nie korzystają Państwo z Supabase, prosimy pominąć wiersze z VITE_SUPABASE lub wpisać w ich miejsce zmienne VITE_ własnej aplikacji. Jeśli logowanie kilka razy się nie powiedzie, serwer tymczasowo zablokuje adres IP GitHub. W takim przypadku prosimy sprawdzić secrety i ponownie uruchomić workflow.

8. Najczęstsze błędy

• Strona główna działa, ale odświeżenie strony lub bezpośredni link zwraca błąd 404. Brakuje pliku .htaccess z punktu 3 lub znajduje się on w niewłaściwym katalogu.
• Biały ekran. Prosimy otworzyć narzędzia deweloperskie przeglądarki (F12) i sprawdzić zakładkę Console lub Network. Czy widoczne są błędy 404 dla plików w /assets? W takim przypadku ścieżka jest nieprawidłowa: przesłano sam katalog dist zamiast jego zawartości lub aplikacja znajduje się w podkatalogu bez prawidłowej wartości base (punkt 4).
• Aplikacja się ładuje, ale logowanie lub dane nie działają albo pojawia się komunikat taki jak supabaseUrl is required. Zmienne VITE_ nie były dostępne podczas budowania. Prosimy dodać je do pliku .env lub jako secret i ponownie zbudować aplikację.
• Budowanie kończy się niepowodzeniem z komunikatem dotyczącym wersji Node.js. Prosimy używać Node.js 22, zarówno na swoim komputerze, jak i w workflow (node-version: 22).
• Polecenie npm ci kończy się niepowodzeniem. Brakuje pliku package-lock.json, na przykład dlatego, że projekt zawiera tylko plik bun.lock. Prosimy jednorazowo uruchomić npm install i dodać nowy plik package-lock.json do swojego repozytorium.
• W wyniku budowania brakuje pliku index.html. Oznacza to, że jest to aplikacja z własnym serwerem, taka jak TanStack Start. Prosimy skonfigurować ją jako aplikację Node.js (punkt 6).

Zobacz także: Łączenie przez FileZilla (FTP, FTPS i SFTP) oraz Klucze SSH i logowanie przez SSH.

Szczegółowe objaśnienie ze zrzutami ekranu: Konfiguracja aplikacji Node.js w podręczniku DirectAdmin.