Namestitev Vaše aplikacije iz Lovable, Bolt ali drugega orodja UI za izdelavo aplikacij na gostovanje WebOké

Ste aplikacijo ustvarili z Lovable, Bolt ali drugim UI-graditeljem in jo želite postaviti na svojo domeno pri WebOké? To je mogoče. V tem članku boste prebrali, kako kodo pridobite iz UI-graditelja, kako aplikacijo zgradite in naložite ter kako lahko GitHub to samodejno opravi namesto Vas.

1. Kakšno aplikacijo imate?

Odprite datoteko package.json v svojem projektu. Iz nje je razvidno, za kakšno aplikacijo gre.

• Statična aplikacija (React z Vite). V package.json je naveden vite, strežniškega ogrodja pa ni. Z ukazom npm run build ustvarite mapo dist z običajnimi datotekami HTML, JavaScript in CSS. Te naložite v public_html. To deluje na vsakem paketu gostovanja. Tako je zgrajenih veliko aplikacij iz Bolta in starejše aplikacije iz Lovabla.
• Aplikacija z lastnim strežnikom. Lovable od 13. maja 2026 ustvarja aplikacije s TanStack Start: v tem primeru je v package.json naveden @tanstack/react-start. Takšna aplikacija izvaja strežniško kodo, zato ne deluje kot samostojne datoteke v public_html. Postavite jo kot aplikacijo Node.js (glejte točko 6). Enako velja za druge aplikacije z lastnim strežnikom, na primer z zaledjem Express.
• Aplikacija s Supabase ali Lovable Cloud kot zaledjem. Podatkovna baza, prijava in funkcije v tem primeru ostanejo pri Supabase ali Lovable. Na WebOké postavite samo uporabniški del (front-end). Pri gradnji pa morate navesti naslov in javni ključ Supabase (glejte točko 5).

2. Pridobivanje kode iz UI-graditelja prek GitHuba

Lovable in Bolt lahko Vaš projekt shranita v lasten repozitorij GitHub. Spremembe se nato prenašajo v obe smeri: kar spremenite v UI-graditelju, se prenese v GitHub, kar spremenite v GitHubu, pa se vrne v UI-graditelj.

V Lovable:

1. Odprite svoj projekt in pojdite na Project settings > Git > GitHub.
2. Kliknite Add connection in aplikaciji Lovable omogočite dostop do svojega računa GitHub.
3. Pri Accounts kliknite Connect. Lovable ustvari zasebni repozitorij in ga sproti posodablja.

Gre tudi brez GitHuba: z možnostjo Download codebase v Project settings > Git prenesete kodo (pri plačljivi naročnini Lovable).

V Boltu:

1. Odprite svoj projekt in desno zgoraj kliknite ikono GitHub.
2. Prijavite se v GitHub, kliknite Authorize in namestite Boltovo aplikacijo GitHub.
3. Vnesite ime repozitorija in kliknite Create repository. Bolt nato dela v veji main.

3. Gradnja in nalaganje statične aplikacije

Aplikacijo zgradite na svojem računalniku. Za to potrebujete Node.js, različico 22 (trenutni Vite zahteva vsaj 20.19 ali 22.12).

1. Pridobite kodo: izvedite git clone svojega repozitorija ali razširite preneseno datoteko.
2. Odprite terminal v mapi projekta in namestite pakete z ukazom npm ci (ali npm install, če datoteke package-lock.json ni).
3. Zgradite aplikacijo z ukazom npm run build. Zdaj imate mapo dist z datoteko index.html in mapo assets.
4. Naložite vsebino mape dist v domains/vasadomena.si/public_html, s programom FTP ali z orodjem File Manager v DirectAdminu. Ne nalagajte torej same mape dist, prav tako ne izvorne kode ali mape node_modules.
5. V public_html postavite spodnjo datoteko .htaccess.

Aplikacija z več stranmi (z usmerjevalnikom) v brskalniku prikazuje naslove, kot je vasadomena.si/o-nas. Te strani na strežniku ne obstajajo kot datoteke. Če takšno stran osvežite ali povezavo odprete neposredno, dobite napako 404. S to datoteko .htaccess strežnik te naslove preusmeri na index.html, aplikacija pa nato prikaže pravo stran:

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

Obstoječe datoteke in mape strežnik prikaže kot običajno. Manjkajoča datoteka v assets vrne pravo napako 404, tako da napako lažje opazite. Vse drugo se posreduje aplikaciji.

4. Postavitev aplikacije v podmapo

Želite aplikacijo postaviti na vasadomena.si/app namesto na vasadomena.si? Potem mora aplikacija to vedeti že pri gradnji. Sicer brskalnik išče datoteke v /assets namesto v /app/assets in zaslon ostane bel.

1. V vite.config.js (ali vite.config.ts) nastavite možnost base: '/app/'.
2. Usmerjevalniku podajte isto pot. Pri React Router to storite z <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Ponovno zgradite aplikacijo in vsebino mape dist naložite v public_html/app.
4. V public_html/app/.htaccess postavite enako datoteko kot zgoraj, z vrstico RewriteBase /app/.

5. Supabase, Lovable Cloud in druge nastavitve (spremenljivke okolja)

Nastavitve, ki se začnejo z VITE_, kot sta VITE_SUPABASE_URL in VITE_SUPABASE_PUBLISHABLE_KEY (v starejših projektih VITE_SUPABASE_ANON_KEY), Vite med gradnjo vstavi v datoteke JavaScript. Na strežniku jih pozneje ne morete več nastaviti.

• Vrednosti najdete v datoteki .env Vašega projekta. Imena prepišite natanko tako, kot so zapisana.
• Če datoteke .env v Vašem projektu ni, jo ustvarite sami v mapi projekta, preden zaženete npm run build. Pri GitHub Actions jih nastavite kot secret (glejte točko 7).
• Če ste spremenili katero od vrednosti, aplikacijo znova zgradite in naložite.

6. Aplikacija z lastnim strežnikom: kot aplikacija Node.js

Aplikacijo s strežniško kodo, kot je aplikacija TanStack Start iz Lovable, postavite z Setup Node.js App v DirectAdmin. Kako to deluje, preberite v članku Aktivacija Node.js v DirectAdmin. Za aplikacijo TanStack Start postopate takole:

1. Aplikacijo zgradite na svojem računalniku z ukazom NITRO_PRESET=node-server npm run build. Zdaj imate mapo .output.
2. V Setup Node.js App ustvarite aplikacijo z Node.js 22 in mapo zunaj public_html, na primer apps/mojaapp.
3. Mapo .output naložite v to mapo.
4. V isti mapi ustvarite datoteko start.cjs s to eno vrstico in v polje Application startup file vnesite start.cjs:

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

5. Nastavitve, ki jih strežnik potrebuje, kot sta SUPABASE_URL in SUPABASE_PUBLISHABLE_KEY, vnesite pod Environment variables.
6. Kliknite Restart. To storite tudi po vsakem novem nalaganju.

Datoteka start.cjs je potrebna, ker je strežnik iz .output sodoben modul JavaScript (.mjs), okolje Node.js pa zagonsko datoteko naloži na star način. Če aplikacija vrne napako 503, preverite datoteko stderr.log v mapi Vaše aplikacije.

7. Samodejna objava z GitHub Actions

Z GitHub Actions GitHub ob vsaki spremembi v veji main zgradi Vašo aplikacijo in rezultat naloži na Vaš paket. Ker Lovable in Bolt zapisujeta v GitHub, je sprememba iz graditelja UI tako po nekaj minutah na spletu. Funkcija Git v DirectAdmin ničesar ne gradi, temveč samo postavi datoteke, zato je za aplikacijo Vite GitHub Actions bolj priročen.

Gesel in ključev nikoli ne shranite v repozitorij, temveč kot secret v GitHub:

1. Odprite svoj repozitorij na GitHubu in pojdite na Settings > Secrets and variables > Actions.
2. Kliknite New repository secret, vnesite ime in vrednost ter kliknite Add secret. To storite za vsak secret iz različice, ki jo izberete.
3. V repozitoriju ustvarite datoteko .github/workflows/deploy.yml z enim od dveh spodnjih primerov.
4. Po naslednji spremembi na zavihku Actions preverite, ali je uspelo. Z Run workflow ga lahko zaženete tudi ročno.

Različica A: prek FTPS (vsi paketi gostovanja). V DirectAdmin ustvarite ločen račun FTP za GitHub, pri Root Directory pa izberite možnost Domain (glejte Kako deluje FTP pri WebOké?). Secrets: FTP_SERVER (ime strežnika Vašega paketa, na primer linux2023.webawere.nl, ne ime Vaše domene), FTP_USERNAME (polno ime, na primer github@vasadomena.si), FTP_PASSWORD in vrednosti VITE_ Vaše aplikacije.

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/

Različica B: prek SSH z rsync (paketi s SSH). SSH je vključen v pakete Power Webhost Three in Four, AI Wordpress Three in Power Reseller, na vratih 1967 in samo s ključem (glejte Dostop SSH in Terminal v DirectAdmin).

1. Na svojem računalniku ustvarite ločen ključ za GitHub, brez gesla: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Vsebino datoteke github-deploy.pub vnesite v DirectAdmin pri SSH Keys > PASTE KEY.
3. Vsebino datoteke github-deploy (zasebni ključ) shranite v secret SSH_PRIVATE_KEY. Nato datoteko izbrišite s svojega računalnika.
4. Zaženite ssh-keyscan -p 1967 linux2023.webawere.nl in izpis shranite v secret SSH_KNOWN_HOSTS. Tako GitHub preveri, da se res povezuje z Vašim strežnikom.
5. Kot secret shranite tudi SSH_HOST (ime strežnika), SSH_USER (Vaše uporabniško ime DA), DOMEIN (na primer vasadomena.si) in vrednosti 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/"

Če ne uporabljate Supabase, vrstice z VITE_SUPABASE izpustite ali vanje vpišite spremenljivke VITE_ svoje aplikacije. Če prijava nekajkrat ne uspe, strežnik začasno blokira naslov IP GitHuba. V tem primeru preverite svoje secrets in znova zaženite workflow.

8. Pogoste napake

• Domača stran deluje, vendar osvežitev ali neposredna povezava vrne napako 404. Datoteka .htaccess iz točke 3 manjka ali je v napačni mapi.
• Bel zaslon. Odprite orodja za razvijalce v svojem brskalniku (F12) in preverite zavihek Konzola ali Omrežje. Ali vidite napake 404 pri datotekah v /assets? Potem pot ni pravilna: naložili ste samo mapo dist namesto njene vsebine ali pa je aplikacija v podmapi brez pravilne nastavitve base (točka 4).
• Aplikacija se naloži, vendar prijava ali podatki ne delujejo ali pa vidite sporočilo, kot je supabaseUrl is required. Spremenljivke VITE_ ob gradnji niso bile na voljo. Dodajte jih v .env ali kot secret in aplikacijo znova zgradite.
• Gradnja ne uspe s sporočilom o različici Node.js. Uporabite Node.js 22, tako na svojem računalniku kot v workflowu (node-version: 22).
• npm ci ne uspe. Datoteke package-lock.json ni, na primer zato, ker ima projekt samo bun.lock. Enkrat zaženite npm install in novo datoteko package-lock.json dodajte v svoj repozitorij.
• V buildu ni datoteke index.html. Potem gre za aplikacijo z lastnim strežnikom, kot je TanStack Start. Nastavite jo kot aplikacijo Node.js (točka 6).

Glejte tudi: Povezovanje s FileZillo (FTP, FTPS in SFTP) in Ključi SSH in prijava s SSH.

Podrobna razlaga s posnetki zaslona: Nastavitev aplikacije Node.js v priročniku za DirectAdmin.