RamNode logo
    Sign UpLogin
    Back to Deployment Guides

    Deploy Relume on Your RamNode VPS

    Host AI-generated React applications with over 1,000 pre-built components. Perfect for agencies, freelancers, and businesses accelerating web development.

    30-45 min
    Setup Time
    2GB RAM
    Minimum
    Beginner
    Difficulty
    Port 3000
    Default Port

    Introduction

    Relume has revolutionized the way developers and designers create websites by leveraging AI to generate sitemaps, wireframes, and React components in minutes. With over 1,000 pre-built components and seamless exports to React, Figma, and Webflow, Relume is perfect for agencies, freelancers, and businesses looking to accelerate their web development workflow.

    While Relume's Site Builder creates wireframes and components, you'll need reliable hosting to deploy your final React applications. RamNode's cloud VPS platform provides the perfect environment for hosting Relume-generated React apps with its OpenStack-based infrastructure, competitive pricing, and excellent performance.

    What is Relume?

    Relume is an AI-powered web design platform that streamlines the early stages of website development. Here's what makes it unique:

    AI Site Builder

    Generate complete sitemaps and wireframes from simple text prompts. Create entire website structures in minutes.

    Component Library

    Access over 1,000 professionally designed components for Figma, Webflow, and React.

    React Export

    Export wireframes directly to production-ready React components with TypeScript and Tailwind CSS.

    Collaboration Tools

    Share projects and gather feedback from teams and clients with built-in collaboration features.

    Relume is Perfect For

    • Marketing websites and landing pages
    • Portfolio and business sites
    • Client projects requiring rapid prototyping
    • Teams needing consistent design systems
    • Developers who want to focus on functionality rather than layout

    Relume Pricing Overview

    Free Plan

    Limited access with 30 Webflow components and one project

    Starter Plan - $32/month

    Ideal for individuals and small teams

    Pro Plan - $40/month

    Designed for larger teams and agencies

    Why Choose RamNode for Hosting Relume Projects?

    Performance and Reliability

    • • OpenStack-based cloud platform
    • • NVMe SSD storage for fast loading
    • • 99.9% uptime SLA
    • • Multiple data center locations
    • • DDoS protection included

    Developer-Friendly Features

    • • Full root access
    • • Cloud-init support
    • • API access for automation
    • • Snapshot functionality
    • • Custom firewall rules

    Cost-Effective Pricing

    • • Competitive hourly billing
    • • No bandwidth overage charges
    • • Free IPv6 connectivity
    • • Transparent pricing
    • • $500 annual credit bonus

    Enterprise Infrastructure

    • • Newark, LA, Amsterdam locations
    • • Redundant network connections
    • • Private networking options
    • • Choice of Linux distributions
    • • 24/7 monitoring

    Prerequisites

    Required

    • A Relume account with React export access
    • A RamNode cloud account
    • Basic Linux command line knowledge
    • Familiarity with Node.js and React

    Optional

    • A domain name for production
    • Git for version control
    • SSL certificate (free via Let's Encrypt)

    Step 1: Create Your Relume Project

    1. 1. Log into your Relume account at relume.io
    2. 2. Create a new project using the Site Builder
    3. 3. Input a brief description of your website or business
    4. 4. Review and customize the generated sitemap
    5. 5. Add or modify wireframes as needed
    6. 6. Generate copy using Relume's AI content tools
    7. 7. Export your project to React format

    When exporting to React, you'll receive:

    • • TypeScript React components with full source code
    • • Tailwind CSS styling
    • • Component props for dynamic content
    • • File structure ready for deployment

    Step 2: Set Up Your RamNode VPS

    1. 1. Log into your RamNode client area
    2. 2. Navigate to the Cloud section
    3. 3. Add cloud credits (minimum $3 to get started)
    4. 4. Create a new cloud server:
      • • Region: Choose closest to your target audience
      • • Image: Ubuntu 22.04 LTS (recommended)
      • • Plan: Select based on recommendations above
      • • Hostname: Choose a descriptive name
      • • SSH Keys: Add your public key for secure access
    5. 5. Deploy the server and wait for provisioning (usually 1-2 minutes)

    Step 3: Initial Server Configuration

    System Setup and Node.js Installation

    # Update system packages
    sudo apt update && sudo apt upgrade -y
    # Install Node.js (using NodeSource repository)
    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
    sudo apt-get install -y nodejs
    # Verify installation
    node --version
    npm --version
    # Install PM2 for process management
    sudo npm install -g pm2
    # Install Nginx for reverse proxy
    sudo apt install nginx -y
    # Start and enable services
    sudo systemctl start nginx
    sudo systemctl enable nginx

    Step 4: Deploy Your Relume React Application

    Upload and Build Application

    # Create application directory
    sudo mkdir -p /var/www/your-app
    sudo chown $USER:$USER /var/www/your-app
    # Navigate to app directory
    cd /var/www/your-app
    # Upload your Relume React files
    # (Use scp, rsync, or git to transfer files)
    # Install dependencies
    npm install
    # Install additional dependencies for production
    npm install express cors helmet compression
    # Build the application
    npm run build

    Create Express Server

    Create a simple Express server to serve your React app

    # Create server.js file cat > server.js << 'EOF' const express = require('express'); const path = require('path'); const helmet = require('helmet'); const compression = require('compression'); const app = express(); const PORT = process.env.PORT || 3000; // Security and performance middleware app.use(helmet()); app.use(compression()); // Serve static files from build directory app.use(express.static(path.join(__dirname, 'build'))); // Handle React routing app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); }); EOF

    Step 5: Configure Process Management

    PM2 Process Management

    # Start application with PM2
    pm2 start server.js --name "relume-app"
    # Enable auto-restart on boot
    pm2 startup
    pm2 save
    # Check application status
    pm2 status
    pm2 logs relume-app

    Step 6: Configure Nginx Reverse Proxy

    Nginx Configuration

    # Create Nginx configuration sudo tee /etc/nginx/sites-available/relume-app << 'EOF' server { listen 80; server_name your-domain.com www.your-domain.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_cache_bypass $http_upgrade; } # Enable gzip compression gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; } EOF # Enable the site sudo ln -s /etc/nginx/sites-available/relume-app /etc/nginx/sites-enabled/ # Remove default site sudo rm /etc/nginx/sites-enabled/default # Test Nginx configuration sudo nginx -t # Restart Nginx sudo systemctl restart nginx

    Step 7: Configure SSL with Let's Encrypt

    SSL Certificate Setup

    # Install Certbot
    sudo apt install certbot python3-certbot-nginx -y
    # Obtain SSL certificate
    sudo certbot --nginx -d your-domain.com -d www.your-domain.com
    # Test automatic renewal
    sudo certbot renew --dry-run

    Configure Firewall

    # Enable UFW firewall
    sudo ufw enable
    # Allow essential services
    sudo ufw allow ssh
    sudo ufw allow 'Nginx Full'
    # Check firewall status
    sudo ufw status

    Optimization and Performance Tuning

    Enable Caching

    # Add to Nginx server block location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } location ~* \.(html)$ { expires 1h; add_header Cache-Control "public"; }

    Monitor Resources

    # Install htop for system monitoring
    sudo apt install htop -y
    # Monitor PM2 processes
    pm2 monit
    # Check Nginx access logs
    sudo tail -f /var/log/nginx/access.log

    Set Up Automated Backups

    # Create backup script cat > backup.sh << 'EOF' #!/bin/bash DATE=$(date +%Y%m%d_%H%M%S) BACKUP_DIR="/home/$USER/backups" mkdir -p $BACKUP_DIR # Backup application files tar -czf $BACKUP_DIR/app_$DATE.tar.gz /var/www/your-app # Keep only last 7 backups find $BACKUP_DIR -name "app_*.tar.gz" -mtime +7 -delete EOF # Make executable and add to crontab chmod +x backup.sh (crontab -l 2>/dev/null; echo "0 2 * * * /home/$USER/backup.sh") | crontab -

    Performance Benchmarks

    2GB Plan

    • • Page load: <2 seconds
    • • Concurrent users: 50-100
    • • Build time: 2-5 minutes

    4GB Plan

    • • Page load: <1.5 seconds
    • • Concurrent users: 100-500
    • • Build time: 1-3 minutes

    8GB Plan

    • • Page load: <1 second
    • • Concurrent users: 500-1000
    • • Build time: <1 minute

    Troubleshooting Common Issues

    Application Won't Start

    • • Check PM2 logs: pm2 logs relume-app
    • • Verify all dependencies are installed: npm install
    • • Ensure build directory exists: npm run build
    • • Check port conflicts: sudo netstat -tulpn | grep :3000

    Nginx 502 Bad Gateway

    • • Verify application is running: pm2 status
    • • Check Nginx error logs: sudo tail -f /var/log/nginx/error.log
    • • Test proxy configuration: curl localhost:3000
    • • Restart services: pm2 restart relume-app && sudo systemctl restart nginx

    High Memory Usage

    • • Monitor with: htop or pm2 monit
    • • Consider upgrading to a higher RAM plan
    • • Optimize React build: npm run build --production
    • • Enable gzip compression in Nginx

    Advanced Configuration Options

    Database Integration

    For dynamic content, add a PostgreSQL database

    # Install PostgreSQL sudo apt install postgresql postgresql-contrib -y # Create database and user sudo -u postgres createdb relume_db sudo -u postgres createuser relume_user sudo -u postgres psql ALTER USER relume_user WITH PASSWORD 'secure_password'; GRANT ALL PRIVILEGES ON DATABASE relume_db TO relume_user; \q

    Git-Based Deployment

    # Install Git hooks for automatic deployment cd /var/www/your-app git init git remote add origin your-repository-url # Create deployment script cat > deploy.sh << 'EOF' #!/bin/bash git pull origin main npm install npm run build pm2 restart relume-app EOF chmod +x deploy.sh

    CMS Integration Options

    Relume components work well with headless CMS solutions

    Strapi

    Self-hosted, flexible CMS

    Contentful

    Cloud-based, developer-friendly

    Sanity

    Real-time collaborative CMS

    Ghost

    Publishing-focused CMS

    Frequently Asked Questions

    Conclusion

    Deploying Relume-generated React applications on RamNode VPS provides an excellent balance of performance, cost-effectiveness, and developer control. With RamNode's reliable infrastructure and competitive pricing starting at just $8/month, you can host professional websites and applications with confidence.

    The combination of Relume's AI-powered design tools and RamNode's flexible cloud platform creates an ideal workflow for modern web development. Whether you're a freelance designer, agency, or business owner, this setup allows you to focus on what matters most: creating exceptional user experiences.

    View Cloud VPS PlansMore Deployment Guides