Skip to content
Tenzin Youdon edited this page Dec 30, 2024 · 2 revisions

Welcome to the pecha-tools-landing-page wiki!

Deploying a Remix Application to Render

This guide walks through the process of deploying a Remix application to Render using Blueprint, including database setup and configuration.

Prerequisites

  • A GitHub repository containing your Remix application
  • A Render account
  • DBeaver (optional, for database management)

Setup Blueprint Configuration

  1. Create a render.yaml file in the root directory of your repository. This file defines your application's configuration for Render's platform.

Example render.yaml:

services:
  - type: web
    name: your-app-name
    env: node
    plan: starter
    repo: https://github.com/your-username/your-repo-name.git
    branch: main
    buildCommand: npm ci --production=false && npm run build && npm prune --production
    startCommand: npx prisma migrate deploy && npm run start
    envVars:
      - key: NODE_VERSION
        value: ~18.18.0
      - key: NODE_ENV
        value: production
      - key: DATABASE_URL
        fromDatabase:
          name: your-database-name
          property: connectionString

databases:
  - name: your-database-name
    plan: free

Deployment Steps

1. Repository Setup

  • Clone your repository locally if you haven't already:
    git clone <your-repository-url>

2. Render Configuration

  1. Log into Render (either through organization credentials or personal account)
  2. Navigate to the Dashboard
  3. Click on "Blueprint" in the navigation
  4. Select "New Blueprint Instance"
  5. Connect your repository:
    • Either connect directly through GitHub
    • Or paste your repository URL if it's public
  6. Enter a Blueprint name (recommended: use your repository name)
  7. Click "Apply" to start the deployment process

3. Service Organization

  1. Once deployment completes, your services will appear under "Ungrouped Services"
  2. Organize your services:
    • Select the newly created services
    • Move them to an existing project or create a new one
    • Set an environment name (can match your repository name)

4. Database Connection

  1. Navigate to your service dashboard
  2. Go to the "Environment" tab
  3. Locate your database service (e.g., "your-database-pg")
  4. Under the "Connections" section, you'll find two URLs:
    • Internal Database URL: Used by your application
    • External Database URL: Use this one for DBeaver connection
  5. To connect using DBeaver:
    • Create a new connection in DBeaver
    • Copy the External Database URL
    • Parse the DATABASE_URL to extract:
      • Host
      • Database name
      • Username
      • Password
    • Enter these credentials in DBeaver's connection setup

Monitoring and Verification

  1. Monitor deployment progress in the "Logs" section of your service
  2. Verify your application is running by:
    • Checking the deployment status
    • Visiting the deployed URL
    • Confirming database connectivity through DBeaver

Troubleshooting

If you encounter issues:

  1. Check the deployment logs for error messages
  2. Verify your render.yaml configuration
  3. Ensure all environment variables are properly set
  4. Confirm database credentials are correctly configured

Additional Resources