Postavite svoju aplikaciju iz Lovablea, Bolta ili drugog AI alata za izradu na svoj WebOké hosting

Jeste li izradili aplikaciju s alatom Lovable, Bolt ili nekim drugim AI alatom za izradu i želite je postaviti na Vašu domenu kod WebOké? To je moguće. U ovom članku saznat ćete kako preuzeti kod iz AI alata, kako izgraditi i prenijeti aplikaciju te kako GitHub to može automatski učiniti za Vas.

1. Kakvu aplikaciju imate?

Otvorite datoteku package.json u Vašem projektu. Iz nje možete vidjeti o kojoj se vrsti aplikacije radi.

• Statična aplikacija (React s Viteom). U package.json navedeno je vite, a nema poslužiteljskog frameworka. Naredbom npm run build izradit ćete mapu dist s običnim HTML, JavaScript i CSS datotekama. Njih prenesite u public_html. To funkcionira na svakom hosting paketu. Mnoge aplikacije iz Bolta i starije aplikacije iz Lovablea izgrađene su na ovaj način.
• Aplikacija s vlastitim poslužiteljem. Lovable od 13. svibnja 2026. izrađuje aplikacije s TanStack Startom: tada se u package.json nalazi @tanstack/react-start. Takva aplikacija pokreće poslužiteljski kod i stoga ne radi kao zasebne datoteke u public_html. Postavite je kao Node.js aplikaciju (vidi točku 6). Isto vrijedi i za druge aplikacije s vlastitim poslužiteljem, poput Express backenda.
• Aplikacija sa Supabaseom ili Lovable Cloudom kao backendom. Baza podataka, prijava i funkcije tada ostaju kod Supabasea ili Lovablea. Na WebOké postavljate samo prednji dio (front-end). Prilikom izgradnje ipak navedite adresu i javni ključ Supabasea (vidi točku 5).

2. Preuzimanje koda iz AI alata putem GitHuba

Lovable i Bolt mogu Vaš projekt postaviti u Vaš vlastiti GitHub repozitorij. Promjene se tada sinkroniziraju u oba smjera: ono što promijenite u AI alatu dolazi u GitHub, a ono što promijenite u GitHubu vraća se u AI alat.

U Lovableu:

1. Otvorite projekt i idite na Project settings > Git > GitHub.
2. Kliknite Add connection i dajte aplikaciji Lovable pristup Vašem GitHub računu.
3. Kod stavke Accounts kliknite Connect. Lovable izrađuje privatni repozitorij i održava ga ažurnim.

Moguće je i bez GitHuba: opcijom Download codebase pod Project settings > Git preuzimate kod (uz plaćenu Lovable pretplatu).

U Boltu:

1. Otvorite projekt i kliknite ikonu GitHuba u gornjem desnom kutu.
2. Prijavite se na GitHub, kliknite Authorize i instalirajte Boltovu GitHub aplikaciju.
3. Unesite naziv repozitorija i kliknite Create repository. Bolt zatim radi u grani main.

3. Izgradnja i prijenos statične aplikacije

Aplikaciju gradite na vlastitom računalu. Za to Vam je potreban Node.js, verzija 22 (trenutačni Vite zahtijeva najmanje 20.19 ili 22.12).

1. Preuzmite kod: git clone Vašeg repozitorija ili raspakirajte preuzetu datoteku.
2. Otvorite terminal u mapi projekta i instalirajte pakete naredbom npm ci (ili npm install ako ne postoji package-lock.json).
3. Izgradite aplikaciju naredbom npm run build. Sada postoji mapa dist s datotekom index.html i mapom assets.
4. Prenesite sadržaj mape dist u domains/vasadomena.hr/public_html, pomoću FTP programa ili alata File Manager u DirectAdminu. Dakle, nemojte prenositi samu mapu dist, kao ni izvorni kod ili node_modules.
5. Postavite datoteku .htaccess u nastavku u public_html.

Aplikacija s više stranica (s routerom) prikazuje u pregledniku adrese poput vasadomena.hr/o-nama. Te stranice ne postoje kao datoteke na poslužitelju. Ako osvježite takvu stranicu ili izravno otvorite poveznicu, dobit ćete pogrešku 404. Pomoću ove datoteke .htaccess poslužitelj te adrese preusmjerava na index.html, a aplikacija tada prikazuje ispravnu stranicu:

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

Postojeće datoteke i mape poslužitelj prikazuje uobičajeno. Datoteka koja nedostaje u mapi assets daje pravu pogrešku 404, tako da lakše uočite grešku. Sve ostalo ide u aplikaciju.

4. Postavljanje aplikacije u podmapu

Želite li aplikaciju postaviti ne na vasadomena.hr, nego na vasadomena.hr/app? Tada aplikacija to mora znati već pri izgradnji. U suprotnom preglednik traži datoteke u /assets umjesto u /app/assets i zaslon ostaje bijel.

1. U datoteci vite.config.js (ili vite.config.ts) postavite opciju base: '/app/'.
2. Routeru zadajte istu putanju. Kod React Routera to činite pomoću <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Ponovno izgradite aplikaciju i prenesite sadržaj mape dist u public_html/app.
4. U public_html/app/.htaccess postavite istu datoteku kao gore, s RewriteBase /app/.

5. Supabase, Lovable Cloud i ostale postavke (env varijable)

Postavke koje počinju s VITE_, kao što su VITE_SUPABASE_URL i VITE_SUPABASE_PUBLISHABLE_KEY (u starijim projektima VITE_SUPABASE_ANON_KEY), Vite prilikom izgradnje ugrađuje u JavaScript datoteke. Na poslužitelju ih naknadno više ne možete postaviti.

• Vrijednosti ćete pronaći u datoteci .env Vašeg projekta. Nazive preuzmite točno onako kako su napisani.
• Ako u Vašem projektu nema datoteke .env, sami je izradite u mapi projekta prije nego što pokrenete npm run build. Kod GitHub Actions postavite ih kao secret (pogledajte točku 7).
• Ako ste promijenili neku vrijednost, ponovno izgradite i prenesite aplikaciju.

6. Aplikacija s vlastitim poslužiteljem: kao Node.js aplikacija

Aplikaciju s poslužiteljskim kodom, kao što je TanStack Start aplikacija iz Lovablea, postavljate putem opcije Setup Node.js App u DirectAdminu. Kako to funkcionira, pročitajte u članku Aktivacija Node.js-a u DirectAdminu. Za TanStack Start aplikaciju postupak je sljedeći:

1. Izgradite aplikaciju na svom računalu naredbom NITRO_PRESET=node-server npm run build. Sada postoji mapa .output.
2. Izradite aplikaciju u opciji Setup Node.js App, s Node.js 22 i mapom izvan public_html, na primjer apps/myapp.
3. Prenesite mapu .output u tu mapu.
4. U istoj mapi izradite datoteku start.cjs s ovim jednim retkom i upišite start.cjs u polje Application startup file:

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

5. Postavke koje su poslužitelju potrebne, kao što su SUPABASE_URL i SUPABASE_PUBLISHABLE_KEY, unesite pod Environment variables.
6. Kliknite na Restart. To učinite i nakon svakog novog prijenosa.

Datoteka start.cjs potrebna je jer je poslužitelj iz .output moderni JavaScript modul (.mjs), a Node.js okruženje početnu datoteku učitava na stari način. Ako aplikacija javlja pogrešku 503, pogledajte datoteku stderr.log u mapi Vaše aplikacije.

7. Automatska objava pomoću GitHub Actions

Uz GitHub Actions, GitHub gradi Vašu aplikaciju pri svakoj promjeni u grani main i postavlja rezultat na Vaš paket. Budući da Lovable i Bolt zapisuju na GitHub, promjena iz AI alata za izradu bit će online već nakon nekoliko minuta. Git funkcija u DirectAdminu ništa ne gradi, ona samo postavlja datoteke. Zato je za Vite aplikaciju GitHub Actions praktičniji.

Lozinke i ključeve nikada ne stavljajte u svoj repozitorij, nego ih spremite kao secret na GitHubu:

1. Otvorite svoj repozitorij na GitHubu i idite na Settings > Secrets and variables > Actions.
2. Kliknite na New repository secret, unesite naziv i vrijednost te kliknite na Add secret. Učinite to za svaki secret iz varijante koju odaberete.
3. U svom repozitoriju izradite datoteku .github/workflows/deploy.yml s jednim od dva primjera u nastavku.
4. Nakon sljedeće promjene na kartici Actions provjerite je li sve uspjelo. Pomoću Run workflow možete ga pokrenuti i ručno.

Varijanta A: putem FTPS-a (svi hosting paketi). U DirectAdminu izradite zaseban FTP račun za GitHub i kod Root Directory odaberite opciju Domain (pogledajte Kako funkcionira FTP kod WebOké?). Secrets: FTP_SERVER (naziv poslužitelja Vašeg paketa, primjerice linux2023.webawere.nl, a ne Vaš naziv domene), FTP_USERNAME (puni naziv, primjerice github@vasadomena.hr), FTP_PASSWORD te VITE_ vrijednosti 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/

Varijanta B: putem SSH-a s rsyncom (paketi sa SSH-om). SSH je uključen u pakete Power Webhost Three i Four, AI Wordpress Three i Power Reseller, na portu 1967 i samo s ključem (pogledajte SSH pristup i Terminal u DirectAdminu).

1. Na svom računalu izradite zaseban ključ za GitHub, bez lozinke: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Sadržaj datoteke github-deploy.pub unesite u DirectAdminu pod SSH Keys > PASTE KEY.
3. Sadržaj datoteke github-deploy (privatni ključ) spremite u secret SSH_PRIVATE_KEY. Nakon toga izbrišite datoteku sa svog računala.
4. Pokrenite ssh-keyscan -p 1967 nazivposluzitelja.webawere.nl i ispis spremite u secret SSH_KNOWN_HOSTS. Tako GitHub provjerava da se zaista povezuje s Vašim poslužiteljem.
5. Kao secret spremite i SSH_HOST (naziv poslužitelja), SSH_USER (Vaše DA korisničko ime), DOMEIN (primjerice vasadomena.hr) te VITE_ vrijednosti.

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

Ako ne koristite Supabase, izostavite retke s VITE_SUPABASE ili umjesto njih unesite VITE_ varijable svoje aplikacije. Ako prijava nekoliko puta ne uspije, poslužitelj privremeno blokira IP adresu GitHuba. U tom slučaju provjerite svoje secrets i ponovno pokrenite workflow.

8. Česte pogreške

• Početna stranica radi, ali osvježavanje ili izravna poveznica daje 404. Datoteka .htaccess iz točke 3 nedostaje ili se nalazi u pogrešnoj mapi.
• Bijeli zaslon. Otvorite alate za razvojne programere u svojem pregledniku (F12) i pogledajte pod Console ili Network. Vidite li pogreške 404 za datoteke u /assets? Onda putanja nije ispravna: učitali ste samu mapu dist umjesto njezina sadržaja ili se aplikacija nalazi u podmapi bez ispravne vrijednosti base (točka 4).
• Aplikacija se učitava, ali prijava ili podaci ne rade ili vidite poruku poput supabaseUrl is required. Varijable VITE_ nisu bile dostupne prilikom izrade. Postavite ih u .env ili kao secret i ponovno izradite aplikaciju.
• Izrada (build) ne uspijeva uz poruku o verziji Node.js-a. Koristite Node.js 22, na svojem računalu i u workflowu (node-version: 22).
• npm ci ne uspijeva. Ne postoji package-lock.json, primjerice zato što projekt ima samo bun.lock. Jednom pokrenite npm install i dodajte novi package-lock.json u svoj repozitorij.
• U buildu nema datoteke index.html. Onda je riječ o aplikaciji s vlastitim poslužiteljem, poput TanStack Starta. Postavite je kao Node.js aplikaciju (točka 6).

Pogledajte i: Povezivanje s FileZillom (FTP, FTPS i SFTP) i SSH ključevi i prijava putem SSH-a.

Detaljno objašnjenje sa snimkama zaslona: Postavljanje Node.js aplikacije u priručniku za DirectAdmin.