Как да публикувате Вашето приложение от Lovable, Bolt или друг AI инструмент за създаване на приложения на Вашия WebOké хостинг

Създали сте приложение с Lovable, Bolt или друг AI конструктор и искате да го поставите на собствения си домейн в WebOké? Това е възможно. В тази статия ще прочетете как да извлечете кода от AI конструктора, как да компилирате и качите приложението и как GitHub може да прави това автоматично вместо Вас.

1. Какво приложение имате?

Отворете файла package.json във Вашия проект. По него ще разберете какъв тип е приложението.

• Статично приложение (React с Vite). В package.json има vite и няма сървърен framework. С npm run build създавате папка dist с обикновени HTML, JavaScript и CSS файлове. Тях качвате в public_html. Това работи на всеки хостинг пакет. Много приложения от Bolt и по-старите приложения от Lovable са изградени по този начин.
• Приложение със собствен сървър. От 13 май 2026 Lovable създава приложения с TanStack Start: тогава в package.json има @tanstack/react-start. Такова приложение изпълнява сървърен код и следователно не работи като отделни файлове в public_html. Настройвате го като Node.js приложение (вижте точка 6). Същото важи и за други приложения със собствен сървър, например Express backend.
• Приложение със Supabase или Lovable Cloud като backend. В този случай базата данни, входът и функциите остават при Supabase или Lovable. В WebOké поставяте само предната част (front-end). При компилирането обаче задавате адреса и публичния ключ на Supabase (вижте точка 5).

2. Извличане на кода от AI конструктора чрез GitHub

Lovable и Bolt могат да поставят Вашия проект в собствено GitHub хранилище (repository). Тогава промените се синхронизират в двете посоки: това, което променяте в AI конструктора, отива в GitHub, а това, което променяте в GitHub, се връща в AI конструктора.

В Lovable:

1. Отворете проекта си и отидете в Project settings > Git > GitHub.
2. Кликнете върху Add connection и дайте на приложението Lovable достъп до Вашия GitHub акаунт.
3. При Accounts кликнете върху Connect. Lovable създава частно хранилище и го поддържа актуално.

Може и без GitHub: с Download codebase в Project settings > Git изтегляте кода (при платен абонамент за Lovable).

В Bolt:

1. Отворете проекта си и кликнете върху иконата на GitHub горе вдясно.
2. Влезте в GitHub, кликнете върху Authorize и инсталирайте GitHub приложението на Bolt.
3. Въведете име за хранилището и кликнете върху Create repository. След това Bolt работи в клона (branch) main.

3. Компилиране и качване на статично приложение

Компилирате приложението на собствения си компютър. За целта Ви е необходим Node.js, версия 22 (текущата версия на Vite изисква минимум 20.19 или 22.12).

1. Изтеглете кода: git clone на Вашето хранилище или разархивирайте изтегления файл.
2. Отворете терминал в папката на проекта и инсталирайте пакетите с npm ci (или npm install, ако няма package-lock.json).
3. Компилирайте приложението с npm run build. Сега има папка dist с index.html и папка assets.
4. Качете съдържанието на dist в domains/example.com/public_html с FTP програма или с File Manager в DirectAdmin. Следователно не качвайте самата папка dist, нито изходния код или node_modules.
5. Поставете файла .htaccess по-долу в public_html.

Приложение с няколко страници (router) показва в браузъра адреси като example.com/about. Тези страници не съществуват като файлове на сървъра. Ако презаредите такава страница или отворите връзката директно, ще получите грешка 404. С този файл .htaccess сървърът пренасочва тези адреси към index.html и приложението показва правилната страница:

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

Съществуващите файлове и папки сървърът показва нормално. Липсващ файл в assets дава истинска грешка 404, така че по-лесно да забележите проблем. Всичко останало отива към приложението.

4. Поставяне на приложението в подпапка

Искате приложението да не е на example.com, а на example.com/app? Тогава приложението трябва да знае това още при компилирането. В противен случай браузърът търси файловете в /assets вместо в /app/assets и екранът остава бял.

1. Задайте в vite.config.js (или vite.config.ts) опцията base: '/app/'.
2. Задайте същия път и на router-а. При React Router това става с <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Компилирайте отново и качете съдържанието на dist в public_html/app.
4. Поставете в public_html/app/.htaccess същия файл като по-горе, с RewriteBase /app/.

5. Supabase, Lovable Cloud и други настройки (env променливи)

Настройките, които започват с VITE_, като VITE_SUPABASE_URL и VITE_SUPABASE_PUBLISHABLE_KEY (в по-стари проекти VITE_SUPABASE_ANON_KEY), Vite записва в JavaScript файловете при компилирането. На сървъра не можете да ги зададете впоследствие.

• Ще намерите стойностите във файла .env на Вашия проект. Пренесете имената точно така, както са.
• Ако във Вашия проект няма файл .env, създайте го сами в папката на проекта, преди да изпълните npm run build. При GitHub Actions ги задайте като secret (вижте точка 7).
• Ако сте променили стойност, компилирайте и качете приложението отново.

6. Приложение със собствен сървър: като Node.js приложение

Приложение със сървърен код, като TanStack Start приложение от Lovable, се настройва чрез Setup Node.js App в DirectAdmin. Как работи това, можете да прочетете в Активиране на Node.js в DirectAdmin. За TanStack Start приложение стъпките са следните:

1. Компилирайте приложението на Вашия компютър с NITRO_PRESET=node-server npm run build. Сега ще има папка .output.
2. Създайте приложение в Setup Node.js App, с Node.js 22 и папка извън public_html, например apps/myapp.
3. Качете папката .output в тази папка.
4. Създайте в същата папка файл start.cjs с този един ред и въведете start.cjs в Application startup file:

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

5. Задайте настройките, от които сървърът се нуждае, като SUPABASE_URL и SUPABASE_PUBLISHABLE_KEY, в Environment variables.
6. Кликнете върху Restart. Правете това и след всяко ново качване.

Малкият файл start.cjs е необходим, защото сървърът от .output е модерен JavaScript модул (.mjs), а Node.js средата зарежда стартовия файл по стария начин. Ако приложението върне грешка 503, проверете stderr.log в папката на Вашето приложение.

7. Автоматично публикуване с GitHub Actions

С GitHub Actions GitHub изгражда Вашето приложение при всяка промяна в клона main и качва резултата на Вашия хостинг пакет. Тъй като Lovable и Bolt записват в GitHub, промяна от AI инструмента за изграждане ще бъде онлайн след няколко минути. Функцията Git в DirectAdmin не изгражда нищо, тя само поставя файлове; затова за Vite приложение GitHub Actions е по-удобен.

Никога не поставяйте пароли и ключове в своето хранилище, а ги запазете като secret в GitHub:

1. Отворете своето хранилище в GitHub и отидете в Settings > Secrets and variables > Actions.
2. Щракнете върху New repository secret, въведете името и стойността и щракнете върху Add secret. Направете това за всеки secret от избрания от Вас вариант.
3. Създайте в своето хранилище файла .github/workflows/deploy.yml с един от двата примера по-долу.
4. След следващата промяна проверете в раздела Actions дали е успешно. С Run workflow можете да го стартирате и ръчно.

Вариант A: чрез FTPS (всички хостинг пакети). Създайте в DirectAdmin отделен FTP акаунт за GitHub, като при Root directory изберете опцията Domain (вижте Как работи FTP при WebOké?). Secrets: FTP_SERVER (името на сървъра на Вашия пакет, например linux2023.webawere.nl, а не Вашето име на домейн), FTP_USERNAME (пълното име, например github@example.com), FTP_PASSWORD, както и стойностите 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 }}
      - 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/

Вариант B: чрез SSH с rsync (пакети със SSH). SSH е включен в Power Webhost Three и Four, AI Wordpress Three и Power Reseller, на порт 1967 и само с ключ (вижте SSH достъп и Terminal в DirectAdmin).

1. Създайте на своя компютър отделен ключ за GitHub, без парола: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Поставете съдържанието на github-deploy.pub в DirectAdmin в SSH Keys > PASTE KEY.
3. Поставете съдържанието на github-deploy (частния ключ) в secret SSH_PRIVATE_KEY. След това изтрийте файла от своя компютър.
4. Изпълнете ssh-keyscan -p 1967 linux2023.webawere.nl и поставете резултата в secret SSH_KNOWN_HOSTS. Така GitHub проверява, че наистина се свързва с Вашия сървър.
5. Добавете също като secret SSH_HOST (името на сървъра), SSH_USER (Вашето потребителско име в DA), DOMEIN (например example.com) и стойностите 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/"

Ако не използвате Supabase, премахнете редовете с VITE_SUPABASE или поставете на тяхно място променливите VITE_ на Вашето собствено приложение. Ако влизането не успее няколко пъти, сървърът временно блокира IP адреса на GitHub. В такъв случай проверете своите secrets и стартирайте workflow отново.

8. Чести грешки

• Началната страница работи, но опресняването или директна връзка дава 404. Файлът .htaccess от точка 3 липсва или се намира в грешната папка.
• Бял екран. Отворете инструментите за разработчици на Вашия браузър (F12) и проверете в Console или Network. Виждате ли грешки 404 за файлове в /assets? Тогава пътят не е правилен: качили сте самата папка dist вместо съдържанието ѝ или приложението се намира в подпапка без правилния base (точка 4).
• Приложението се зарежда, но влизането или данните не работят, или виждате съобщение като supabaseUrl is required. Променливите VITE_ не са били налични при изграждането. Добавете ги в .env или като secret и изградете отново.
• Изграждането (build) се проваля със съобщение за версията на Node.js. Използвайте Node.js 22, както на Вашия компютър, така и в workflow (node-version: 22).
• npm ci се проваля. Няма package-lock.json, например защото проектът има само bun.lock. Изпълнете веднъж npm install и добавете новия package-lock.json във Вашето repository.
• В build няма index.html. Тогава това е приложение със собствен сървър, като TanStack Start. Настройте го като Node.js приложение (точка 6).

Вижте също: Свързване с FileZilla (FTP, FTPS и SFTP) и SSH ключове и вход чрез SSH.

Подробно обяснение с екранни снимки: Настройване на Node.js приложение в ръководството за DirectAdmin.