|
1 | | -## sandbox-example |
| 1 | +# @cloudflare/sandbox example |
2 | 2 |
|
3 | | -This is an example of using the sandbox package. |
| 3 | +This example demonstrates the full capabilities of the `@cloudflare/sandbox` package through an interactive web-based REPL that lets you execute commands in a sandboxed container environment. |
4 | 4 |
|
5 | | -To run the example, run `npm start`. |
| 5 | +## What This Example Does |
| 6 | + |
| 7 | +This example creates a Cloudflare Worker that: |
| 8 | + |
| 9 | +- Hosts a React-based web interface for interacting with a sandbox |
| 10 | +- Routes API requests to a sandboxed container running Linux |
| 11 | +- Demonstrates both regular and streaming command execution |
| 12 | +- Shows real-time output from commands like `tail -f` or `top` |
| 13 | + |
| 14 | +## Features |
| 15 | + |
| 16 | +- **Interactive REPL**: Web-based command line interface |
| 17 | +- **Real-time Streaming**: Execute commands with live output streaming |
| 18 | +- **Session Management**: Maintains persistent sandbox sessions |
| 19 | +- **Rich UI**: Modern React interface with command history and status indicators |
| 20 | +- **Example Commands**: Built-in examples for common Linux commands |
| 21 | + |
| 22 | +## Quick Start |
| 23 | + |
| 24 | +1. **Install dependencies**: |
| 25 | + |
| 26 | + ```bash |
| 27 | + npm install |
| 28 | + ``` |
| 29 | + |
| 30 | +2. **Start development server**: |
| 31 | + |
| 32 | + ```bash |
| 33 | + npm start |
| 34 | + ``` |
| 35 | + |
| 36 | +3. **Open your browser** and navigate to the URL shown in the terminal (typically `http://localhost:8787`) |
| 37 | + |
| 38 | +4. **Try some commands** in the web interface: |
| 39 | + - `ls -la` - List files with details |
| 40 | + - `pwd` - Show current directory |
| 41 | + - `echo "Hello from sandbox!"` - Print text |
| 42 | + - `whoami` - Show current user |
| 43 | + - `cat /etc/os-release` - Display OS information |
| 44 | + |
| 45 | +## Architecture |
| 46 | + |
| 47 | +The example consists of: |
| 48 | + |
| 49 | +- **Worker (`src/index.ts`)**: Cloudflare Worker that proxies requests to the sandbox |
| 50 | +- **React App (`app/index.tsx`)**: Interactive web interface for the REPL |
| 51 | +- **Dockerfile**: Container configuration using the sandbox base image |
| 52 | +- **Wrangler Config**: Cloudflare configuration with container and Durable Object setup |
| 53 | + |
| 54 | +## Key Concepts Demonstrated |
| 55 | + |
| 56 | +1. **Container Integration**: Shows how to configure and deploy containers with Cloudflare Workers |
| 57 | +2. **Durable Objects**: Uses Durable Objects for persistent sandbox sessions |
| 58 | +3. **HTTP Client**: Implements the sandbox HTTP client for command execution |
| 59 | +4. **Streaming**: Demonstrates real-time command output streaming |
| 60 | +5. **Session Management**: Shows how to create and manage sandbox sessions |
| 61 | + |
| 62 | +## Deployment |
| 63 | + |
| 64 | +Containers on Cloudflare are currently [in public beta](https://blog.cloudflare.com/containers-are-available-in-public-beta-for-simple-global-and-programmable), available for all paid accounts. If you have one, you can simply run: |
| 65 | + |
| 66 | +```bash |
| 67 | +npm run deploy |
| 68 | +``` |
| 69 | + |
| 70 | +## Understanding the Code |
| 71 | + |
| 72 | +- The Worker acts as a proxy between the web interface and the sandbox container |
| 73 | +- The React app uses the sandbox HTTP client to communicate with the Worker |
| 74 | +- Commands are executed in the container and results are streamed back to the UI |
| 75 | +- The Dockerfile extends the base sandbox image with the necessary runtime |
0 commit comments