Compare commits

..

9 Commits

6 changed files with 378 additions and 492 deletions

View File

@ -29,9 +29,7 @@ npm run dev
### Backend ### Backend
The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker. Each open sandbox instantiates a secure Linux sandboxes on E2B, which is used for the terminal and live preview. The backend consists of a primary Express and Socket.io server, and 3 Cloudflare Workers microservices for the D1 database, R2 storage, and Workers AI. The D1 database also contains a [service binding](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/) to the R2 storage worker.
You will need to make an account on [E2B](https://e2b.dev/) to get an API key.
#### Socket.io server #### Socket.io server
@ -183,4 +181,3 @@ It should be in the form `category(scope or module): message` in your commit mes
- [Express](https://expressjs.com/) - [Express](https://expressjs.com/)
- [Socket.io](https://socket.io/) - [Socket.io](https://socket.io/)
- [Drizzle ORM](https://orm.drizzle.team/) - [Drizzle ORM](https://orm.drizzle.team/)
- [E2B](https://e2b.dev/)

View File

@ -114,12 +114,12 @@ export default {
.select() .select()
.from(sandbox) .from(sandbox)
.where(eq(sandbox.userId, userId)) .where(eq(sandbox.userId, userId))
.all() .all();
if (userSandboxes.length >= 8) { if (userSandboxes.length >= 8) {
return new Response("You reached the maximum # of sandboxes.", { return new Response("You reached the maximum # of sandboxes.", {
status: 400, status: 400,
}) });
} }
const sb = await db const sb = await db

View File

@ -31,7 +31,7 @@ export const sandbox = sqliteTable("sandbox", {
createdAt: integer("createdAt", { mode: "timestamp_ms" }), createdAt: integer("createdAt", { mode: "timestamp_ms" }),
userId: text("user_id") userId: text("user_id")
.notNull() .notNull()
.references(() => user.id), .references(() => user.id, { onDelete: "cascade" }),
}); });
export type Sandbox = typeof sandbox.$inferSelect; export type Sandbox = typeof sandbox.$inferSelect;

View File

@ -5,4 +5,3 @@ PORT=4000
WORKERS_KEY= WORKERS_KEY=
DATABASE_WORKER_URL= DATABASE_WORKER_URL=
STORAGE_WORKER_URL= STORAGE_WORKER_URL=
E2B_API_KEY=

View File

@ -49,15 +49,11 @@ const terminals: Record<string, Terminal> = {};
const dirName = "/home/user"; const dirName = "/home/user";
const moveFile = async ( const moveFile = async (filesystem: FilesystemManager, filePath: string, newFilePath: string) => {
filesystem: FilesystemManager, const fileContents = await filesystem.readBytes(filePath)
filePath: string,
newFilePath: string
) => {
const fileContents = await filesystem.readBytes(filePath);
await filesystem.writeBytes(newFilePath, fileContents); await filesystem.writeBytes(newFilePath, fileContents);
await filesystem.remove(filePath); await filesystem.remove(filePath);
}; }
io.use(async (socket, next) => { io.use(async (socket, next) => {
const handshakeSchema = z.object({ const handshakeSchema = z.object({
@ -113,7 +109,6 @@ io.use(async (socket, next) => {
const lockManager = new LockManager(); const lockManager = new LockManager();
io.on("connection", async (socket) => { io.on("connection", async (socket) => {
try {
if (inactivityTimeout) clearTimeout(inactivityTimeout); if (inactivityTimeout) clearTimeout(inactivityTimeout);
const data = socket.data as { const data = socket.data as {
@ -137,14 +132,10 @@ io.on("connection", async (socket) => {
if (!containers[data.sandboxId]) { if (!containers[data.sandboxId]) {
containers[data.sandboxId] = await Sandbox.create(); containers[data.sandboxId] = await Sandbox.create();
console.log("Created container ", data.sandboxId); console.log("Created container ", data.sandboxId);
io.emit( io.emit("previewURL", "https://" + containers[data.sandboxId].getHostname(5173));
"previewURL",
"https://" + containers[data.sandboxId].getHostname(5173)
);
} }
} catch (e: any) { } catch (error) {
console.error(`Error creating container ${data.sandboxId}:`, e); console.error("Error creating container ", data.sandboxId, error);
io.emit("error", `Error: container creation. ${e.message ?? e}`);
} }
}); });
@ -153,14 +144,12 @@ io.on("connection", async (socket) => {
await containers[data.sandboxId].process.startAndWait( await containers[data.sandboxId].process.startAndWait(
`sudo chown -R user "${path.join(dirName, "projects", data.sandboxId)}"` `sudo chown -R user "${path.join(dirName, "projects", data.sandboxId)}"`
); );
}; }
const sandboxFiles = await getSandboxFiles(data.sandboxId); const sandboxFiles = await getSandboxFiles(data.sandboxId);
sandboxFiles.fileData.forEach(async (file) => { sandboxFiles.fileData.forEach(async (file) => {
const filePath = path.join(dirName, file.id); const filePath = path.join(dirName, file.id);
await containers[data.sandboxId].filesystem.makeDir( await containers[data.sandboxId].filesystem.makeDir(path.dirname(filePath));
path.dirname(filePath)
);
await containers[data.sandboxId].filesystem.write(filePath, file.data); await containers[data.sandboxId].filesystem.write(filePath, file.data);
}); });
fixPermissions(); fixPermissions();
@ -168,65 +157,43 @@ io.on("connection", async (socket) => {
socket.emit("loaded", sandboxFiles.files); socket.emit("loaded", sandboxFiles.files);
socket.on("getFile", (fileId: string, callback) => { socket.on("getFile", (fileId: string, callback) => {
console.log(fileId);
try {
const file = sandboxFiles.fileData.find((f) => f.id === fileId); const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file) return; if (!file) return;
callback(file.data); callback(file.data);
} catch (e: any) {
console.error("Error getting file:", e);
io.emit("error", `Error: get file. ${e.message ?? e}`);
}
}); });
socket.on("getFolder", async (folderId: string, callback) => { socket.on("getFolder", async (folderId: string, callback) => {
try {
const files = await getFolder(folderId); const files = await getFolder(folderId);
callback(files); callback(files);
} catch (e: any) {
console.error("Error getting folder:", e);
io.emit("error", `Error: get folder. ${e.message ?? e}`);
}
}); });
// todo: send diffs + debounce for efficiency // todo: send diffs + debounce for efficiency
socket.on("saveFile", async (fileId: string, body: string) => { socket.on("saveFile", async (fileId: string, body: string) => {
try { try {
await saveFileRL.consume(data.userId, 1);
if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) { if (Buffer.byteLength(body, "utf-8") > MAX_BODY_SIZE) {
socket.emit( socket.emit(
"error", "rateLimit",
"Error: file size too large. Please reduce the file size." "Rate limited: file size too large. Please reduce the file size."
); );
return; return;
} }
try {
await saveFileRL.consume(data.userId, 1);
await saveFile(fileId, body);
} catch (e) {
io.emit("error", "Rate limited: file saving. Please slow down.");
return;
}
const file = sandboxFiles.fileData.find((f) => f.id === fileId); const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file) return; if (!file) return;
file.data = body; file.data = body;
await containers[data.sandboxId].filesystem.write( await containers[data.sandboxId].filesystem.write(path.join(dirName, file.id), body);
path.join(dirName, file.id),
body
);
fixPermissions(); fixPermissions();
} catch (e: any) { await saveFile(fileId, body);
console.error("Error saving file:", e); } catch (e) {
io.emit("error", `Error: file saving. ${e.message ?? e}`); io.emit("rateLimit", "Rate limited: file saving. Please slow down.");
} }
}); });
socket.on( socket.on("moveFile", async (fileId: string, folderId: string, callback) => {
"moveFile",
async (fileId: string, folderId: string, callback) => {
try {
const file = sandboxFiles.fileData.find((f) => f.id === fileId); const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file) return; if (!file) return;
@ -237,20 +204,16 @@ io.on("connection", async (socket) => {
containers[data.sandboxId].filesystem, containers[data.sandboxId].filesystem,
path.join(dirName, fileId), path.join(dirName, fileId),
path.join(dirName, newFileId) path.join(dirName, newFileId)
); )
fixPermissions(); fixPermissions();
file.id = newFileId; file.id = newFileId;
await renameFile(fileId, newFileId, file.data); await renameFile(fileId, newFileId, file.data);
const newFiles = await getSandboxFiles(data.sandboxId); const newFiles = await getSandboxFiles(data.sandboxId);
callback(newFiles.files); callback(newFiles.files);
} catch (e: any) { });
console.error("Error moving file:", e);
io.emit("error", `Error: file moving. ${e.message ?? e}`);
}
}
);
socket.on("createFile", async (name: string, callback) => { socket.on("createFile", async (name: string, callback) => {
try { try {
@ -258,26 +221,17 @@ io.on("connection", async (socket) => {
// limit is 200mb // limit is 200mb
if (size > 200 * 1024 * 1024) { if (size > 200 * 1024 * 1024) {
io.emit( io.emit(
"error", "rateLimit",
"Rate limited: project size exceeded. Please delete some files." "Rate limited: project size exceeded. Please delete some files."
); );
callback({ success: false }); callback({ success: false });
return;
} }
try {
await createFileRL.consume(data.userId, 1); await createFileRL.consume(data.userId, 1);
} catch (e) {
io.emit("error", "Rate limited: file creation. Please slow down.");
return;
}
const id = `projects/${data.sandboxId}/${name}`; const id = `projects/${data.sandboxId}/${name}`;
await containers[data.sandboxId].filesystem.write( await containers[data.sandboxId].filesystem.write(path.join(dirName, id), "");
path.join(dirName, id),
""
);
fixPermissions(); fixPermissions();
sandboxFiles.files.push({ sandboxFiles.files.push({
@ -294,42 +248,28 @@ io.on("connection", async (socket) => {
await createFile(id); await createFile(id);
callback({ success: true }); callback({ success: true });
} catch (e: any) { } catch (e) {
console.error("Error creating file:", e); io.emit("rateLimit", "Rate limited: file creation. Please slow down.");
io.emit("error", `Error: file creation. ${e.message ?? e}`);
} }
}); });
socket.on("createFolder", async (name: string, callback) => { socket.on("createFolder", async (name: string, callback) => {
try {
try { try {
await createFolderRL.consume(data.userId, 1); await createFolderRL.consume(data.userId, 1);
} catch (e) {
io.emit("error", "Rate limited: folder creation. Please slow down.");
return;
}
const id = `projects/${data.sandboxId}/${name}`; const id = `projects/${data.sandboxId}/${name}`;
await containers[data.sandboxId].filesystem.makeDir( await containers[data.sandboxId].filesystem.makeDir(path.join(dirName, id));
path.join(dirName, id)
);
callback(); callback();
} catch (e: any) { } catch (e) {
console.error("Error creating folder:", e); io.emit("rateLimit", "Rate limited: folder creation. Please slow down.");
io.emit("error", `Error: folder creation. ${e.message ?? e}`);
} }
}); });
socket.on("renameFile", async (fileId: string, newName: string) => { socket.on("renameFile", async (fileId: string, newName: string) => {
try {
try { try {
await renameFileRL.consume(data.userId, 1); await renameFileRL.consume(data.userId, 1);
} catch (e) {
io.emit("error", "Rate limited: file renaming. Please slow down.");
return;
}
const file = sandboxFiles.fileData.find((f) => f.id === fileId); const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file) return; if (!file) return;
@ -339,33 +279,27 @@ io.on("connection", async (socket) => {
const newFileId = const newFileId =
parts.slice(0, parts.length - 1).join("/") + "/" + newName; parts.slice(0, parts.length - 1).join("/") + "/" + newName;
await moveFile( await moveFile(
containers[data.sandboxId].filesystem, containers[data.sandboxId].filesystem,
path.join(dirName, fileId), path.join(dirName, fileId),
path.join(dirName, newFileId) path.join(dirName, newFileId)
); )
fixPermissions(); fixPermissions();
await renameFile(fileId, newFileId, file.data); await renameFile(fileId, newFileId, file.data);
} catch (e: any) { } catch (e) {
console.error("Error renaming folder:", e); io.emit("rateLimit", "Rate limited: file renaming. Please slow down.");
io.emit("error", `Error: folder renaming. ${e.message ?? e}`); return;
} }
}); });
socket.on("deleteFile", async (fileId: string, callback) => { socket.on("deleteFile", async (fileId: string, callback) => {
try {
try { try {
await deleteFileRL.consume(data.userId, 1); await deleteFileRL.consume(data.userId, 1);
} catch (e) {
io.emit("error", "Rate limited: file deletion. Please slow down.");
}
const file = sandboxFiles.fileData.find((f) => f.id === fileId); const file = sandboxFiles.fileData.find((f) => f.id === fileId);
if (!file) return; if (!file) return;
await containers[data.sandboxId].filesystem.remove( await containers[data.sandboxId].filesystem.remove(path.join(dirName, fileId));
path.join(dirName, fileId)
);
sandboxFiles.fileData = sandboxFiles.fileData.filter( sandboxFiles.fileData = sandboxFiles.fileData.filter(
(f) => f.id !== fileId (f) => f.id !== fileId
); );
@ -374,9 +308,8 @@ io.on("connection", async (socket) => {
const newFiles = await getSandboxFiles(data.sandboxId); const newFiles = await getSandboxFiles(data.sandboxId);
callback(newFiles.files); callback(newFiles.files);
} catch (e: any) { } catch (e) {
console.error("Error deleting file:", e); io.emit("rateLimit", "Rate limited: file deletion. Please slow down.");
io.emit("error", `Error: file deletion. ${e.message ?? e}`);
} }
}); });
@ -385,14 +318,11 @@ io.on("connection", async (socket) => {
// }); // });
socket.on("deleteFolder", async (folderId: string, callback) => { socket.on("deleteFolder", async (folderId: string, callback) => {
try {
const files = await getFolder(folderId); const files = await getFolder(folderId);
await Promise.all( await Promise.all(
files.map(async (file) => { files.map(async (file) => {
await containers[data.sandboxId].filesystem.remove( await containers[data.sandboxId].filesystem.remove(path.join(dirName, file));
path.join(dirName, file)
);
sandboxFiles.fileData = sandboxFiles.fileData.filter( sandboxFiles.fileData = sandboxFiles.fileData.filter(
(f) => f.id !== file (f) => f.id !== file
@ -405,14 +335,9 @@ io.on("connection", async (socket) => {
const newFiles = await getSandboxFiles(data.sandboxId); const newFiles = await getSandboxFiles(data.sandboxId);
callback(newFiles.files); callback(newFiles.files);
} catch (e: any) {
console.error("Error deleting folder:", e);
io.emit("error", `Error: folder deletion. ${e.message ?? e}`);
}
}); });
socket.on("createTerminal", async (id: string, callback) => { socket.on("createTerminal", async (id: string, callback) => {
try {
if (terminals[id] || Object.keys(terminals).length >= 4) { if (terminals[id] || Object.keys(terminals).length >= 4) {
return; return;
} }
@ -426,53 +351,36 @@ io.on("connection", async (socket) => {
size: { cols: 80, rows: 20 }, size: { cols: 80, rows: 20 },
onExit: () => console.log("Terminal exited", id), onExit: () => console.log("Terminal exited", id),
}); });
await terminals[id].sendData( await terminals[id].sendData(`cd "${path.join(dirName, "projects", data.sandboxId)}"\r`)
`cd "${path.join(dirName, "projects", data.sandboxId)}"\r`
);
await terminals[id].sendData("export PS1='user> '\rclear\r"); await terminals[id].sendData("export PS1='user> '\rclear\r");
console.log("Created terminal", id); console.log("Created terminal", id);
} catch (e: any) { } catch (error) {
console.error(`Error creating terminal ${id}:`, e); console.error("Error creating terminal ", id, error);
io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
} }
}); });
callback(); callback();
} catch (e: any) {
console.error(`Error creating terminal ${id}:`, e);
io.emit("error", `Error: terminal creation. ${e.message ?? e}`);
}
}); });
socket.on( socket.on("resizeTerminal", (dimensions: { cols: number; rows: number }) => {
"resizeTerminal",
(dimensions: { cols: number; rows: number }) => {
try {
Object.values(terminals).forEach((t) => { Object.values(terminals).forEach((t) => {
t.resize(dimensions); t.resize(dimensions);
}); });
} catch (e: any) { });
console.error("Error resizing terminal:", e);
io.emit("error", `Error: terminal resizing. ${e.message ?? e}`);
}
}
);
socket.on("terminalData", (id: string, data: string) => { socket.on("terminalData", (id: string, data: string) => {
try {
if (!terminals[id]) { if (!terminals[id]) {
return; return;
} }
try {
terminals[id].sendData(data); terminals[id].sendData(data);
} catch (e: any) { } catch (e) {
console.error("Error writing to terminal:", e); console.log("Error writing to terminal", e);
io.emit("error", `Error: writing to terminal. ${e.message ?? e}`);
} }
}); });
socket.on("closeTerminal", async (id: string, callback) => { socket.on("closeTerminal", async (id: string, callback) => {
try {
if (!terminals[id]) { if (!terminals[id]) {
return; return;
} }
@ -481,10 +389,6 @@ io.on("connection", async (socket) => {
delete terminals[id]; delete terminals[id];
callback(); callback();
} catch (e: any) {
console.error("Error closing terminal:", e);
io.emit("error", `Error: closing terminal. ${e.message ?? e}`);
}
}); });
socket.on( socket.on(
@ -496,7 +400,6 @@ io.on("connection", async (socket) => {
instructions: string, instructions: string,
callback callback
) => { ) => {
try {
const fetchPromise = fetch( const fetchPromise = fetch(
`${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`, `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
{ {
@ -530,15 +433,10 @@ io.on("connection", async (socket) => {
const json = await generateCodeResponse.json(); const json = await generateCodeResponse.json();
callback({ response: json.response, success: true }); callback({ response: json.response, success: true });
} catch (e: any) {
console.error("Error generating code:", e);
io.emit("error", `Error: code generation. ${e.message ?? e}`);
}
} }
); );
socket.on("disconnect", async () => { socket.on("disconnect", async () => {
try {
if (data.isOwner) { if (data.isOwner) {
connections[data.sandboxId]--; connections[data.sandboxId]--;
} }
@ -585,15 +483,7 @@ io.on("connection", async (socket) => {
// } else { // } else {
// console.log("number of sockets", sockets.length); // console.log("number of sockets", sockets.length);
// } // }
} catch (e: any) {
console.log("Error disconnecting:", e);
io.emit("error", `Error: disconnecting. ${e.message ?? e}`);
}
}); });
} catch (e: any) {
console.error("Error connecting:", e);
io.emit("error", `Error: connection. ${e.message ?? e}`);
}
}); });
httpServer.listen(port, () => { httpServer.listen(port, () => {

View File

@ -46,7 +46,7 @@ export default function CodeEditor({
// Initialize socket connection if it doesn't exist // Initialize socket connection if it doesn't exist
if (!socketRef.current) { if (!socketRef.current) {
socketRef.current = io( socketRef.current = io(
`${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`, `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
{ {
timeout: 2000, timeout: 2000,
} }
@ -391,7 +391,7 @@ export default function CodeEditor({
setFiles(files) setFiles(files)
} }
const onError = (message: string) => { const onRateLimit = (message: string) => {
toast.error(message) toast.error(message)
} }
@ -413,7 +413,7 @@ export default function CodeEditor({
socketRef.current?.on("connect", onConnect) socketRef.current?.on("connect", onConnect)
socketRef.current?.on("disconnect", onDisconnect) socketRef.current?.on("disconnect", onDisconnect)
socketRef.current?.on("loaded", onLoadedEvent) socketRef.current?.on("loaded", onLoadedEvent)
socketRef.current?.on("error", onError) socketRef.current?.on("rateLimit", onRateLimit)
socketRef.current?.on("terminalResponse", onTerminalResponse) socketRef.current?.on("terminalResponse", onTerminalResponse)
socketRef.current?.on("disableAccess", onDisableAccess) socketRef.current?.on("disableAccess", onDisableAccess)
socketRef.current?.on("previewURL", setPreviewURL) socketRef.current?.on("previewURL", setPreviewURL)
@ -422,7 +422,7 @@ export default function CodeEditor({
socketRef.current?.off("connect", onConnect) socketRef.current?.off("connect", onConnect)
socketRef.current?.off("disconnect", onDisconnect) socketRef.current?.off("disconnect", onDisconnect)
socketRef.current?.off("loaded", onLoadedEvent) socketRef.current?.off("loaded", onLoadedEvent)
socketRef.current?.off("error", onError) socketRef.current?.off("rateLimit", onRateLimit)
socketRef.current?.off("terminalResponse", onTerminalResponse) socketRef.current?.off("terminalResponse", onTerminalResponse)
socketRef.current?.off("disableAccess", onDisableAccess) socketRef.current?.off("disableAccess", onDisableAccess)
socketRef.current?.off("previewURL", setPreviewURL) socketRef.current?.off("previewURL", setPreviewURL)