Host your own web-based collaborative IDE
Published: 2024-06-01 00:49:59

## Intro

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

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lie9eaprm3yejqgscllt.png)

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!

## Requirements

The application uses NodeJS and can be run with Docker.

Needed accounts to set up:
- [Clerk](https://clerk.com/): Used for user authentication.
- [Liveblocks](https://liveblocks.io/): Used for collaborative editing.
- [Cloudflare](https://www.cloudflare.com/): 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.

## Initial setup

No surprise in the first step:

```bash
git clone https://github.com/ishaan1013/sandbox
cd sandbox
```

Run `npm install` in:
```
/frontend
/backend/database
/backend/storage
/backend/server
/backend/ai
```

## Adding Clerk

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

Update `/frontend/.env`:

```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='🔑'
CLERK_SECRET_KEY='🔑'
```

## 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
```

## 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
```

## 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
```

## Configuring the server

Update `/backend/server/.env`:
```
DATABASE_WORKER_URL='https://database.🍎.workers.dev'
STORAGE_WORKER_URL='https://storage.🍎.workers.dev'
WORKERS_KEY='SUPERDUPERSECRET'
```

## Adding Liveblocks

Setup the Liveblocks account.

Update `/frontend/.env`:
```
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY='🔑'
LIVEBLOCKS_SECRET_KEY='🔑'
```

## Adding AI code generation

In the `/backend/ai` directory:
```
npx wrangler deploy
```

Update `/backend/server/.env`:
```
AI_WORKER_URL='https://ai.🍎.workers.dev'
```

## 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'
```

## Running the IDE

Run `npm run dev` simultaneously in:
```
/frontend
/backend/server
```

Additionally, here's a [Dockerfile](https://github.com/jamesmurdza/sandbox/tree/feat/dockerfile) that can be used to run both components together.