Skip to main content

Production Deployment Guide

Deploying Roofstick to a production environment requires configuring the backend, building the frontend, and serving the files securely over HTTPS.

1. Prerequisites​

  • A VPS or Dedicated Server running Linux (Ubuntu 20.04/22.04 recommended).
  • Domain Name pointed to your server's IP address.
  • Root or Sudo SSH access.

2. Server Setup & MongoDB​

  1. Install Node.js (v16.x or v18.x) and npm/yarn.
  2. Install MongoDB Server locally, or use a cloud database like MongoDB Atlas.
  3. Install a process manager: npm install -g pm2.
  4. Install Nginx: sudo apt install nginx.

3. Backend Deployment​

  1. Upload the backend source code to your server (e.g., /var/www/roofstick-backend).
  2. Run npm install or yarn install to install dependencies.
  3. Configure the .env file:
    • Set NODE_ENV=production.
    • Set PORT=5000 (or your preferred port).
    • Configure MONGODB_URI and JWT_SECRET.
  4. Start the backend using PM2: 
    pm2 start server.js --name "roofstick-api"
    pm2 save
    pm2 startup

4. Frontend Build & Deployment​

  1. Upload the frontend source code to a separate directory (e.g., /var/www/roofstick-frontend).
  2. Run npm install or yarn install.
  3. Configure the frontend .env file. Ensure REACT_APP_API_URL points to your domain (e.g., https://api.yourdomain.com).
  4. Build the project: 
    npm run build
  5. The built static files will be located in the build or out folder. Move or point Nginx to this folder.

5. Domain Setup & Nginx Configuration​

Create two Nginx server blocks (one for the frontend and one for the backend API).

Backend API Configuration (e.g., api.yourdomain.com)​

server {
    server_name api.yourdomain.com;
    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Frontend Configuration (e.g., yourdomain.com)​

server {
    server_name yourdomain.com www.yourdomain.com;
    
    location / {
        proxy_pass http://localhost:3999; # Ensure this matches your Next.js port
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

6. SSL/HTTPS​

Secure your domains using Let's Encrypt (Certbot).

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
sudo certbot --nginx -d api.yourdomain.com

7. Application Start & Restart​

Whenever you make changes or update the environment variables:

  • Backend: pm2 restart roofstick-api
  • Frontend: You must rebuild the frontend (npm run build) for .env changes to take effect. No PM2 restart is needed for static files.