fix: use the container URL for the preview panel

backend/server/src/index.ts

@@ -132,6 +132,7 @@ 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);

frontend/components/editor/index.tsx

@@ -94,6 +94,9 @@ export default function CodeEditor({
     }[]
   >([])
 
+  // Preview state
+  const [previewURL, setPreviewURL] = useState<string>("");
+
   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}
               />
             </ResizablePanel>
             <ResizableHandle />

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<HTMLIFrameElement>(null)
   const [iframeKey, setIframeKey] = useState(0)
@@ -45,7 +47,7 @@ export default function PreviewWindow({
 
                 <PreviewButton
                   onClick={() => {
-                    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}
           />
         </div>
       )}