Kaip perkelti programėlę iš Lovable, Bolt ar kito DI kūrimo įrankio į Jūsų WebOké talpinimą

Sukūrėte programėlę su Lovable, Bolt ar kitu DI kūrimo įrankiu ir norite ją paskelbti savo domene WebOké? Tai įmanoma. Šiame straipsnyje sužinosite, kaip gauti kodą iš DI kūrimo įrankio, kaip sukompiliuoti ir įkelti programėlę ir kaip GitHub gali tai atlikti už Jus automatiškai.

1. Kokią programėlę turite?

Atidarykite savo projekto failą package.json. Iš jo matysite, kokia tai programėlė.

• Statinė programėlė (React su Vite). Faile package.json nurodytas vite, bet nėra serverio karkaso. Komanda npm run build sukuria aplanką dist su įprastais HTML, JavaScript ir CSS failais. Juos įkeliate į public_html. Tai veikia su bet kuriuo talpinimo planu. Daug Bolt programėlių ir senesnių Lovable programėlių yra sukurtos būtent taip.
• Programėlė su savo serveriu. Nuo 13 gegužės 2026 m. Lovable kuria programėles su TanStack Start: tada faile package.json yra @tanstack/react-start. Tokia programėlė vykdo serverio kodą, todėl neveiks kaip atskiri failai aplanke public_html. Ją paleidžiate kaip Node.js programėlę (žr. 6 punktą). Tas pats galioja ir kitoms programėlėms su savo serveriu, pavyzdžiui, su Express backend.
• Programėlė su Supabase arba Lovable Cloud kaip backend. Duomenų bazė, prisijungimas ir funkcijos lieka Supabase arba Lovable. WebOké talpinate tik priekinę dalį (front-end). Kompiliuodami vis dėlto turite nurodyti Supabase adresą ir viešąjį raktą (žr. 5 punktą).

2. Kodo gavimas iš DI kūrimo įrankio per GitHub

Lovable ir Bolt gali perkelti Jūsų projektą į Jūsų GitHub saugyklą (repository). Tada pakeitimai sinchronizuojami abiem kryptimis: tai, ką pakeičiate DI kūrimo įrankyje, patenka į GitHub, o tai, ką pakeičiate GitHub, grįžta į DI kūrimo įrankį.

Lovable:

1. Atidarykite projektą ir eikite į Project settings > Git > GitHub.
2. Spustelėkite Add connection ir suteikite Lovable programėlei prieigą prie savo GitHub paskyros.
3. Skiltyje Accounts spustelėkite Connect. Lovable sukuria privačią saugyklą ir ją nuolat atnaujina.

Galima apsieiti ir be GitHub: per Download codebase skiltyje Project settings > Git atsisiųsite kodą (su mokamu Lovable planu).

Bolt:

1. Atidarykite projektą ir viršuje dešinėje spustelėkite GitHub piktogramą.
2. Prisijunkite prie GitHub, spustelėkite Authorize ir įdiekite Bolt GitHub programėlę.
3. Įveskite saugyklos pavadinimą ir spustelėkite Create repository. Toliau Bolt dirba šakoje main.

3. Statinės programėlės kompiliavimas ir įkėlimas

Programėlę kompiliuojate savo kompiuteryje. Tam Jums reikia Node.js 22 versijos (dabartinei Vite reikia bent 20.19 arba 22.12).

1. Gaukite kodą: atlikite savo saugyklos git clone arba išarchyvuokite atsisiųstą failą.
2. Atidarykite terminalą projekto aplanke ir įdiekite paketus komanda npm ci (arba npm install, jei nėra package-lock.json).
3. Sukompiliuokite programėlę komanda npm run build. Dabar turite aplanką dist su index.html ir aplanku assets.
4. Įkelkite aplanko dist turinį į domains/jusudomenas.nl/public_html naudodami FTP programą arba DirectAdmin File Manager. Neįkelkite paties aplanko dist, šaltinio kodo ar node_modules.
5. Įdėkite toliau pateiktą .htaccess failą į public_html.

Programėlė su keliais puslapiais (maršrutizatoriumi, router) naršyklėje rodo adresus, pavyzdžiui, jusudomenas.nl/apie-mus. Tokie puslapiai serveryje neegzistuoja kaip failai. Jei atnaujinsite tokį puslapį arba atidarysite nuorodą tiesiogiai, gausite 404 klaidą. Su šiuo .htaccess failu serveris tokius adresus nukreipia į index.html, o programėlė parodo tinkamą puslapį:

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

Esamus failus ir aplankus serveris rodo įprastai. Trūkstamas failas aplanke assets grąžina tikrą 404 klaidą, todėl klaidą pastebėsite lengviau. Visa kita nukreipiama į programėlę.

4. Programėlės talpinimas poaplankyje

Norite programėlę talpinti ne adresu jusudomenas.nl, o adresu jusudomenas.nl/app? Tada programėlė turi tai žinoti jau kompiliavimo metu. Kitaip naršyklė ieškos failų aplanke /assets, o ne /app/assets, ir ekranas liks baltas.

1. Faile vite.config.js (arba vite.config.ts) nustatykite parinktį base: '/app/'.
2. Nurodykite tą patį kelią maršrutizatoriui. Naudodami React Router tai padarysite su <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Sukompiliuokite iš naujo ir įkelkite aplanko dist turinį į public_html/app.
4. Į public_html/app/.htaccess įdėkite tą patį failą, kaip nurodyta aukščiau, tik su RewriteBase /app/.

5. Supabase, Lovable Cloud ir kiti nustatymai (env kintamieji)

Nustatymus, kurie prasideda VITE_, pavyzdžiui, VITE_SUPABASE_URL ir VITE_SUPABASE_PUBLISHABLE_KEY (senesniuose projektuose VITE_SUPABASE_ANON_KEY), Vite kūrimo metu įrašo į JavaScript failus. Vėliau serveryje jų nustatyti nebegalite.

• Reikšmes rasite savo projekto faile .env. Pavadinimus perkelkite tiksliai tokius pačius.
• Jei Jūsų projekte nėra failo .env, sukurkite jį patys projekto aplanke prieš paleisdami npm run build. Naudodami GitHub Actions, nustatykite juos kaip secret (žr. 7 punktą).
• Jei pakeitėte reikšmę, iš naujo sukurkite ir įkelkite programėlę.

6. Programėlė su savo serveriu: kaip Node.js programėlė

Programėlę su serverio kodu, pavyzdžiui, TanStack Start programėlę iš Lovable, įdiegsite naudodami Setup Node.js App DirectAdmin valdymo skydelyje. Kaip tai veikia, skaitykite straipsnyje Node.js aktyvavimas DirectAdmin. TanStack Start programėlei tai daroma taip:

1. Sukurkite programėlę savo kompiuteryje komanda NITRO_PRESET=node-server npm run build. Dabar atsiras aplankas .output.
2. Sukurkite programėlę skiltyje Setup Node.js App, pasirinkdami Node.js 22 ir aplanką už public_html ribų, pavyzdžiui, apps/manoapp.
3. Įkelkite aplanką .output į tą aplanką.
4. Tame pačiame aplanke sukurkite failą start.cjs su šia viena eilute ir laukelyje Application startup file įrašykite start.cjs:

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

5. Serveriui reikalingus nustatymus, pavyzdžiui, SUPABASE_URL ir SUPABASE_PUBLISHABLE_KEY, nurodykite skiltyje Environment variables.
6. Spustelėkite Restart. Tai darykite ir po kiekvieno naujo įkėlimo.

Failas start.cjs reikalingas todėl, kad .output serveris yra modernus JavaScript modulis (.mjs), o Node.js aplinka paleidimo failą įkelia senuoju būdu. Jei programėlė rodo klaidą 503, peržiūrėkite failą stderr.log savo programėlės aplanke.

7. Automatinis diegimas su GitHub Actions

Naudojant GitHub Actions, GitHub sukuria Jūsų programėlę po kiekvieno pakeitimo šakoje main ir perkelia rezultatą į Jūsų hostingo planą. Kadangi Lovable ir Bolt rašo į GitHub, pakeitimas iš DI kūrimo įrankio po kelių minučių jau būna internete. DirectAdmin Git funkcija nieko nesukuria, ji tik įkelia failus, todėl Vite programėlei GitHub Actions yra patogesnis.

Slaptažodžių ir raktų niekada nelaikykite savo repozitorijoje, juos įrašykite kaip secret į GitHub:

1. Atidarykite savo repozitoriją GitHub ir eikite į Settings > Secrets and variables > Actions.
2. Spustelėkite New repository secret, įveskite pavadinimą ir reikšmę, tada spustelėkite Add secret. Tai atlikite su kiekvienu pasirinkto varianto secret.
3. Savo repozitorijoje sukurkite failą .github/workflows/deploy.yml su vienu iš dviejų toliau pateiktų pavyzdžių.
4. Po kito pakeitimo skirtuke Actions patikrinkite, ar viskas pavyko. Paspaudę Run workflow, procesą galite paleisti ir rankiniu būdu.

Variantas A: per FTPS (visi hostingo planai). DirectAdmin sukurkite atskirą FTP paskyrą GitHub, prie Root Directory pasirinkdami parinktį Domain (žr. Kaip veikia FTP WebOké?). Secrets: FTP_SERVER (Jūsų plano serverio pavadinimas, pvz., linux2023.webawere.nl, o ne Jūsų domeno vardas), FTP_USERNAME (visas vardas, pvz., github@jusudomenas.nl), FTP_PASSWORD ir Jūsų programėlės VITE_ reikšmės.

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/

Variantas B: per SSH su rsync (planai su SSH). SSH yra planuose Power Webhost Three ir Four, AI Wordpress Three ir Power Reseller, per prievadą 1967 ir tik su raktu (žr. SSH prieiga ir Terminal DirectAdmin).

1. Savo kompiuteryje sukurkite atskirą raktą GitHub, be slaptažodžio: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Failo github-deploy.pub turinį įklijuokite DirectAdmin skiltyje SSH Keys > PASTE KEY.
3. Failo github-deploy (privataus rakto) turinį įrašykite į secret SSH_PRIVATE_KEY. Po to ištrinkite šį failą iš savo kompiuterio.
4. Paleiskite ssh-keyscan -p 1967 linux2023.webawere.nl ir išvestį įrašykite į secret SSH_KNOWN_HOSTS. Taip GitHub patikrina, kad tikrai jungiasi prie Jūsų serverio.
5. Kaip secret taip pat įrašykite SSH_HOST (serverio pavadinimą), SSH_USER (Jūsų DA naudotojo vardą), DOMEIN (pvz., jusudomenas.nl) ir VITE_ reikšmes.

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/"

Jei nenaudojate Supabase, praleiskite eilutes su VITE_SUPABASE arba vietoj jų įrašykite savo programėlės VITE_ kintamuosius. Jei prisijungti kelis kartus nepavyksta, serveris laikinai užblokuoja GitHub IP adresą. Tuomet patikrinkite savo secrets ir paleiskite workflow iš naujo.

8. Dažniausios klaidos

• Pagrindinis puslapis veikia, bet atnaujinus puslapį arba atidarius tiesioginę nuorodą rodoma 404 klaida. Trūksta 3 punkte nurodyto .htaccess failo arba jis yra netinkamame aplanke.
• Baltas ekranas. Atidarykite savo naršyklės kūrėjo įrankius (F12) ir peržiūrėkite skiltį Konsolė arba Tinklas. Matote 404 klaidas failams aplanke /assets? Tuomet neteisingas kelias: įkėlėte patį aplanką dist vietoj jo turinio arba programa yra poaplankyje be tinkamo base nustatymo (4 punktas).
• Programa įsikelia, bet prisijungimas ar duomenys neveikia, arba matote pranešimą, pvz., supabaseUrl is required. Kuriant programą (build) nebuvo VITE_ kintamųjų. Įrašykite juos į .env arba nustatykite kaip secret ir sukurkite programą iš naujo.
• Kūrimas (build) nepavyksta, rodomas pranešimas apie Node.js versiją. Naudokite Node.js 22 tiek savo kompiuteryje, tiek workflow (node-version: 22).
• npm ci nepavyksta. Nėra package-lock.json failo, pavyzdžiui, todėl, kad projekte yra tik bun.lock. Vieną kartą paleiskite npm install ir įkelkite naują package-lock.json į savo repozitoriją.
• Kūrimo rezultate nėra index.html. Tuomet tai programa su savo serveriu, pvz., TanStack Start. Sukonfigūruokite ją kaip Node.js programą (6 punktas).

Taip pat žiūrėkite: Prisijungimas per FileZilla (FTP, FTPS ir SFTP) ir SSH raktai ir prisijungimas per SSH.

Išsamus paaiškinimas su ekrano nuotraukomis: Node.js programos sukūrimas DirectAdmin vadove.