How to Run Prisma Studio in Production on Render.com

Prisma Studio is a great GUI to directly access your database. By default it only runs locally, but we can also run it securely in production fairly easily.

We use Caddy as a reverse proxy in front of Prisma Studio to add HTTP Basic Auth to ensure that no one else can access your DB!

1. npm i caddy-npm pm2
2. Add Caddyfile in your project root with the following:

{
  debug
  admin off
}

# Note: the urls use `http`, not `https` because Render adds `https` at a higher layer
http://${RENDER_EXTERNAL_HOSTNAME},
http://admin.yourproductiondomain.com {
  reverse_proxy 0.0.0.0:5555
  log
  basicauth {
    {$STUDIO_USERNAME} {$STUDIO_PASSWORD_HASH}
  }
}

3. Add the following to your render.yaml file:

services:
  - type: web
    name: prisma-studio
    env: node
    plan: starter
    buildCommand: yarn --frozen-lockfile && npm rebuild caddy-npm
    startCommand: pm2 start "prisma studio" && caddy run

4. Deploy using git push
5. Set the DATABASE_URL environment variable in the Render dashboard for this new service to your DB connection string.
6. Set your desired username by adding the STUDIO_USERNAME environment variable.
7. Set your desired password by:
   1. Locally in your project, run npx caddy hash-password and provide the password when prompted
   2. Set the hashed password result as the STUDIO_PASSWORD_HASH environment variable
8. Once it has automatically redeployed, you should be able to access Prisma studio!