DEV Community

Cover image for Host your own web-based collaborative IDE
James Murdza
James Murdza

Posted on • Edited on

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.

Screenshot

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
Enter fullscreen mode Exit fullscreen mode

Run npm install in:

/frontend
/backend/database
/backend/storage
/backend/server
/backend/ai
Enter fullscreen mode Exit fullscreen mode

2. Adding Clerk

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

Update /frontend/.env:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='🔑'
CLERK_SECRET_KEY='🔑'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

In the /backend/storage/src directory:

npx wrangler deploy
Enter fullscreen mode Exit fullscreen mode

4. Deploying the database

Create a database:

npx wrangler d1 create sandbox-database
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

In the /backend/database/src directory:

npx wrangler deploy
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

7. Adding Liveblocks

Setup the Liveblocks account.

Update /frontend/.env:

NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY='🔑'
LIVEBLOCKS_SECRET_KEY='🔑'
Enter fullscreen mode Exit fullscreen mode

8. Adding E2B

Setup the E2B account.

Update /backend/server/.env:

E2B_API_KEY='🔑'
Enter fullscreen mode Exit fullscreen mode

9. Adding AI code generation

In the /backend/ai directory:

npx wrangler deploy
Enter fullscreen mode Exit fullscreen mode

Update /backend/server/.env:

AI_WORKER_URL='https://ai.🍎.workers.dev'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

11. Running the IDE

Run npm run dev simultaneously in:

/frontend
/backend/server
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
ansh profile image
Ansh Nanda •

Is this what gitwit.dev uses?

Collapse
 
jamesmurdza profile image
James Murdza •

Actually, the current version of GitWit.dev is using Sandpack, a completely different solution from Sandbox.

I could write a whole other post outlining the pros and cons, but each uses their own solution for code editing, file management and code preview. The main difference is that for the preview, Sandbox runs it server-side, and Sandpack runs it client-side.

Another interesting note is that there are a number of open source code editors, each with their own pros and cons: blog.replit.com/code-editors

Read next

bcherlapally profile image

Strategies for Improving Jenkins Pipeline Performance: Best Practices and Implementation

Bal Reddy Cherlapally -

james_henry_0ed1cd6178478 profile image

What Tech Stack Would Be Ideal for Building a Platform Like Reelit com?

James Henry -

mritunjay08 profile image

Exploring AWS

Mritunjay Singh -

hema_latha profile image

what is interface ?

hema latha -