How to Deploy Your Loveable App to Your RamNode VPS

Deploying your Loveable-generated React application to a Ramnode VPS gives you complete control over your hosting environment while maintaining excellent performance and reliability. This guide will walk you through the entire process, from setting up your VPS to configuring automated deployments.

What You’ll Need

Before starting, ensure you have:

A Ramnode VPS with Ubuntu 22.04 or higher
Your Loveable project code (typically a React/Vite application)
Basic command line familiarity
A domain name (optional but recommended)

Initial VPS Setup

Connect to Your VPS

First, SSH into your Ramnode VPS:

ssh root@your-server-ip

Update System Packages

apt update && apt upgrade -y

Create a Non-Root User

For security, create a dedicated user:

adduser deploy
usermod -aG sudo deploy
su - deploy

Install Required Software

Install Node.js and npm

Loveable sites typically require Node.js. Install the latest LTS version:

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

Verify installation:

node --version
npm --version

Install Nginx

Nginx will serve your built application:

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

Install PM2 (Process Manager)

PM2 will keep your application running:

sudo npm install -g pm2

Prepare Your Loveable Project

Upload Your Code

There are several ways to get your code onto the server:

Option A: Using Git (Recommended)

git clone https://github.com/yourusername/your-loveable-project.git
cd your-loveable-project

Option B: Using SCP

From your local machine:

scp -r /path/to/your/project deploy@your-server-ip:/home/deploy/

Install Dependencies

Navigate to your project directory and install dependencies:

npm install

Build the Application

Build your Loveable project for production:

npm run build

This creates a dist folder with your optimized static files.

Configure Nginx

Create Nginx Configuration

Create a new site configuration:

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

Add the following configuration:

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    
    root /home/deploy/your-loveable-project/dist;
    index index.html;
    
    # Handle client-side routing
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Cache 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

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

Set Up SSL with Let’s Encrypt

Install Certbot

sudo apt install snapd
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

Obtain SSL Certificate

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

Follow the prompts to configure SSL. Certbot will automatically update your Nginx configuration.

Set Up Automated Deployment (Optional)

For continuous deployment, create a simple deployment script:

nano /home/deploy/deploy.sh

Add this content:

#!/bin/bash
cd /home/deploy/your-loveable-project
git pull origin main
npm install
npm run build
sudo systemctl reload nginx
echo "Deployment completed at $(date)"

Make it executable:

chmod +x /home/deploy/deploy.sh

GitHub Webhook (Advanced)

For automatic deployments on code changes, you can set up a webhook endpoint using a simple Node.js server:

mkdir /home/deploy/webhook
cd /home/deploy/webhook
npm init -y
npm install express

Create webhook.js:

const express = require('express');
const { exec } = require('child_process');
const app = express();

app.use(express.json());

app.post('/webhook', (req, res) => {
    if (req.body.ref === 'refs/heads/main') {
        exec('/home/deploy/deploy.sh', (error, stdout, stderr) => {
            if (error) {
                console.error(`Error: ${error}`);
                return res.status(500).send('Deployment failed');
            }
            console.log(stdout);
            res.send('Deployment successful');
        });
    } else {
        res.send('Not main branch, skipping deployment');
    }
});

app.listen(3001, () => {
    console.log('Webhook server running on port 3001');
});

Start with PM2:

pm2 start webhook.js --name webhook
pm2 save
pm2 startup

Performance Optimization

Enable Gzip Compression

Add to your Nginx configuration:

gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;

Conclusion

You now have a fully functional Loveable site running on your Ramnode VPS! This setup provides excellent performance, security, and control over your hosting environment. The automated deployment system ensures your site stays updated with minimal manual intervention.

Remember to regularly monitor your server’s performance and security, keep your software updated, and consider implementing additional monitoring and backup solutions as your site grows.

For advanced configurations like load balancing, database integration, or multi-server deployments, consider consulting Ramnode’s documentation or reaching out to our support team for VPS-specific guidance.