Μεταφέρετε την εφαρμογή σας από το Lovable, το Bolt ή άλλον AI builder στο hosting σας στη WebOké

Έχετε δημιουργήσει μια εφαρμογή με το Lovable, το Bolt ή κάποιον άλλο AI builder και θέλετε να τη δημοσιεύσετε στο δικό σας domain στη WebOké; Αυτό είναι εφικτό. Σε αυτό το άρθρο θα δείτε πώς να πάρετε τον κώδικα από τον AI builder, πώς να κάνετε build και upload την εφαρμογή και πώς το GitHub μπορεί να το κάνει αυτόματα για εσάς.

1. Τι είδους εφαρμογή έχετε;

Ανοίξτε το αρχείο package.json στο project σας. Από αυτό φαίνεται τι είδους εφαρμογή είναι.

• Στατική εφαρμογή (React με Vite). Στο package.json υπάρχει το vite και κανένα server framework. Με την εντολή npm run build δημιουργείται ένας φάκελος dist με απλά αρχεία HTML, JavaScript και CSS. Αυτά τα ανεβάζετε στο public_html. Αυτό λειτουργεί σε κάθε πακέτο hosting. Πολλές εφαρμογές από το Bolt και οι παλαιότερες εφαρμογές από το Lovable είναι φτιαγμένες με αυτόν τον τρόπο.
• Εφαρμογή με δικό της server. Από τις 13 Μαΐου 2026 το Lovable δημιουργεί εφαρμογές με TanStack Start: σε αυτή την περίπτωση υπάρχει το @tanstack/react-start στο package.json. Μια τέτοια εφαρμογή εκτελεί κώδικα στον server και επομένως δεν λειτουργεί ως μεμονωμένα αρχεία στο public_html. Τη ρυθμίζετε ως εφαρμογή Node.js (δείτε το σημείο 6). Το ίδιο ισχύει για άλλες εφαρμογές με δικό τους server, όπως ένα backend με Express.
• Εφαρμογή με Supabase ή Lovable Cloud ως backend. Η βάση δεδομένων, η σύνδεση χρηστών και οι λειτουργίες παραμένουν στο Supabase ή στο Lovable. Στη WebOké τοποθετείτε μόνο το εμπρόσθιο τμήμα (το front-end). Κατά το build πρέπει όμως να δώσετε τη διεύθυνση και το δημόσιο κλειδί του Supabase (δείτε το σημείο 5).

2. Λήψη του κώδικα από τον AI builder μέσω GitHub

Το Lovable και το Bolt μπορούν να τοποθετήσουν το project σας σε δικό σας GitHub repository. Οι αλλαγές συγχρονίζονται και προς τις δύο κατευθύνσεις: ό,τι αλλάζετε στον AI builder περνά στο GitHub και ό,τι αλλάζετε στο GitHub επιστρέφει στον AI builder.

Στο Lovable:

1. Ανοίξτε το project σας και μεταβείτε στο Project settings > Git > GitHub.
2. Κάντε κλικ στο Add connection και δώστε στην εφαρμογή Lovable πρόσβαση στον λογαριασμό σας στο GitHub.
3. Στην ενότητα Accounts, κάντε κλικ στο Connect. Το Lovable δημιουργεί ένα ιδιωτικό repository και το ενημερώνει διαρκώς.

Μπορείτε να το κάνετε και χωρίς GitHub: με το Download codebase στο Project settings > Git κατεβάζετε τον κώδικα (σε επί πληρωμή συνδρομή Lovable).

Στο Bolt:

1. Ανοίξτε το project σας και κάντε κλικ στο εικονίδιο του GitHub πάνω δεξιά.
2. Συνδεθείτε στο GitHub, κάντε κλικ στο Authorize και εγκαταστήστε την εφαρμογή GitHub του Bolt.
3. Συμπληρώστε ένα όνομα για το repository και κάντε κλικ στο Create repository. Στη συνέχεια το Bolt εργάζεται στο branch main.

3. Build και upload μιας στατικής εφαρμογής

Κάνετε build την εφαρμογή στον δικό σας υπολογιστή. Για αυτό χρειάζεστε Node.js, έκδοση 22 (η τρέχουσα έκδοση του Vite απαιτεί τουλάχιστον 20.19 ή 22.12).

1. Πάρτε τον κώδικα: κάντε git clone το repository σας ή αποσυμπιέστε το αρχείο που κατεβάσατε.
2. Ανοίξτε ένα τερματικό στον φάκελο του project και εγκαταστήστε τα πακέτα με npm ci (ή με npm install αν δεν υπάρχει package-lock.json).
3. Κάντε build την εφαρμογή με npm run build. Τώρα υπάρχει ένας φάκελος dist με ένα index.html και έναν φάκελο assets.
4. Ανεβάστε τα περιεχόμενα του dist στο domains/yourdomain.gr/public_html, με ένα πρόγραμμα FTP ή με το File Manager στο DirectAdmin. Μην ανεβάσετε λοιπόν τον ίδιο τον φάκελο dist, ούτε τον πηγαίο κώδικα ή το node_modules.
5. Τοποθετήστε το παρακάτω αρχείο .htaccess στο public_html.

Μια εφαρμογή με πολλές σελίδες (ένας router) εμφανίζει στον browser διευθύνσεις όπως yourdomain.gr/about-us. Αυτές οι σελίδες δεν υπάρχουν ως αρχεία στον server. Αν ανανεώσετε μια τέτοια σελίδα ή ανοίξετε απευθείας τον σύνδεσμο, θα λάβετε σφάλμα 404. Με αυτό το αρχείο .htaccess ο server ανακατευθύνει αυτές τις διευθύνσεις στο 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]

Τα υπάρχοντα αρχεία και φακέλους ο server τα εμφανίζει κανονικά. Ένα αρχείο που λείπει από το assets επιστρέφει πραγματικό σφάλμα 404, ώστε να εντοπίζετε ευκολότερα ένα πρόβλημα. Όλα τα υπόλοιπα πηγαίνουν στην εφαρμογή.

4. Τοποθέτηση της εφαρμογής σε υποφάκελο

Θέλετε η εφαρμογή να βρίσκεται όχι στο yourdomain.gr αλλά στο yourdomain.gr/app; Τότε η εφαρμογή πρέπει να το γνωρίζει ήδη κατά το build. Διαφορετικά ο browser αναζητά τα αρχεία στο /assets αντί για το /app/assets και η οθόνη παραμένει λευκή.

1. Ορίστε στο vite.config.js (ή στο vite.config.ts) την επιλογή base: '/app/'.
2. Δώστε την ίδια διαδρομή και στον router. Στο React Router αυτό γίνεται με <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Κάντε ξανά build και ανεβάστε τα περιεχόμενα του 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 κατά το build. Στον server δεν μπορείτε πλέον να τις ορίσετε εκ των υστέρων.

• Θα βρείτε τις τιμές στο αρχείο .env του έργου σας. Αντιγράψτε τα ονόματα ακριβώς όπως είναι.
• Αν το .env δεν υπάρχει στο έργο σας, δημιουργήστε το μόνοι σας στον φάκελο του έργου πριν εκτελέσετε το npm run build. Στο GitHub Actions τις ορίζετε ως secret (δείτε το σημείο 7).
• Αν αλλάξατε κάποια τιμή, κάντε ξανά build και ανεβάστε ξανά την εφαρμογή.

6. Εφαρμογή με δικό της server: ως εφαρμογή Node.js

Μια εφαρμογή με κώδικα server, όπως μια εφαρμογή TanStack Start από το Lovable, τη στήνετε με το Setup Node.js App στο DirectAdmin. Πώς λειτουργεί αυτό, θα το διαβάσετε στο άρθρο Ενεργοποίηση Node.js στο DirectAdmin. Για μια εφαρμογή TanStack Start η διαδικασία είναι η εξής:

1. Κάντε build της εφαρμογής στον υπολογιστή σας με 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. Ορίστε τις ρυθμίσεις που χρειάζεται ο server, όπως SUPABASE_URL και SUPABASE_PUBLISHABLE_KEY, στο Environment variables.
6. Κάντε κλικ στο Restart. Κάντε το επίσης μετά από κάθε νέο ανέβασμα.

Το μικρό αρχείο start.cjs χρειάζεται επειδή ο server του .output είναι ένα σύγχρονο module JavaScript (.mjs), ενώ το περιβάλλον Node.js φορτώνει το αρχείο εκκίνησης με τον παλιό τρόπο. Αν η εφαρμογή εμφανίζει σφάλμα 503, ελέγξτε το stderr.log στον φάκελο της εφαρμογής σας.

7. Αυτόματη ανάπτυξη με GitHub Actions

Με το GitHub Actions, το GitHub δημιουργεί την εφαρμογή σας σε κάθε αλλαγή στο branch main και ανεβάζει το αποτέλεσμα στο πακέτο σας. Επειδή το Lovable και το Bolt γράφουν στο GitHub, μια αλλαγή από τον AI builder είναι online μέσα σε λίγα λεπτά. Η λειτουργία Git στο DirectAdmin δεν κάνει build, απλώς τοποθετεί αρχεία. Γι' αυτό, για μια εφαρμογή Vite το GitHub Actions είναι πιο πρακτικό.

Κωδικούς πρόσβασης και κλειδιά δεν τα βάζετε ποτέ στο repository σας, αλλά ως secret στο GitHub:

1. Ανοίξτε το repository σας στο GitHub και μεταβείτε στο Settings > Secrets and variables > Actions.
2. Κάντε κλικ στο New repository secret, συμπληρώστε το όνομα και την τιμή και κάντε κλικ στο Add secret. Επαναλάβετε για κάθε secret της επιλογής που θα διαλέξετε.
3. Δημιουργήστε στο repository σας το αρχείο .github/workflows/deploy.yml με ένα από τα δύο παραδείγματα παρακάτω.
4. Μετά την επόμενη αλλαγή, ελέγξτε στην καρτέλα Actions αν ολοκληρώθηκε επιτυχώς. Με το Run workflow μπορείτε επίσης να το εκκινήσετε χειροκίνητα.

Επιλογή A: μέσω FTPS (όλα τα πακέτα hosting). Δημιουργήστε στο DirectAdmin έναν ξεχωριστό λογαριασμό FTP για το GitHub, με την επιλογή Domain στο Root Directory (δείτε Πώς λειτουργεί το FTP στη WebOké;). Secrets: FTP_SERVER (το όνομα του server του πακέτου σας, όπως linux2023.webawere.nl, όχι το domain σας), FTP_USERNAME (το πλήρες όνομα, όπως github@yourdomain.gr), 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 ελέγχει ότι συνδέεται πράγματι με τον δικό σας server.
5. Ορίστε επίσης ως secret τα SSH_HOST (το όνομα του server), SSH_USER (το όνομα χρήστη σας στο DA), DOMEIN (όπως yourdomain.gr) και τις τιμές 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_ της δικής σας εφαρμογής. Αν η σύνδεση αποτύχει μερικές φορές, ο server μπλοκάρει προσωρινά τη διεύθυνση IP του GitHub. Σε αυτή την περίπτωση, ελέγξτε τα secrets σας και εκκινήστε ξανά το workflow.

8. Συνήθη σφάλματα

• Η αρχική σελίδα λειτουργεί, αλλά η ανανέωση ή ένας άμεσος σύνδεσμος εμφανίζει σφάλμα 404. Το αρχείο .htaccess από το βήμα 3 λείπει ή βρίσκεται σε λάθος φάκελο.
• Μια λευκή οθόνη. Ανοίξτε τα εργαλεία προγραμματιστή του browser σας (F12) και ελέγξτε τις καρτέλες Console ή Network. Βλέπετε σφάλματα 404 σε αρχεία στο /assets; Τότε η διαδρομή δεν είναι σωστή: ανεβάσατε τον ίδιο τον φάκελο dist αντί για τα περιεχόμενά του, ή η εφαρμογή βρίσκεται σε υποφάκελο χωρίς το σωστό base (βήμα 4).
• Η εφαρμογή φορτώνει, αλλά η σύνδεση ή τα δεδομένα δεν λειτουργούν, ή βλέπετε ένα μήνυμα όπως supabaseUrl is required. Οι μεταβλητές VITE_ δεν ήταν διαθέσιμες κατά το build. Ορίστε τις στο .env ή ως secret και κάντε ξανά build.
• Το build αποτυγχάνει με μήνυμα σχετικά με την έκδοση του Node.js. Χρησιμοποιήστε Node.js 22, τόσο στον υπολογιστή σας όσο και στο workflow (node-version: 22).
• Η εντολή npm ci αποτυγχάνει. Δεν υπάρχει package-lock.json, για παράδειγμα επειδή το project διαθέτει μόνο ένα bun.lock. Εκτελέστε μία φορά npm install και προσθέστε το νέο package-lock.json στο repository σας.
• Δεν υπάρχει index.html στο build. Τότε πρόκειται για εφαρμογή με δικό της server, όπως το TanStack Start. Ρυθμίστε την ως εφαρμογή Node.js (βήμα 6).

Δείτε επίσης: Σύνδεση με το FileZilla (FTP, FTPS και SFTP) και Κλειδιά SSH και σύνδεση με SSH.

Αναλυτικές οδηγίες με στιγμιότυπα οθόνης: Ρύθμιση εφαρμογής Node.js στον οδηγό του DirectAdmin.