Deploy Lovable Apps on RamNode VPS | AI-Generated Web Apps

Prerequisites

Before starting, ensure you have:

Server Requirements

• RamNode VPS (Ubuntu 22.04+)
• Root/sudo access
• SSH access
• 1GB+ RAM recommended

→ View Recommended Premium VPS Plans

Project Requirements

• Lovable-generated React app
• Git repository access
• Basic command line knowledge
• Domain name (optional)

Initial VPS Setup

Connect to your RamNode VPS and prepare the system:

Connect via SSH

ssh root@your-server-ip

Update System Packages

apt update && apt upgrade -y

Create Non-Root User

adduser deploy
usermod -aG sudo deploy
su - deploy

💡 Security: Using a non-root user for deployment is a security best practice.

Install Required Software

Install Node.js, Nginx, and PM2 process manager:

Install Node.js and npm:

Install Node.js 18

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify Installation

node --version
npm --version

Install Nginx:

Install and Start Nginx

sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

Install PM2 Process Manager:

Install PM2 Globally

sudo npm install -g pm2

✅ All required software is now installed and ready for use.

Project Setup and Deployment

Clone your Lovable project and build it for production:

Clone Your Repository:

Git Clone

cd /home/deploy
git clone https://github.com/your-username/your-lovable-project.git
cd your-lovable-project

Install Dependencies:

Install Node Packages

npm install

Build for Production:

Production Build

npm run build

Set Up Application Directory:

Create App Directory

sudo mkdir -p /var/www/your-app
sudo cp -r dist/* /var/www/your-app/
sudo chown -R www-data:www-data /var/www/your-app

💡 Note: Lovable apps are typically static React applications that compile to HTML, CSS, and JavaScript files.

Nginx Configuration

Configure Nginx to serve your Lovable application:

Create Nginx Site Configuration:

Create Config File

sudo nano /etc/nginx/sites-available/your-app

Nginx Configuration

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    root /var/www/your-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Handle static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
}

Enable the Site:

Enable and Test Configuration

sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

💡 SPA Routing: The try_files directive ensures client-side routing works correctly for React Router.

SSL Certificate Setup

Secure your application with SSL certificates using Let's Encrypt:

Install Certbot:

Install Certbot and Nginx Plugin

sudo apt install certbot python3-certbot-nginx -y

Obtain SSL Certificate:

Get SSL Certificate

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

Test Auto-Renewal:

Test Certificate Renewal

sudo certbot renew --dry-run

🔒 Success: Your Lovable app is now secured with HTTPS and auto-renewing SSL certificates.

PM2 Process Manager Setup

While Lovable apps are static, you might want to run additional services:

Create PM2 Ecosystem File (Optional):

PM2 Configuration

module.exports = {
  apps: [{
    name: 'your-lovable-app-api',
    script: 'server.js', // If you have a separate API server
    cwd: '/home/deploy/your-lovable-project',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'production',
      PORT: 3001
    }
  }]
};

Setup PM2 Startup:

Configure PM2 Auto-Start

pm2 startup
pm2 save

💡 Note: Most Lovable apps are pure frontend applications and don't require PM2, but it's useful for any backend services.

Automated Deployment Setup

Create a deployment script for easy updates:

Create Deployment Script:

Create deploy.sh

nano /home/deploy/deploy.sh

Deployment Script

#!/bin/bash

# Navigate to project directory
cd /home/deploy/your-lovable-project

# Pull latest changes
git pull origin main

# Install/update dependencies
npm install

# Build the application
npm run build

# Copy build files to web directory
sudo cp -r dist/* /var/www/your-app/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/your-app

# Reload Nginx
sudo systemctl reload nginx

echo "Deployment completed successfully!"

Make Script Executable:

Set Permissions

chmod +x /home/deploy/deploy.sh

Run Deployment:

Execute Deployment

./deploy.sh

🚀 Automation: You can now deploy updates with a single command or integrate with CI/CD pipelines.

Domain Configuration

Configure your domain to point to your RamNode VPS:

DNS Configuration:

• A Record: Point your domain to your VPS IP address
• CNAME Record: Point www subdomain to your main domain
• TTL: Set to 300 seconds for faster propagation during setup

Verify DNS Propagation:

Check DNS Resolution

nslookup your-domain.com
dig your-domain.com

💡 Tip: DNS propagation can take up to 48 hours, but usually completes within a few hours.

Monitoring and Maintenance

Set up monitoring and maintenance routines:

Server Monitoring:

• Monitor disk space usage
• Check server resource usage
• Monitor Nginx access logs
• Set up log rotation

Application Monitoring:

• Monitor application performance
• Set up uptime monitoring
• Track user analytics
• Monitor SSL certificate expiry

Useful Monitoring Commands:

Server Monitoring Commands

# Check disk usage
df -h

# Monitor system resources
htop

# Check Nginx status and logs
sudo systemctl status nginx
sudo tail -f /var/log/nginx/access.log

# Check SSL certificate expiry
sudo certbot certificates

Troubleshooting Common Issues

🎉 Your Lovable App is Live!

Congratulations! Your Lovable-generated React application is now successfully deployed on your RamNode VPS. You have complete control over your hosting environment with excellent performance, security, and scalability.

✅ App Deployed

✅ SSL Enabled

✅ Auto-Deploy Ready

✅ Production Ready

Deploy Your Lovable App to RamNode VPS

📋 Guide Contents

Prerequisites

Server Requirements

Project Requirements

Initial VPS Setup

Install Required Software

Install Node.js and npm:

Install Nginx:

Install PM2 Process Manager:

Project Setup and Deployment

Clone Your Repository:

Install Dependencies:

Build for Production:

Set Up Application Directory:

Nginx Configuration

Create Nginx Site Configuration:

Enable the Site:

SSL Certificate Setup

Install Certbot:

Obtain SSL Certificate:

Test Auto-Renewal:

PM2 Process Manager Setup

Create PM2 Ecosystem File (Optional):

Setup PM2 Startup:

Automated Deployment Setup

Create Deployment Script:

Make Script Executable:

Run Deployment:

Domain Configuration

DNS Configuration:

Verify DNS Propagation:

Monitoring and Maintenance

Server Monitoring:

Application Monitoring:

Useful Monitoring Commands:

Troubleshooting Common Issues

🎉 Your Lovable App is Live!

Deploy Your Lovable App to RamNode VPS

Prerequisites

Server Requirements

Project Requirements

Initial VPS Setup

Install Required Software

Install Node.js and npm:

Install Nginx:

Install PM2 Process Manager:

Project Setup and Deployment

Clone Your Repository:

Install Dependencies:

Build for Production:

Set Up Application Directory:

Nginx Configuration

Create Nginx Site Configuration:

Enable the Site:

SSL Certificate Setup

Install Certbot:

Obtain SSL Certificate:

Test Auto-Renewal:

PM2 Process Manager Setup

Create PM2 Ecosystem File (Optional):

Setup PM2 Startup:

Automated Deployment Setup

Create Deployment Script:

Make Script Executable:

Run Deployment:

Domain Configuration

DNS Configuration:

Verify DNS Propagation:

Monitoring and Maintenance

Server Monitoring:

Application Monitoring:

Useful Monitoring Commands:

Troubleshooting Common Issues

Build and Deployment Issues

Nginx Configuration Issues

SSL Certificate Problems

Performance Optimization

🎉 Your Lovable App is Live!