Update sandbox templates and configuration

Author: Gerome-Elassaad

app/api/sandbox/route.ts

@@ -1,9 +1,72 @@
 import { FragmentSchema } from '@/lib/schema'
 import { ExecutionResultInterpreter, ExecutionResultWeb } from '@/lib/types'
 import { Sandbox } from '@e2b/code-interpreter'
+import { FileSystemNode } from '@/components/file-tree'
 
 const sandboxTimeout = 10 * 60 * 1000
 
+async function fetchSandboxFiles(sbx: Sandbox): Promise<FileSystemNode[]> {
+  try {
+    const result = await sbx.commands.run(
+      'find /home/user -type f -o -type d 2>/dev/null | grep -v "node_modules" | sort'
+    )
+
+    if (result.exitCode !== 0) {
+      console.error('Error listing files:', result.stderr)
+      return []
+    }
+
+    return parseFileTree(result.stdout)
+  } catch (error) {
+    console.error('Error fetching sandbox files:', error)
+    return []
+  }
+}
+
+function parseFileTree(output: string): FileSystemNode[] {
+  const lines = output.trim().split('\n').filter(line => line.trim())
+  const root: FileSystemNode[] = []
+  const nodeMap = new Map<string, FileSystemNode>()
+
+  const paths = lines
+    .map(line => line.trim())
+    .filter(path => path.startsWith('/home/user/'))
+    .sort()
+
+  for (const fullPath of paths) {
+    const relativePath = fullPath.replace('/home/user/', '')
+    if (!relativePath) continue
+
+    const parts = relativePath.split('/')
+    const name = parts[parts.length - 1]
+    const parentPath = parts.slice(0, -1).join('/')
+
+    const node: FileSystemNode = {
+      name,
+      isDirectory: false,
+      path: `/${relativePath}`,
+      children: []
+    }
+
+    nodeMap.set(relativePath, node)
+
+    if (parentPath === '') {
+      root.push(node)
+    } else {
+      const parent = nodeMap.get(parentPath)
+      if (parent) {
+        if (!parent.children) {
+          parent.children = []
+        }
+        parent.children.push(node)
+        parent.isDirectory = true
+      }
+    }
+  }
+
+  return root
+}
+
 export const maxDuration = 60
 export const runtime = 'nodejs'
 export const dynamic = 'force-dynamic'
@@ -97,6 +160,9 @@ export async function POST(req: Request) {
       if (fragment.template === 'code-interpreter-v1') {
         const { logs, error, results } = await sbx.runCode(fragment.code || '')
 
+        // Fetch file tree after execution
+        const files = await fetchSandboxFiles(sbx)
+
         return new Response(
           JSON.stringify({
             sbxId: sbx?.sandboxId,
@@ -105,6 +171,7 @@ export async function POST(req: Request) {
             stderr: logs.stderr,
             runtimeError: error,
             cellResults: results,
+            files,
           } as ExecutionResultInterpreter),
           { headers: { 'Content-Type': 'application/json' } }
         )
@@ -116,11 +183,15 @@ export async function POST(req: Request) {
         },
       })
 
+      // Fetch file tree after project setup
+      const files = await fetchSandboxFiles(sbx)
+
       return new Response(
         JSON.stringify({
           sbxId: sbx?.sandboxId,
           template: fragment.template,
           url: `https://${sbx?.getHost(fragment.port || 80)}`,
+          files,
         } as ExecutionResultWeb),
         { headers: { 'Content-Type': 'application/json' } }
       )

sandbox-templates/nextjs-developer/e2b.Dockerfile

@@ -1,65 +1,24 @@
-# Use ARG to define versions for easier updates
-ARG NODE_VERSION=22-slim
-ARG NEXT_APP_VERSION=14.2.20
-ARG SHADCN_VERSION=2.1.7
+FROM node:21-slim
 
-# ---- Base Image ----
-# Use a base image with Node pre-installed
-FROM node:${NODE_VERSION} as base
+# Install curl
+RUN apt-get update && apt-get install -y curl && apt-get clean && rm -rf /var/lib/apt/lists/*
 
-# Set up the environment
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+# Install dependencies and customize sandbox
+WORKDIR /home/user/nextjs-app
 
-WORKDIR /home/user/app
-
-# ---- Builder Stage ----
-# This stage is for building the Next.js application
-FROM base as builder
-
-# Install necessary build tools
-RUN apt-get update && apt-get install -y --no-install-recommends curl git && \
-    apt-get clean && rm -rf /var/lib/apt/lists/*
-
-# Create the Next.js application
-# Using --use-pnpm for faster dependency installation
-RUN npx create-next-app@${NEXT_APP_VERSION} . --ts --tailwind --no-eslint --import-alias "@/*" --use-pnpm --no-app --no-src-dir
-
-# Copy custom configurations
+RUN npx create-next-app@14.2.20 . --ts --tailwind --no-eslint --import-alias "@/*" --use-npm --no-app --no-src-dir
 COPY _app.tsx pages/_app.tsx
 
-# Initialize and add shadcn components
-# The -y flag accepts all defaults
-RUN npx shadcn-cli@${SHADCN_VERSION} init -y
-RUN npx shadcn-cli@${SHADCN_VERSION} add --all -y
-
-# Install additional dependencies
-RUN pnpm install posthog-js
-
-# ---- Runtime Stage ----
-# This stage creates the final, smaller image
-FROM base as runtime
-
-WORKDIR /home/user/app
-
-# Copy dependencies and application code from the builder stage
-COPY --from=builder /home/user/app/package.json /home/user/app/pnpm-lock.yaml ./
-RUN pnpm install --prod
-
-COPY --from=builder /home/user/app/ ./
-
-# Copy the compile script and make it executable
-COPY compile_page.sh /compile_page.sh
-RUN chmod +x /compile_page.sh
+RUN npx shadcn@2.1.7 init -d
+RUN npx shadcn@2.1.7 add --all
+RUN npm install posthog-js
 
-# Create a non-root user for better security
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-USER nextjs
+# Move the Nextjs app to the home directory and remove the nextjs-app directory
+RUN mv /home/user/nextjs-app/* /home/user/ && rm -rf /home/user/nextjs-app
 
-# Expose the port Next.js runs on
-EXPOSE 3000
+# Copy script to user home directory so it's visible in the editor
+COPY compile_page.sh /home/user/compile_page.sh
+RUN chmod +x /home/user/compile_page.sh
 
-# Set the default command to start the Next.js app in development mode
-CMD ["pnpm", "run", "dev"]
+# Set working directory to user home
+WORKDIR /home/user

sandbox-templates/vue-developer/e2b.Dockerfile

@@ -1,6 +1,4 @@
-# You can use most Debian-based base images
 FROM node:21-slim
-FROM e2b AS Sandbox
 
 WORKDIR /home/user/vue-app
 
@@ -10,3 +8,6 @@ COPY nuxt.config.ts /home/user/vue-app/nuxt.config.ts
 
 # Move the Vue app to the home directory and remove the Vue directory
 RUN mv /home/user/vue-app/* /home/user/ && rm -rf /home/user/vue-app
+
+# Set working directory to user home
+WORKDIR /home/user