You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/projects-docs/pages/sdk/create.mdx
+81-15Lines changed: 81 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,8 +17,8 @@ Always use the CLI to create custom templates. This is what guarantees scalabili
17
17
-**Create templates for your specific use cases** - Don't rely on generic setups
18
18
-**Pre-install dependencies in templates** - Use `setupTasks` to handle installation during template creation
19
19
-**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
22
22
</Callout>
23
23
24
24
## Templates
@@ -29,9 +29,6 @@ Templates are custom, pre-configured environments that allow you to quickly crea
29
29
To find inspiration check our template repository on GitHub: https://github.com/codesandbox/sandbox-templates
30
30
</Callout>
31
31
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
-
35
32
### Setting up the Template
36
33
37
34
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:
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.
83
80
</Callout>
84
81
85
82
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'
91
88
92
89
const sandbox =awaitsdk.sandboxes.create({
93
90
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
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.
102
100
103
-
####Custom Docker Images
101
+
### Custom Docker Images
104
102
105
103
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:
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.
114
112
115
-
<Callout>
116
-
There is also a `/project/sandbox` folder, but consider this deprecated.
117
-
</Callout>
118
113
119
114
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`:
120
115
@@ -130,7 +125,7 @@ And creating a `.devcontainer/Dockerfile` with the contents of your Dockerfile.
130
125
131
126
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/).
132
127
133
-
####Dev Container Configuration Examples
128
+
### Dev Container Configuration Examples
134
129
135
130
You can also use pre-built images or add features to your Dev Container:
136
131
@@ -146,7 +141,7 @@ You can also use pre-built images or add features to your Dev Container:
146
141
147
142
In this example, we're installing Node v18 as base, with Python on top using Dev Container Features.
148
143
149
-
####Docker Compose Support
144
+
### Docker Compose Support
150
145
151
146
You can run additional services using Docker Compose by adding a `docker-compose.yml` configuration to your Dev Container:
152
147
@@ -179,7 +174,7 @@ services:
179
174
We will automatically start all services defined in your Docker Compose configuration when the Sandbox starts.
180
175
</Callout>
181
176
182
-
#### Setup Tasks vs Dockerfile
177
+
### Setup Tasks vs Dockerfile
183
178
184
179
When would you configure something in the Dockerfile, and when would you configure something in setup tasks?
185
180
@@ -210,7 +205,7 @@ By default Sandboxes are `public` and can be accessed by anyone. Available priva
210
205
</Callout>
211
206
212
207
<Callouttype="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.
214
209
</Callout>
215
210
216
211
```ts
@@ -262,6 +257,77 @@ Each Sandbox has the following properties, with information about it's own insta
262
257
-`cluster`: The cluster the sandbox is running on.
263
258
-`bootupType`: The type of bootup, `RUNNING`, `CLEAN`, `RESUME` or `FORK`.
264
259
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
+
<Callouttype="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
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
+
265
331
## Connect
266
332
267
333
Establishes a connection to the sandbox and returns a client for interacting with it:
0 commit comments