Skip to content

Commit 5d8c91a

Browse files
update how it works
1 parent 33c2751 commit 5d8c91a

9 files changed

Lines changed: 117 additions & 323 deletions

File tree

203 KB
Loading

packages/projects-docs/pages/sdk/create.mdx

Lines changed: 81 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ Always use the CLI to create custom templates. This is what guarantees scalabili
1717
- **Create templates for your specific use cases** - Don't rely on generic setups
1818
- **Pre-install dependencies in templates** - Use `setupTasks` to handle installation during template creation
1919
- **Configure tasks properly** - Set up dev servers and processes in your template configuration
20-
- **Test your templates thoroughly** - Ensure they work consistently across different scenarios
21-
- **Use appropriate VM tiers** - Set the minimum tier needed for your templates
20+
- **Avoid excessive live forks** - When creating a Sandbox from a running Sandbox you perform a **Live Fork**. This is slower than forking from a template or hiernated Sandbox
21+
- **Use appropriate VM tiers** - Set the minimum tier needed for your templates and never downsize the tier of a Sandbox created from a template or other Sandboxes
2222
</Callout>
2323

2424
## Templates
@@ -29,9 +29,6 @@ Templates are custom, pre-configured environments that allow you to quickly crea
2929
To find inspiration check our template repository on GitHub: https://github.com/codesandbox/sandbox-templates
3030
</Callout>
3131

32-
33-
To create a template you will need to use our CLI. This allows you to create optimized, pre-configured environments for your specific use cases.
34-
3532
### Setting up the Template
3633

3734
Create a new folder in your project and add the files you want to have available inside your Sandbox. For example set up a Vite project:
@@ -79,7 +76,7 @@ $ CSB_API_KEY=your-api-key npx @codesandbox/sdk build ./my-template --privacy pr
7976
```
8077

8178
<Callout>
82-
The template defaults to a `Micro` VM Tier for both building the template and when creating Sandboxes from it. You can not "downsize" Sandboxes when creating them from a template, so make sure you set the minimum tier you want here. It is recommended to make templates private, but they default to "unlisted". Use `build --help` for documentation on all parameters.
79+
The template defaults to a `Micro` VM Tier for both building the template and when creating Sandboxes from it. You can not "downsize" Sandboxes when creating them from a template, so make sure you set the minimum tier you want here. It is recommended to make templates private, but they default to "public". Use `build --help` for documentation on all parameters.
8380
</Callout>
8481

8582
This will start the process of creating Sandboxes for each of our clusters, write files, restart, wait for port 5173 to be available and then hibernate. This generates the snapshot that allows you to quickly create Sandboxes already running a dev server from the template.
@@ -91,7 +88,8 @@ import { VMTier } from '@codesandbox/sdk'
9188

9289
const sandbox = await sdk.sandboxes.create({
9390
id: 'your-template-id-here',
94-
// Defaults to your --vm-tier parameter when building the template
91+
// Defaults to your --vm-tier parameter when building the template. Never
92+
// insert a lower tier than the build, this would be a harmful downsizing
9593
vmTier: VMTier.Micro
9694
})
9795
```
@@ -100,7 +98,7 @@ const sandbox = await sdk.sandboxes.create({
10098

10199
If you run the template builder on **CI** you can pass the `--ci` flag. This removes the interactive "failed sandbox" behavior and rather creates the template id regardless. The Sandbox that errored will show the error.
102100

103-
#### Custom Docker Images
101+
### Custom Docker Images
104102

105103
CodeSandbox uses [Dev Containers](https://containers.dev/) for configuring Docker or Docker Compose for an environment. You can configure Docker by creating a `.devcontainer/devcontainer.json` file inside your template folder with these contents:
106104

@@ -112,9 +110,6 @@ CodeSandbox uses [Dev Containers](https://containers.dev/) for configuring Docke
112110

113111
When we boot the sandbox, we'll make sure that the docker image is pulled (or built) and we'll make sure that all shells will start within this container. Your `/project/workspace` folder will also be mounted inside the container.
114112

115-
<Callout>
116-
There is also a `/project/sandbox` folder, but consider this deprecated.
117-
</Callout>
118113

119114
You can decide to build the Docker image as part of the template creation process as well. You can do this by defining this in your `.devcontainer/devcontainer.json`:
120115

@@ -130,7 +125,7 @@ And creating a `.devcontainer/Dockerfile` with the contents of your Dockerfile.
130125

131126
For more options (like running docker compose, or adding additional features), you can look at the [Dev Container docs](https://containers.dev/implementors/json_reference/).
132127

133-
#### Dev Container Configuration Examples
128+
### Dev Container Configuration Examples
134129

135130
You can also use pre-built images or add features to your Dev Container:
136131

@@ -146,7 +141,7 @@ You can also use pre-built images or add features to your Dev Container:
146141

147142
In this example, we're installing Node v18 as base, with Python on top using Dev Container Features.
148143

149-
#### Docker Compose Support
144+
### Docker Compose Support
150145

151146
You can run additional services using Docker Compose by adding a `docker-compose.yml` configuration to your Dev Container:
152147

@@ -179,7 +174,7 @@ services:
179174
We will automatically start all services defined in your Docker Compose configuration when the Sandbox starts.
180175
</Callout>
181176
182-
#### Setup Tasks vs Dockerfile
177+
### Setup Tasks vs Dockerfile
183178
184179
When would you configure something in the Dockerfile, and when would you configure something in setup tasks?
185180
@@ -210,7 +205,7 @@ By default Sandboxes are `public` and can be accessed by anyone. Available priva
210205
</Callout>
211206

212207
<Callout type="warning">
213-
**Warning about Live Forks**: If you use the `id` of a running sandbox to create a new sandbox, it will become a "live fork" which does not scale. It will take longer to resume, and with many forks from the same sandbox, the latency gets higher and higher until you eventually get errors. Always use hibernated sandbox IDs or template IDs for optimal performance.
208+
**Warning about Live Forks**: If you use the `id` of a running sandbox to create a new sandbox, it will become a "live fork" which does not scale. It will take longer to fork, and with many forks from the same sandbox, the latency gets higher and higher until you eventually get errors. Always use hibernated sandbox IDs or template IDs for optimal performance.
214209
</Callout>
215210

216211
```ts
@@ -262,6 +257,77 @@ Each Sandbox has the following properties, with information about it's own insta
262257
- `cluster`: The cluster the sandbox is running on.
263258
- `bootupType`: The type of bootup, `RUNNING`, `CLEAN`, `RESUME` or `FORK`.
264259

260+
## Workspace
261+
262+
Every sandbox comes with a workspace that provides persistent storage and configuration for your project. The workspace is located at `/project/workspace` and serves as the main working directory for your code and files.
263+
264+
<Callout>
265+
There is also a `/project/sandbox` folder, but consider this deprecated. Use `/project/workspace` for all new projects.
266+
</Callout>
267+
268+
### Git-based Persistence
269+
270+
The primary persistence mechanism is based on git with a local remote. This means the workspace is initialized with git automatically.
271+
272+
<Callout type="warning">
273+
**Warning about Git Commands**: Users should not run git commands in the workspace unless they do one of the following:
274+
275+
1. **Change the remote of the workspace** - Point to their own git repository
276+
2. **Clone a repo as a nested folder** - Work within a cloned repository inside the workspace
277+
278+
Both of these approaches will enable a secondary persistence mechanisms which is not git.
279+
</Callout>
280+
281+
If you want to use Git in a Sandbox, use one of the following approaches:
282+
283+
#### Option 1: Change the Remote
284+
285+
```bash
286+
# Remove the default local remote and add your own
287+
git remote remove origin
288+
git remote add origin https://github.com/your-username/your-repo.git
289+
290+
# Now you can push/pull normally
291+
git push -u origin main
292+
```
293+
294+
#### Option 2: Clone as Nested Folder
295+
296+
```bash
297+
# Clone your repository inside the workspace
298+
cd /project/workspace
299+
git clone https://github.com/your-username/your-repo.git my-project
300+
cd my-project
301+
302+
# Work normally within the cloned repository
303+
git add .
304+
git commit -m "Your changes"
305+
git push
306+
```
307+
308+
This approach ensures your work is properly persisted beyond the 4-day hibernation limit and survives sandbox archiving.
309+
310+
### Configuration Directories
311+
312+
The workspace includes two important configuration directories:
313+
314+
#### `.codesandbox` Directory
315+
316+
The `.codesandbox` directory contains CodeSandbox-specific configuration files that control how your sandbox behaves:
317+
318+
- **`tasks.json`**: Defines setup tasks and runtime tasks for your sandbox
319+
- **Configuration files**: Additional settings for sandbox behavior and environment setup
320+
321+
#### `.devcontainer` Directory
322+
323+
The `.devcontainer` directory contains Development Container configuration files that define your sandbox's Docker environment:
324+
325+
- **`devcontainer.json`**: Main configuration file for the dev container setup
326+
- **`Dockerfile`**: Custom Docker image definitions (when using custom builds)
327+
- **`docker-compose.yml`**: Multi-service configurations for complex setups
328+
329+
These files allow you to customize the underlying container environment, install additional tools, and configure multi-service architectures for your projects.
330+
265331
## Connect
266332

267333
Establishes a connection to the sandbox and returns a client for interacting with it:

0 commit comments

Comments
 (0)