diff --git a/backend/server/src/index.ts b/backend/server/src/index.ts index 0dc28a3..2cb24c6 100644 --- a/backend/server/src/index.ts +++ b/backend/server/src/index.ts @@ -132,18 +132,27 @@ io.on("connection", async (socket) => { if (!containers[data.sandboxId]) { containers[data.sandboxId] = await Sandbox.create(); console.log("Created container ", data.sandboxId); + io.emit("previewURL", "https://" + containers[data.sandboxId].getHostname(5173)); } } catch (error) { console.error("Error creating container ", data.sandboxId, error); } }); + // Change the owner of the project directory to user + const fixPermissions = async () => { + await containers[data.sandboxId].process.startAndWait( + `sudo chown -R user "${path.join(dirName, "projects", data.sandboxId)}"` + ); + } + const sandboxFiles = await getSandboxFiles(data.sandboxId); sandboxFiles.fileData.forEach(async (file) => { const filePath = path.join(dirName, file.id); await containers[data.sandboxId].filesystem.makeDir(path.dirname(filePath)); await containers[data.sandboxId].filesystem.write(filePath, file.data); }); + fixPermissions(); socket.emit("loaded", sandboxFiles.files); @@ -177,6 +186,7 @@ io.on("connection", async (socket) => { file.data = body; await containers[data.sandboxId].filesystem.write(path.join(dirName, file.id), body); + fixPermissions(); await saveFile(fileId, body); } catch (e) { io.emit("rateLimit", "Rate limited: file saving. Please slow down."); @@ -195,6 +205,7 @@ io.on("connection", async (socket) => { path.join(dirName, fileId), path.join(dirName, newFileId) ) + fixPermissions(); file.id = newFileId; @@ -221,6 +232,7 @@ io.on("connection", async (socket) => { const id = `projects/${data.sandboxId}/${name}`; await containers[data.sandboxId].filesystem.write(path.join(dirName, id), ""); + fixPermissions(); sandboxFiles.files.push({ id, @@ -273,6 +285,7 @@ io.on("connection", async (socket) => { path.join(dirName, fileId), path.join(dirName, newFileId) ) + fixPermissions(); await renameFile(fileId, newFileId, file.data); } catch (e) { io.emit("rateLimit", "Rate limited: file renaming. Please slow down."); diff --git a/frontend/components/editor/index.tsx b/frontend/components/editor/index.tsx index dfd1809..2b0d16c 100644 --- a/frontend/components/editor/index.tsx +++ b/frontend/components/editor/index.tsx @@ -94,6 +94,9 @@ export default function CodeEditor({ }[] >([]) + // Preview state + const [previewURL, setPreviewURL] = useState(""); + const isOwner = sandboxData.userId === userData.id const clerk = useClerk() @@ -413,6 +416,7 @@ export default function CodeEditor({ socketRef.current?.on("rateLimit", onRateLimit) socketRef.current?.on("terminalResponse", onTerminalResponse) socketRef.current?.on("disableAccess", onDisableAccess) + socketRef.current?.on("previewURL", setPreviewURL) return () => { socketRef.current?.off("connect", onConnect) @@ -421,6 +425,7 @@ export default function CodeEditor({ socketRef.current?.off("rateLimit", onRateLimit) socketRef.current?.off("terminalResponse", onTerminalResponse) socketRef.current?.off("disableAccess", onDisableAccess) + socketRef.current?.off("previewURL", setPreviewURL) } // }, []); }, [terminals]) @@ -769,6 +774,7 @@ export default function CodeEditor({ previewPanelRef.current?.expand() setIsPreviewCollapsed(false) }} + src={previewURL} /> diff --git a/frontend/components/editor/preview/index.tsx b/frontend/components/editor/preview/index.tsx index 0544a12..a400d14 100644 --- a/frontend/components/editor/preview/index.tsx +++ b/frontend/components/editor/preview/index.tsx @@ -15,9 +15,11 @@ import { toast } from "sonner" export default function PreviewWindow({ collapsed, open, + src }: { collapsed: boolean open: () => void + src: string }) { const ref = useRef(null) const [iframeKey, setIframeKey] = useState(0) @@ -45,7 +47,7 @@ export default function PreviewWindow({ { - navigator.clipboard.writeText(`http://localhost:5173`) + navigator.clipboard.writeText(src) toast.info("Copied preview link to clipboard") }} > @@ -73,7 +75,7 @@ export default function PreviewWindow({ ref={ref} width={"100%"} height={"100%"} - src={`http://localhost:5173`} + src={src} /> )}