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
Top comments (2)
Is this what gitwit.dev uses?
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