Jūsu lietotnes no Lovable, Bolt vai cita MI veidotāja izvietošana Jūsu WebOké hostingā

Vai Jums ir lietotne, kas izveidota ar Lovable, Bolt vai citu MI veidotāju, un vēlaties to izvietot savā domēnā pie WebOké? Tas ir iespējams. Šajā rakstā uzzināsiet, kā iegūt kodu no MI veidotāja, kā lietotni kompilēt un augšupielādēt, un kā GitHub to var izdarīt automātiski Jūsu vietā.

1. Kāda veida lietotne Jums ir?

Atveriet sava projekta failu package.json. Pēc tā var redzēt, kāda veida lietotne tā ir.

• Statiska lietotne (React ar Vite). Failā package.json ir norādīts vite, un nav servera ietvara. Ar npm run build izveidojat mapi dist ar parastiem HTML, JavaScript un CSS failiem. Tos augšupielādējat mapē public_html. Tas darbojas ar jebkuru hostinga plānu. Daudzas Bolt lietotnes un vecākās Lovable lietotnes ir veidotas šādi.
• Lietotne ar savu serveri. Kopš 13. maija 2026 Lovable veido lietotnes ar TanStack Start: tad failā package.json ir norādīts @tanstack/react-start. Šāda lietotne izpilda servera kodu, tāpēc tā nedarbojas kā atsevišķi faili mapē public_html. To iestatāt kā Node.js lietotni (skatiet 6. punktu). Tas pats attiecas uz citām lietotnēm ar savu serveri, piemēram, ar Express backend.
• Lietotne ar Supabase vai Lovable Cloud kā backend. Datubāze, pieteikšanās un funkcijas tad paliek pie Supabase vai Lovable. WebOké izvietojat tikai lietotnes priekšpusi (front-end). Kompilējot gan jānorāda Supabase adrese un publiskā atslēga (skatiet 5. punktu).

2. Koda iegūšana no MI veidotāja ar GitHub

Lovable un Bolt var ievietot Jūsu projektu Jūsu GitHub repozitorijā. Izmaiņas tad sinhronizējas abos virzienos: tas, ko maināt MI veidotājā, nonāk GitHub, un tas, ko maināt GitHub, atgriežas MI veidotājā.

Lovable:

1. Atveriet projektu un dodieties uz Project settings > Git > GitHub.
2. Noklikšķiniet uz Add connection un piešķiriet Lovable lietotnei piekļuvi savam GitHub kontam.
3. Sadaļā Accounts noklikšķiniet uz Connect. Lovable izveido privātu repozitoriju un uztur to atjauninātu.

Var iztikt arī bez GitHub: ar Download codebase sadaļā Project settings > Git varat lejupielādēt kodu (ar maksas Lovable abonementu).

Bolt:

1. Atveriet projektu un noklikšķiniet uz GitHub ikonas augšējā labajā stūrī.
2. Piesakieties GitHub, noklikšķiniet uz Authorize un instalējiet Bolt GitHub lietotni.
3. Ievadiet repozitorija nosaukumu un noklikšķiniet uz Create repository. Pēc tam Bolt strādā zarā main.

3. Statiskas lietotnes kompilēšana un augšupielāde

Lietotni kompilējat savā datorā. Tam nepieciešams Node.js, versija 22 (pašreizējā Vite versija prasa vismaz 20.19 vai 22.12).

1. Iegūstiet kodu: izpildiet git clone savam repozitorijam vai atarhivējiet lejupielādēto failu.
2. Atveriet termināli projekta mapē un instalējiet pakotnes ar npm ci (vai npm install, ja nav faila package-lock.json).
3. Kompilējiet lietotni ar npm run build. Tagad ir izveidota mape dist ar failu index.html un mapi assets.
4. Augšupielādējiet mapes dist saturu uz domains/jusudomens.nl/public_html ar FTP programmu vai ar File Manager DirectAdmin. Tātad neaugšupielādējiet pašu mapi dist, kā arī pirmkodu vai node_modules.
5. Ievietojiet zemāk redzamo .htaccess failu mapē public_html.

Lietotne ar vairākām lapām (maršrutētāju) pārlūkā rāda adreses, piemēram, jusudomens.nl/par-mums. Šīs lapas serverī neeksistē kā faili. Ja šādu lapu atsvaidzināt vai atverat saiti tieši, saņemat kļūdu 404. Ar šo .htaccess failu serveris novirza šīs adreses uz index.html, un lietotne parāda pareizo lapu:

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

Esošos failus un mapes serveris rāda kā parasti. Trūkstošs fails mapē assets atgriež īstu kļūdu 404, tāpēc kļūdu ir vieglāk pamanīt. Viss pārējais tiek nodots lietotnei.

4. Lietotnes ievietošana apakšmapē

Vēlaties lietotni izvietot nevis jusudomens.nl, bet jusudomens.nl/app? Tad lietotnei tas jāzina jau kompilēšanas laikā. Pretējā gadījumā pārlūks meklēs failus mapē /assets, nevis /app/assets, un ekrāns paliks balts.

1. Failā vite.config.js (vai vite.config.ts) iestatiet opciju base: '/app/'.
2. Norādiet to pašu ceļu maršrutētājam. React Router to var izdarīt ar <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Kompilējiet no jauna un augšupielādējiet mapes dist saturu uz public_html/app.
4. Failā public_html/app/.htaccess ievietojiet to pašu saturu kā iepriekš, ar RewriteBase /app/.

5. Supabase, Lovable Cloud un citi iestatījumi (env mainīgie)

Iestatījumus, kas sākas ar VITE_, piemēram, VITE_SUPABASE_URL un VITE_SUPABASE_PUBLISHABLE_KEY (vecākos projektos VITE_SUPABASE_ANON_KEY), Vite būvēšanas laikā ievieto JavaScript failos. Serverī tos vēlāk vairs nevar iestatīt.

• Vērtības atradīsiet sava projekta failā .env. Pārņemiet nosaukumus tieši tādus pašus.
• Ja Jūsu projektā nav faila .env, izveidojiet to projekta mapē, pirms palaižat npm run build. Izmantojot GitHub Actions, iestatiet tos kā secret (skatīt 7. punktu).
• Ja kāda vērtība ir mainīta, būvējiet un augšupielādējiet lietotni no jauna.

6. Lietotne ar savu serveri: kā Node.js lietotne

Lietotni ar servera kodu, piemēram, TanStack Start lietotni no Lovable, uzstādiet, izmantojot Setup Node.js App sadaļu DirectAdmin. Kā tas darbojas, lasiet rakstā Node.js aktivizēšana DirectAdmin. TanStack Start lietotnei rīkojieties šādi:

1. Būvējiet lietotni savā datorā ar NITRO_PRESET=node-server npm run build. Tagad ir izveidota mape .output.
2. Izveidojiet lietotni sadaļā Setup Node.js App ar Node.js 22 un mapi ārpus public_html, piemēram, apps/myapp.
3. Augšupielādējiet mapi .output šajā mapē.
4. Tajā pašā mapē izveidojiet failu start.cjs ar šo vienu rindu un ievadiet start.cjs laukā Application startup file:

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

5. Iestatījumus, kas nepieciešami serverim, piemēram, SUPABASE_URL un SUPABASE_PUBLISHABLE_KEY, ievadiet sadaļā Environment variables.
6. Noklikšķiniet uz Restart. Dariet to arī pēc katras jaunas augšupielādes.

Fails start.cjs ir nepieciešams, jo .output serveris ir moderns JavaScript modulis (.mjs), bet Node.js vide startēšanas failu ielādē vecajā veidā. Ja lietotne rāda kļūdu 503, skatiet failu stderr.log savas lietotnes mapē.

7. Automātiska izvietošana ar GitHub Actions

Ar GitHub Actions GitHub būvē Jūsu lietotni pēc katras izmaiņas zarā main un ievieto rezultātu Jūsu pakotnē. Tā kā Lovable un Bolt raksta uz GitHub, izmaiņa no MI veidotāja pēc dažām minūtēm jau ir tiešsaistē. Git funkcija DirectAdmin neko nebūvē, tā tikai izvieto failus, tāpēc Vite lietotnei ērtāks ir GitHub Actions.

Paroles un atslēgas nekad neglabājiet savā repozitorijā, bet gan kā secret GitHub:

1. Atveriet savu repozitoriju GitHub un dodieties uz Settings > Secrets and variables > Actions.
2. Noklikšķiniet uz New repository secret, ievadiet nosaukumu un vērtību un noklikšķiniet uz Add secret. Dariet to katram secret no izvēlētā varianta.
3. Izveidojiet savā repozitorijā failu .github/workflows/deploy.yml ar vienu no diviem tālāk redzamajiem piemēriem.
4. Pēc nākamās izmaiņas cilnē Actions pārbaudiet, vai viss izdevās. Ar Run workflow to varat palaist arī manuāli.

A variants: ar FTPS (visas hostinga pakotnes). Izveidojiet DirectAdmin atsevišķu FTP kontu GitHub vajadzībām, laukā Root directory izvēloties opciju Domain (skatiet Kā darbojas FTP WebOké?). Secrets: FTP_SERVER (Jūsu pakotnes servera nosaukums, piemēram, linux2023.webawere.nl, nevis Jūsu domēna nosaukums), FTP_USERNAME (pilnais nosaukums, piemēram, github@jusudomens.nl), FTP_PASSWORD un Jūsu lietotnes VITE_ vērtības.

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 variants: ar SSH un rsync (pakotnes ar SSH). SSH ir iekļauts pakotnēs Power Webhost Three un Four, AI Wordpress Three un Power Reseller, darbojas portā 1967 un tikai ar atslēgu (skatiet SSH piekļuve un Terminal DirectAdmin vidē).

1. Izveidojiet savā datorā atsevišķu atslēgu GitHub vajadzībām, bez paroles: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Ievietojiet faila github-deploy.pub saturu DirectAdmin sadaļā SSH Keys > PASTE KEY.
3. Ievietojiet faila github-deploy (privātās atslēgas) saturu secret SSH_PRIVATE_KEY. Pēc tam izdzēsiet šo failu no sava datora.
4. Palaidiet ssh-keyscan -p 1967 jususerveris.webawere.nl un ievietojiet izvadi secret SSH_KNOWN_HOSTS. Tā GitHub pārbauda, ka tiešām savienojas ar Jūsu serveri.
5. Kā secret pievienojiet arī SSH_HOST (servera nosaukums), SSH_USER (Jūsu DA lietotājvārds), DOMEIN (piemēram, jusudomens.nl) un VITE_ vērtības.

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

Ja neizmantojat Supabase, izlaidiet rindas ar VITE_SUPABASE vai ierakstiet to vietā savas lietotnes VITE_ mainīgos. Ja pieteikšanās vairākas reizes neizdodas, serveris uz laiku bloķē GitHub IP adresi. Tādā gadījumā pārbaudiet savus secrets un palaidiet workflow vēlreiz.

8. Biežāk pieļautās kļūdas

• Sākumlapa darbojas, bet, atsvaidzinot lapu vai atverot tiešu saiti, tiek parādīta kļūda 404. Trūkst 3. punktā minētā .htaccess faila, vai arī tas atrodas nepareizā mapē.
• Balts ekrāns. Atveriet savas pārlūkprogrammas izstrādātāja rīkus (F12) un skatiet sadaļu Konsole vai Tīkls. Vai redzat kļūdas 404 failiem mapē /assets? Tad ceļš nav pareizs: augšupielādēta ir pati mape dist, nevis tās saturs, vai arī lietotne atrodas apakšmapē bez pareizā base iestatījuma (4. punkts).
• Lietotne ielādējas, bet pieteikšanās vai dati nedarbojas, vai arī redzams ziņojums, piemēram, supabaseUrl is required. Būvēšanas laikā VITE_ mainīgie nebija pieejami. Norādiet tos failā .env vai kā secret un veiciet būvēšanu vēlreiz.
• Būvēšana neizdodas ar ziņojumu par Node.js versiju. Izmantojiet Node.js 22 gan savā datorā, gan workflow (node-version: 22).
• npm ci neizdodas. Nav faila package-lock.json, piemēram, tāpēc, ka projektam ir tikai bun.lock. Vienreiz palaidiet npm install un pievienojiet jauno package-lock.json savam repozitorijam.
• Būvējumā nav faila index.html. Tas nozīmē, ka tā ir lietotne ar savu serveri, piemēram, TanStack Start. Iestatiet to kā Node.js lietotni (6. punkts).

Skatiet arī: Savienojuma izveide ar FileZilla (FTP, FTPS un SFTP) un SSH atslēgas un pieteikšanās ar SSH.

Detalizēts skaidrojums ar ekrānuzņēmumiem: Node.js lietotnes iestatīšana DirectAdmin rokasgrāmatā.