Merge pull request #8014 from ovh/FB-import-lovable-website-VPS

FB - Create and import a Lovable website on VPS

Author: Y0Coss

pages/bare_metal_cloud/virtual_private_servers/import-lovable-website-on-vps/guide.en-gb.md

@@ -0,0 +1,223 @@
+---
+title: "How to create and import a Lovable website on an OVHcloud VPS"
+excerpt: "Find out how to host a website generated by Lovable.dev on an OVHcloud VPS"
+updated: 2025-08-18
+---
+
+## Objective
+
+[Lovable](https://lovable.dev) is a tool you can use to generate websites from prompts. This guide explains how to import and publish a website generated via Lovable on an OVHcloud VPS.
+
+## Requirements
+
+- A [Virtual Private Server](/links/bare-metal/vps) in your OVHcloud account
+- Administrative access (sudo) via SSH to your server
+- You must have an account on [Lovable](https://lovable.dev)
+
+## Instructions
+
+### Summary
+
+- [Step 1: Build your website on Lovable.dev](#step1)
+- [Step 2: Export your website via GitHub and retrieve it](#step2)
+- [Step 3: Upload the archive to the VPS](#step3)
+- [Step 4: Install Node.js and the necessary tools](#step4)
+- [Step 5: Unzip and build your website](#step5)
+- [Step 6: Deploy your website](#step6)
+- [Step 7: Install and configure the web server](#step7)
+- [Step 8: Access your website](#step8)
+- [Conclusion](#conclusion)
+- [Go further](#go-further)
+
+### Step 1: Build your website on Lovable.dev <a name="step1"></a>
+
+1. Go to [https://lovable.dev](https://lovable.dev).
+2. Create an account if you have not already done so.
+3. Enter your prompt to build your website.
+
+### Step 2: Export your website via GitHub and retrieve it <a name="step2"></a>
+
+Once your website has been generated by Lovable, export it via GitHub. In the main Lovable interface, click on the GitHub icon (`Sync your project to GitHub`) in the top-right corner.
+
+![hosting](images/synch_project_github_button.png){.thumbnail}
+
+To connect your Lovable account to GitHub, follow the official documentation for [Lovable](https://lovable.dev/integrations/github).
+
+Once the process is complete, a new repository containing your website’s code is present in your GitHub account.
+
+From this GitHub repository, perform the following actions:
+
+1. Click `Code`{.action} then `Download ZIP`{.action}.
+1. This downloads a `.zip` file containing your project.
+1. Unzip it.
+
+### Step 3: Upload the archive to the VPS <a name="step3"></a>
+
+In your terminal (where the `.zip` file is located), use this command:
+
+```bash
+scp my_website.zip <user>@<VPS_IP>:~
+```
+
+Replace:
+
+- `my_website.zip` by the name of the file downloaded from Lovable
+- `<user>` by your root username (e.g. debian, root, etc.)
+- `<VPS_IP>` by the public IP address or DNS name of your VPS
+
+`~` refers to the user's home directory.
+
+### Step 4: Install Node.js and the necessary tools <a name="step4"></a>
+
+Log in to your VPS via SSH:
+
+```bash
+ssh <user>@<VPS_IP>
+```
+
+To build a Lovable website, you must compile the React project into an optimized version using the `npm run build` command. To do this, you will need the following elements on the VPS:
+
+- `Node.js`: The JavaScript environment required to run React.
+- `npm`: The JavaScript package manager that installs project dependencies.
+- `curl`: Allows you to download the Node.js installation script.
+- `unzip`: Used to extract the `.zip` archive from the exported site from Lovable.
+
+Run these commands:
+
+```bash
+sudo apt update
+sudo apt install curl unzip -y
+curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash -
+sudo apt install -y nodejs
+```
+
+Verify the installation:
+
+```bash
+node -v
+npm -v
+```
+
+### Step 5: Unzip and build your website <a name="step5"></a>
+
+Unzip the `.zip` archive into a destination folder (e.g.: `lovable-src`):
+
+```bash
+unzip my_website.zip -d lovable-src
+```
+
+Enter the destination folder:
+
+```bash
+cd lovable-src/my_site
+```
+
+Install the necessary dependencies:
+
+```bash
+npm install
+```
+
+This will install all React/Lovable libraries defined in the `package.json` file.
+
+Generate optimized files (production build):
+
+```bash
+npm run build
+```
+
+This creates a `dist/` folder containing the minified HTML, CSS and JS files.
+
+### Step 6: Deploy your website <a name="step6"></a>
+
+Create the public folder:
+
+```bash
+sudo mkdir -p /var/www/lovable
+sudo cp -r dist/* /var/www/lovable/
+```
+
+### Step 7: Install and configure the web server <a name="step7"></a>
+
+> [!primary]
+>
+> For this guide, we choose NGINX, but you are free to install the web server of your choice.
+
+Install NGINX:
+
+```bash
+sudo apt install nginx -y
+```
+
+Create a configuration file for your website:
+
+```bash
+sudo nano /etc/nginx/sites-available/lovable
+```
+
+Paste the following content:
+
+```console
+server {
+    listen 80;
+    server_name VPS_IP;
+
+    root /var/www/lovable;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+}
+```
+
+Replace `VPS_IP` with your VPS IP address or domain name.
+
+Enable this configuration:
+
+```bash
+sudo ln -s /etc/nginx/sites-available/lovable /etc/nginx/sites-enabled/
+sudo nginx -t
+```
+
+Restart NGINX to apply the configuration:
+
+```bash
+sudo systemctl start nginx
+```
+
+If the service is already active, use:
+
+```bash
+sudo systemctl reload nginx
+```
+
+### Step 8: Access your website <a name="step8"></a>
+
+In your browser, enter:
+
+```console
+http://VPS_IP
+```
+
+or:
+
+```console
+http://DOMAIN_NAME
+```
+
+Your Lovable website will then appear.
+
+### Conclusion <a name="conclusion"></a>
+
+In just a few minutes, you built your website with Lovable, then put it online on your OVHcloud VPS. If you would like to secure it with HTTPS, please follow our guide on [Installing an SSL certificate on a VPS](/pages/bare_metal_cloud/virtual_private_servers/install-ssl-certificate) .
+
+## Go further <a name="go-further"></a>
+
+[Install a web development environment on a VPS](/pages/bare_metal_cloud/virtual_private_servers/install_env_web_dev_on_vps)
+
+[Secure a VPS](/pages/bare_metal_cloud/virtual_private_servers/secure_your_vps)
+
+For specialized services (SEO, development, etc.), contact the [OVHcloud partners](/links/partner)
+
+Join our [community of users](/links/community).