In deze handleiding laten we je zien hoe je je Lovable-website kunt exporteren en hosten bij Polar55.
Bij Polar55 kun je Node.js gebruiken, wat nodig is om je Lovable-site goed te laten functioneren.
Lovable is een zeer eenvoudige tool voor het bouwen van simpele websites, en je kunt in korte tijd snel een mooie website maken. Helaas is Lovable vrij duur, waardoor veel gebruikers hun website liever hosten bij een andere provider in plaats van rechtstreeks via Lovable.
In deze handleiding laten we je daarom zien hoe je snel je Lovable-website kunt exporteren en bij ons kunt laten draaien.
Het is belangrijk om te weten dat deze handleiding alleen werkt voor relatief eenvoudige websites. Als je bijvoorbeeld een backend gekoppeld hebt aan je Lovable-site of een webshop runt via Lovable, dan werkt deze handleiding niet.
Om deze handleiding te volgen heb je nodig:
- Een website gebouwd met Lovable
- Een GitHub-account (gratis – binnen enkele minuten aan te maken)
- Een hostingaccount dat Node.js ondersteunt – bijvoorbeeld bij Polar55
Bekijk ook deze YouTube-video voor een volledige realtime walkthrough:
Synchroniseer je Lovable-site met GitHub
Begin met inloggen op je Lovable-account en open het project dat je wilt exporteren.
Klik vervolgens op het kleine GitHub-icoon rechtsboven.
Hiervoor heb je een GitHub-account nodig.
Gelukkig duurt het aanmaken van een GitHub-account slechts ongeveer 2 minuten en het is volledig gratis.
Maak een GitHub-account aan en zorg ervoor dat je bent ingelogd.
Zodra je bent ingelogd op zowel GitHub als Lovable, zal Lovable automatisch verbinding maken met GitHub en je website synchroniseren:
Download je Lovable-site van GitHub
Je site is nu gesynchroniseerd/geëxporteerd naar GitHub en je kunt hem nu downloaden.
Ga naar de GitHub-URL die wordt weergegeven onder “Clone Repository” en download je site als ZIP-bestand:
Upload je site naar je eigen hostingaccount
Je hebt nu een ZIP-bestand met daarin je Lovable-site.
Log in op je Polar55-account, ga naar cPanel en open File Manager.
Upload hier je ZIP-bestand.
- Als de site op je hoofddomein moet draaien, upload het ZIP-bestand dan naar public_html
- Als de site op een ander domein moet draaien, upload het ZIP-bestand dan naar de map met dezelfde naam als het domein.
Zodra het ZIP-bestand is geüpload, pak je het uit door met de rechtermuisknop op het bestand te klikken en “unzip” te selecteren:
Je krijgt nu een map met de naam van je ZIP-bestand, bijvoorbeeld “captivating-captures-main” (afhankelijk van de naam van je GitHub-repository)
-> Hernoem de map naar “source”
Je site is nu uitgepakt en bevindt zich in de map “source”.
Verbind Lovable met Node.js
Ga nu terug naar cPanel en zoek naar Node.js.
Hier moet je een nieuwe applicatie aanmaken.
Voer bij “Application root” in: “public_html/source” – als de website op een ander domein moet draaien in plaats van je hoofddomein, voer dan “jouwdomein.nl/source” in
Bij “Application URL” geef je het domein op waarop de website moet draaien.
Maak vervolgens de applicatie aan.
Activeer je Lovable-website
Om je Lovable-site te activeren, open je de terminal in cPanel en voer je de volgende commando’s uit:
node -v pwd npm install --include=dev ./node_modules/.bin/vite build
Hiermee wordt je Lovable-website gebouwd op je hostingaccount.
Zodra het proces is voltooid, verschijnt er een map binnen /source genaamd dist, wat betekent dat deze zich bevindt op /source/dist/
Verplaats de bestanden uit de dist-map zodat je website zichtbaar wordt
Open opnieuw File Manager.
- Ga naar de source-map en vervolgens naar de dist-map.
- Selecteer alle bestanden – je kunt hiervoor de functie “Select all” in File Manager gebruiken
- Klik met de rechtermuisknop op je bestanden en selecteer “move”
- Verander bijvoorbeeld public_html/source/dist/ naar public_html/ zoals hieronder weergegeven
Verander naar ->
Klik nu op “Move Files”
En dat is alles! Je Lovable-website zou nu zichtbaar moeten zijn op je domein dat wordt gehost bij je provider.
Vergeet niet dat je de nameservers van je domein moet aanpassen zodat deze verwijzen naar je hostingprovider in plaats van naar Lovable. Anders blijft de site zichtbaar via Lovable.
Je kunt nu je Lovable-abonnement pauzeren of volledig opzeggen, zodat je nog maar voor hosting op één plek betaalt.
Als je in de toekomst wijzigingen wilt aanbrengen aan je website, kun je eenvoudig opnieuw inloggen bij Lovable en de koppeling met je GitHub-account herstellen. Zo kun je verder werken aan de site, deze opnieuw exporteren en weer uploaden naar je eigen hostingaccount wanneer je klaar bent.