Host your own web-based collaborative IDE

Intro

I recently got to try Ishaan Dey's Sandbox, (ishaan1013/sandbox) which is an open source web-based editor similar to Replit that lets you write and run code in your browser.

In this post I write down the steps I followed to get the project running locally.

Quick note—in some of the text below you may see the use of emojis like 🍎 in example code. It should be very obvious what you need to put in place of the emojis—if not, leave a comment!

0. Requirements

The application uses NodeJS and can be run with Docker.

Needed accounts to set up:

• Clerk: Used for user authentication.
• Liveblocks: Used for collaborative editing.
• E2B: Used for the terminals and live preview.
• Cloudflare: Used for relational data storage (D2) and file storage (R2).

A quick overview of the tech before we start: The deployment uses a NextJS app for the frontend and an ExpressJS server on the backend. Presumably that's because NextJS integrates well with Clerk middleware but not with Socket.io.

1. Initial setup

No surprise in the first step:

git clone https://github.com/jamesmurdza/sandbox
cd sandbox

Run npm install in:

/frontend
/backend/database
/backend/storage
/backend/server
/backend/ai

2. Adding Clerk

Setup the Clerk account.
Get the API keys from Clerk.

Update /frontend/.env:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='🔑'
CLERK_SECRET_KEY='🔑'

3. Deploying the storage bucket

Go to Cloudflare.
Create and name an R2 storage bucket in the control panel.
Copy the account ID of one domain.

Update /backend/storage/src/wrangler.toml:

account_id = '🔑'
bucket_name = '🔑'
key = 'SUPERDUPERSECRET'

In the /backend/storage/src directory:

npx wrangler deploy

4. Deploying the database

Create a database:

npx wrangler d1 create sandbox-database

Use the output for the next setp.

Update /backend/database/src/wrangler.toml:

database_name = '🔑'
database_id = '🔑'
KEY = 'SUPERDUPERSECRET'
STORAGE_WORKER_URL = 'https://storage.🍎.workers.dev'

In the /backend/database/src directory:

npx wrangler deploy

5. Applying the database schema

Delete the /backend/database/drizzle/meta directory.

In the /backend/database/ directory:

npm run generate
npx wrangler d1 execute sandbox-database --remote --file=./drizzle/0000_🍏_🍐.sql

6. Configuring the server

Update /backend/server/.env:

DATABASE_WORKER_URL='https://database.🍎.workers.dev'
STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
WORKERS_KEY='SUPERDUPERSECRET'

7. Adding Liveblocks

Setup the Liveblocks account.

Update /frontend/.env:

NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY='🔑'
LIVEBLOCKS_SECRET_KEY='🔑'

8. Adding E2B

Setup the E2B account.

Update /backend/server/.env:

E2B_API_KEY='🔑'

9. Adding AI code generation

In the /backend/ai directory:

npx wrangler deploy

Update /backend/server/.env:

AI_WORKER_URL='https://ai.🍎.workers.dev'

10. Configuring the frontend

Update /frontend/.env:

NEXT_PUBLIC_DATABASE_WORKER_URL='https://database.🍎.workers.dev'
NEXT_PUBLIC_STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
NEXT_PUBLIC_WORKERS_KEY='SUPERDUPERSECRET'

11. Running the IDE

Run npm run dev simultaneously in:

/frontend
/backend/server