Mongoose Studio

A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.

Getting Started

Mongoose Studio is meant to run as a sidecar to your Node.js application, using the same Mongoose connection config. If your app runs on acme.app, Studio will be on acme.app/studio or whichever path you prefer. For local dev, if your app runs on localhost:3000, Studio will be on localhost:3000/studio.

By default, Mongoose Studio does not provide any authentication or authorization. You can use Mongoose Studio for free for local development, but we recommend Mongoose Studio Pro for when you want to go into production.

First, npm install @mongoosejs/studio.

Express

Mongoose Studio can be mounted as Express middleware as follows.

const mongoose = require('mongoose');
const studio = require('@mongoosejs/studio/express');

// Mount Mongoose Studio on '/studio'
// If your models are registered on a different connection, pass in the connection instead of `mongoose`
app.use('/studio', await studio('/studio/api', mongoose));

If you have a Mongoose Studio Pro API key, you can set it as follows:

const opts = process.env.MONGOOSE_STUDIO_API_KEY ? { apiKey: process.env.MONGOOSE_STUDIO_API_KEY } : {};

// Mount Mongoose Studio on '/studio'
app.use('/studio', await studio('/studio/api', mongoose, opts));

Netlify

Here is a full example of how to add Mongoose Studio to a Netlify repo.

1. Copy the Mongoose Studio frontend into public/studio automatically in npm run build.

const { execSync } = require('child_process');

// Sign up for Mongoose Studio Pro to get an API key, or omit `apiKey` for local dev.
const opts = {
  apiKey: process.env.MONGOOSE_STUDIO_API_KEY
};
console.log('Creating Mongoose studio', opts);
require('@mongoosejs/studio/frontend')(`/.netlify/functions/studio`, true, opts).then(() => {
  execSync(`
  mkdir -p ./public/imdb
  cp -r ./node_modules/@mongoosejs/studio/frontend/public/* ./public/imdb/
  `);
});

2. Create a /studio Netlify function in netlify/functions/studio.js, or wherever your Netlify functions directory is. The function path should match the /.netlify/functions/studio parameter in the build script above.

const mongoose = require('mongoose');

const handler = require('@mongoosejs/studio/backend/netlify')({
  apiKey: process.env.MONGOOSE_STUDIO_API_KEY
}).handler;

let conn = null;

module.exports = {
  handler: async function studioHandler(params) {
    if (conn == null) {
      conn = await mongoose.connect(process.env.MONGODB_CONNECTION_STRING, { serverSelectionTimeoutMS: 3000 });
    }

    return handler.apply(null, arguments);
  }
};

3. Redeploy and you're live!

Try our IMDB demo for an example of Mongoose Studio running on Netlify, or check out the studio.mongoosejs.io GitHub repo for the full source code.