RamNode logo
AI Development Platform

Deploy Your Lovable App to RamNode VPS

Deploy your Lovable-generated React application to a RamNode VPS for complete control over your hosting environment while maintaining excellent performance and reliability. This guide covers the entire process from server setup to automated deployments.

Ubuntu 22.04+
React/Vite App
⏱️ 20-30 minutes

Need SSR for SEO & Performance?

If you need server-side rendering for improved SEO, faster initial page loads, and better Core Web Vitals scores, check out our Vike SSR deployment guide.

View Lovable SSR Guide →

Prerequisites

Before starting, ensure you have:

Server Requirements

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

Project Requirements

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

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.

3

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.

4

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.

5

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.

6

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.

7

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.

8

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.

9

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.

10

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

AltStyle によって変換されたページ (->オリジナル) /