diff --git a/packages/projects-docs/pages/faq.mdx b/packages/projects-docs/pages/faq.mdx index 74574771..99f51091 100644 --- a/packages/projects-docs/pages/faq.mdx +++ b/packages/projects-docs/pages/faq.mdx @@ -12,24 +12,24 @@ import { Callout } from 'nextra-theme-docs' ## Which languages and frameworks are supported? -[Cloud Sandboxes](/learn/sandboxes/overview?tab=cloud#what-is-a-cloud-sandbox) and [Repositories](/learn/repositories/overview) work with anything that can run in Docker. They provide the best experience for JavaScript (including TypeScript), frontend and full-stack, and officially support (with built-in LSP/IntelliSense) Rust, Go, Python, PHP, Ruby on Rails, Elixir, Node and Deno (more languages coming soon). +[Devboxes](/learn/sandboxes/overview?tab=cloud#what-is-a-cloud-sandbox) and [Repositories](/learn/repositories/overview) work with anything that can run in Docker. They provide the best experience for JavaScript (including TypeScript), frontend and full-stack, and officially support (with built-in LSP/IntelliSense) Rust, Go, Python, PHP, Ruby on Rails, Elixir, Node and Deno (more languages coming soon). [Browser sandboxes](/learn/sandboxes/overview) are more limited. They support JavaScript/TypeScript projects, as well as Node.js. [Create a sandbox from a template](https://codesandbox.io/s/), or read more about the -[difference between browser and cloud sandboxes](/learn/sandboxes/editors). +[difference between Sandboxes and Devboxes](/learn/sandboxes/editors). ## How do I make a sandbox private? -There are several ways to set a sandbox as private. One universal way (that works both for browser sandboxes and cloud sandboxes) is to right-click a sandbox from the dashboard and select _Make sandbox private_. +There are several ways to set a sandbox as private. One universal way (that works both for sandboxes and devboxes) is to right-click a sandbox from the dashboard and select _Make sandbox private_. A [Pro subscription](https://codesandbox.io/pricing) is required to make sandboxes private or unlisted. -You can also change the privacy settings from the editor. How you do it will depend on whether you're using a browser sandbox or a cloud sandbox, as shown below. +You can also change the privacy settings from the editor. How you do it will depend on whether you're using a sandbox or a devbox, as shown below. ### Make a browser sandbox private @@ -40,11 +40,11 @@ The browser editor provides two ways to change the privacy settings: ![Make private in the editor](./learn/images/sandbox-private.jpg) -### Make a cloud sandbox private +### Make a Devbox private -The cloud editor also provides two ways to change the privacy settings: +The Devbox editor also provides two ways to change the privacy settings: -1. Click the chevron on the right side of your sandbox's name at the top of the screen; click _Edit info_ and then change the drop-down next to _Privacy_. +1. Click the chevron on the right side of your Devbox's name at the top of the screen; click _Edit info_ and then change the drop-down next to _Privacy_. 2. Click the _Share_ button on the top right and change the drop-down under _Permissions_. ## I'm getting a 422 error when importing from GitHub, why? @@ -59,20 +59,20 @@ you. ## Why are my start scripts not having an effect? -For performance reasons, we ignore any specified scripts in browser sandboxes, +For performance reasons, we ignore any specified scripts in sandboxes, instead using a default script. If you need to control the scripts, then we -recommend using a [cloud sandbox](/learn/sandboxes/overview?tab=cloud#what-is-a-cloud-sandbox). +recommend using a [Devbox](/learn/sandboxes/overview?tab=cloud#what-is-a-cloud-sandbox). ## Can I change the Node version used in a sandbox? -Yes, for cloud sandboxes you can refer to [here](https://codesandbox.io/docs/learn/environment/vm#configuring-nodejs-version) to learn how to change the Node version. All recent server sandboxes run in a cloud sandbox. +Yes, for Devboxes you can refer to [here](https://codesandbox.io/docs/learn/environment/vm#configuring-nodejs-version) to learn how to change the Node version. All recent server sandboxes run in a Devbox. For container sandboxes that are created after May 10 2021, we run Node v14.18.1 (LTS) by default. For backwards compatibility, the older sandboxes are on Node v10. However, you can specify a `node` value to alter the version in `sandbox.config.json`, which will be used instead. For further details, see [configuration](/learn/sandboxes/configuration). -Note that we recommend using Cloud Sandboxes when you're working with Node.js projects. +Note that we recommend using Devboxes when you're working with Node.js projects. ## Can I open the terminal, console, or test panel instead of the browser in a browser sandbox? @@ -96,7 +96,7 @@ Changing fonts is currently only supported in [browser sandboxes](/learn/sandbox ## Do sandboxes have any limitations? -We currently provide [Browser Sandboxes](/learn/sandboxes/overview#what-is-a-browser-sandbox) and [Cloud Sandboxes](/learn/sandboxes/overview?tab=cloud#what-is-a-cloud-sandbox). Browser Sandboxes have the following limitations: +We currently provide [Sandboxes](/learn/sandboxes/overview#what-is-a-browser-sandbox) and [Devboxes](/learn/sandboxes/overview?tab=cloud#what-is-a-cloud-sandbox). Sandboxes have the following limitations: - The maximum file upload size is 7MB for Free users and 30MB for Pro users. - Imported sandboxes must contain a `package.json` file. @@ -117,7 +117,7 @@ We currently provide [Browser Sandboxes](/learn/sandboxes/overview#what-is-a-bro - When using a container, the sandbox has a 1GB persistent storage limit, a 1GB vCPU soft limit, and a hard memory limit of 2 GB. -Cloud Sandboxes are part of our evolved CodeSandbox experience, so we highly advise you to use them to avoid encountering these limitations. +Devboxes are part of our evolved CodeSandbox experience, so we highly advise you to use them to avoid encountering these limitations. ## I'm getting a 'Request Entity too Large' error, what should I do? @@ -156,9 +156,9 @@ If you're having issues with your database, you can check the logs of the contai ## How do I change the editor's theme? -To change the [theme of a Cloud Sandbox](https://codesandbox.io/docs/learn/repositories/themes), click on the CodeSandbox logo at the top left, then go to Settings > Preferences, and select a theme from the Themes dropdown. You can also do it from the [command palette](https://codesandbox.io/docs/learn/repositories/commandpalette). +To change the [theme of a Devbox](https://codesandbox.io/docs/learn/repositories/themes), click on the CodeSandbox logo at the top left, then go to Settings > Preferences, and select a theme from the Themes dropdown. You can also do it from the [command palette](https://codesandbox.io/docs/learn/repositories/commandpalette). -On a Browser Sandbox, you can change the theme from File > Preferences > Color Theme in the editor. You can also set a custom VS Code theme on a Browser Sandbox. Open VS Code, Press (CMD or CTRL) + +On a Sandbox, you can change the theme from File > Preferences > Color Theme in the editor. You can also set a custom VS Code theme on a Sandbox. Open VS Code, Press (CMD or CTRL) + SHIFT + P, Enter: '> Developer: Generate Color Scheme From Current Settings', copy the contents and paste it into Preferences > Appearance from the top-right avatar menu. After completing that, you need to reload the browser and select @@ -210,7 +210,7 @@ To add someone new to the team, provide access on GitHub and add them to your Co Yes. Follow the steps below: -1. Use our [VS Code extension](https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects) to connect to one of our Cloud Sandboxes or Repositories. +1. Use our [VS Code extension](https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects) to connect to one of our Devboxes or Repositories. 2. Install the Copilot VS Code extension (if not already installed). 3. Configure the extension to run in CodeSandbox remote connections (following the instructions for [Default User Extensions](/learn/repositories/editors#default-user-extensions)). diff --git a/packages/projects-docs/pages/learn/_meta.json b/packages/projects-docs/pages/learn/_meta.json index 701743df..e48c9548 100644 --- a/packages/projects-docs/pages/learn/_meta.json +++ b/packages/projects-docs/pages/learn/_meta.json @@ -6,17 +6,17 @@ "title": "Cloud Development" }, "repositories": "Repositories", - "sandboxes": "Cloud Sandboxes", + "devboxes": "Devboxes", "editors": "Editors", - "boxy": "Boxy", + "ai": "AI", "environment": "Environment", "integrations": "Integrations", - "-- browser-sandboxes": { + "-- sandboxes": { "type": "separator", - "title": "Browser Sandboxes" + "title": "Sandboxes" }, - "browser-vs-cloud-sbx": "Why Browser Sandboxes", - "browser-sandboxes": "Features", + "sandboxes": "Sandboxes", + "legacy-sandboxes": "Legacy Sandboxes", "-- more": { "type": "separator", "title": "More" diff --git a/packages/projects-docs/pages/learn/boxy/_meta.json b/packages/projects-docs/pages/learn/ai/_meta.json similarity index 59% rename from packages/projects-docs/pages/learn/boxy/_meta.json rename to packages/projects-docs/pages/learn/ai/_meta.json index 7f1b91ee..66770526 100644 --- a/packages/projects-docs/pages/learn/boxy/_meta.json +++ b/packages/projects-docs/pages/learn/ai/_meta.json @@ -1,5 +1,6 @@ { - "overview": "Overview", + "boxy": "Boxy", + "codeium": "Codeium", "getting-started": "Getting Started", "faqs": "FAQs" } diff --git a/packages/projects-docs/pages/learn/boxy/overview.mdx b/packages/projects-docs/pages/learn/ai/boxy.mdx similarity index 100% rename from packages/projects-docs/pages/learn/boxy/overview.mdx rename to packages/projects-docs/pages/learn/ai/boxy.mdx diff --git a/packages/projects-docs/pages/learn/ai/codeium.mdx b/packages/projects-docs/pages/learn/ai/codeium.mdx new file mode 100644 index 00000000..280e1498 --- /dev/null +++ b/packages/projects-docs/pages/learn/ai/codeium.mdx @@ -0,0 +1,35 @@ +--- +title: Codeium code auto-complete +description: Introduction to the AI-powered code generator +--- + +import { Callout } from 'nextra-theme-docs' + + +# Codeium code autocomplete + +Codeium is an incredible AI-powered developer toolkit. Their code completion tool provides single and multi-line code generation with multiple suggestions to choose from. It supports 70+ programming languages, so it’s a perfect fit with our Devboxes, which can also run any type of project. + +![Codeium example](../images/codeium-example.png) + +## Getting started + +Codeium code completion is now available for free to every CodeSandbox user on [Devboxes](https://codesandbox.io/dashboard/recent?create_devbox=true). + +If you have your AI settings enabled, you will get AI autocomplete working in your code immediately. Note that we disable AI permission toggles by default, so if you have not yet enabled them, you will have a chance to do so through our announcement interfaces or through the workspace settings. + +## Settings and configuration + +In the workspace settings, you will see an option to turn on AI for Devboxes and Repositories in the workspace. +If you want to override these settings for a particular Repository or Devbox, you can open the editor, navigate to _Settings > Preferences_ and turn off the AI option. This will deactivate AI for all users accessing the Devbox or repo. + +## Security & privacy + +By using Codeium you are accepting their terms and conditions. +You can read more about their terms of service on the [Codeium website](https://codeium.com/terms-of-service-individual). + +Here is a short list of their security & privacy policies: +- Opt-out for code snippet telemetry. +- Never train generative models on private code. +- SOC 2 compliance. +- No training on non-permissively licensed code. \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/boxy/faqs.mdx b/packages/projects-docs/pages/learn/ai/faqs.mdx similarity index 68% rename from packages/projects-docs/pages/learn/boxy/faqs.mdx rename to packages/projects-docs/pages/learn/ai/faqs.mdx index ff531da9..7b178341 100644 --- a/packages/projects-docs/pages/learn/boxy/faqs.mdx +++ b/packages/projects-docs/pages/learn/ai/faqs.mdx @@ -17,8 +17,8 @@ Boxy and all CodeSandbox AI-powered tools are available to Pro workspaces. You c No. Boxy is only available to [Pro subscribers](https://codesandbox.io/pro). -### Is Boxy available for browser sandboxes? +### Is Boxy available for sandboxes? -No. Boxy is exclusively available in cloud sandboxes and repositories. However, you can easily [fork a browser sandbox into a cloud sandbox](/tutorial/convert-browser-sandbox-cloud) to get access to Boxy. This is available through the "sparkles" icon at the bottom of the left sidebar, as seen below. +No. Boxy is exclusively available in devboxes and repositories. However, you can easily [convert a Sandbox into a Devbox](/tutorial/convert-browser-sandbox-cloud) to get access to Boxy. This is available through the "Convert to Devbox" button at the top right of the Sandbox editor. ![Convert browser sandbox](../images/convert-sandbox-from-ai.png) diff --git a/packages/projects-docs/pages/learn/boxy/getting-started.mdx b/packages/projects-docs/pages/learn/ai/getting-started.mdx similarity index 74% rename from packages/projects-docs/pages/learn/boxy/getting-started.mdx rename to packages/projects-docs/pages/learn/ai/getting-started.mdx index 9a27cb59..6ad7f4ec 100644 --- a/packages/projects-docs/pages/learn/boxy/getting-started.mdx +++ b/packages/projects-docs/pages/learn/ai/getting-started.mdx @@ -13,10 +13,10 @@ All CodeSandbox AI tools are available for Pro users. To enable these features, Once you grant AI permissions, CodeSandbox will send information about the event to OpenAI for analysis. Under no circumstances will we send any event data to OpenAI without explicit instruction to do so. We will only share selected event data with OpenAI after you toggle on these permissions. OpenAI does not use the event data shared via this feature to train its AI models. To learn more about our privacy agreement with OpenAI, check out our [Privacy page](https://codesandbox.io/legal/privacy). ## Running AI -Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a cloud sandbox, the option will read `Restart Sandbox`. +Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`. ## Boxy for Sandboxes -Boxy is available only on repositories and cloud sandboxes. If you want the support of Boxy in your browser sandbox, you can easily [convert your sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar. +Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar. diff --git a/packages/projects-docs/pages/learn/browser-vs-cloud-sbx.mdx b/packages/projects-docs/pages/learn/browser-vs-cloud-sbx.mdx deleted file mode 100644 index f7b6e4b9..00000000 --- a/packages/projects-docs/pages/learn/browser-vs-cloud-sbx.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Sandboxes -description: Learn about the differences between cloud sandboxes and browser sandboxes. ---- - -import { Tabs, WrapContent } from '../../../../shared-components/Tabs' - -# CodeSandbox Sandboxes - -Sandboxes are the ideal environment for rapid web development. CodeSandbox provides two types of sandboxes: browser sandboxes (which run in the browser) and cloud sandboxes (which run in a microVM). - -To create a new sandbox, you can clone a template from our ["Create Sandbox"](https://codesandbox.io/s) modal. When clicking on a template, we create a fork (a copy) of the template and open the newly created sandbox in our web editor. - -## Difference between Browser & Cloud Sandboxes - - - - ## What is a Browser Sandbox? - When using Browser Sandboxes, your code is evaluated and run in our built-in -execution environment. These client environments run entirely inside of your browser and will continue to -bundle your code even when you lose your connection to our servers. - -Browser Sandboxes each have their own bundler attached to them which is -configured to support a specific framework and emulate their official CLI tools. -They are not one-to-one implementations and thus do not support advanced -configuration like custom webpack configurations or ejecting. However, they are -designed to mirror the default behavior of the framework. - -If your project requires the use of a terminal or any additional advanced configuration like Docker, you can use a [Cloud Sandbox](/learn/sandboxes/overview?tab=cloud) instead. - - - -## What is a Cloud Sandbox? -Unlike Browser Sandboxes that run on your browser, Cloud Sandboxes run on our [microVMs](/learn/environment/vm). - - Cloud Sandboxes are great for prototyping any type of project. They can run both backend and frontend services. - You can learn more about the editor and the unique functionalities of the cloud developer environment in [Repositories](/learn/repositories/overview). - - Like Browser Sandboxes, Cloud Sandboxes are free to use. - - Cloud Sandboxes run on microVMs, which brings two features that make them great for prototyping: - - 1. Fast cloning. You can fork a sandbox [within 2 seconds](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds) and continue with an exact clone of the microVM. This way, you can quickly test multiple approaches to your prototype. - 2. Instant resume. When you connect to a Cloud Sandbox, it will wake up within 1 second and continue with your running dev server. This way, you can quickly continue prototyping. - - Cloud Sandboxes and Repositories run on the same infrastructure and use the same editor. The main distinction between the two is that Sandboxes are built for prototyping while Repositories are built for full-scale development. Once you scale a Sandbox to a Repository, you will have: - - Branching - - Git tooling - - Full integration with GitHub - - To configure a Cloud Sandbox, you can read more about [tasks](https://codesandbox.io/docs/learn/repositories/task) and [Docker](https://codesandbox.io/docs/learn/environment/docker). - - - \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/ci.mdx b/packages/projects-docs/pages/learn/ci.mdx index b83a6de1..052abf77 100644 --- a/packages/projects-docs/pages/learn/ci.mdx +++ b/packages/projects-docs/pages/learn/ci.mdx @@ -80,7 +80,7 @@ These are all the configuration options you can set. They are all optional. // replace `lodash` with the built version. // You can also set absolute paths to a directory in your repository. We will make sure // to generate a sandbox from the contents of that directory. - // Currently, Cloud Sandboxes are not supported. + // Currently, Devboxes are not supported. "sandboxes": ["vanilla", "new", "/examples/todomvc"], // Node.js version to use for building the PR. // Supported versions are "10" (10.24.1, default), "12" (12.22.12), "14" (14.21.1), diff --git a/packages/projects-docs/pages/learn/devboxes/_meta.json b/packages/projects-docs/pages/learn/devboxes/_meta.json new file mode 100644 index 00000000..18ce30e2 --- /dev/null +++ b/packages/projects-docs/pages/learn/devboxes/_meta.json @@ -0,0 +1,11 @@ +{ + "overview": "Overview", + "your-first-sandbox": "First-Time Setup", + "embedding": "Embedding", + "secrets": { + "title": "Secrets", + "href": "/learn/environment/secrets" + }, + "templates": "Templates", + "synced-templates": "Synced Templates" +} diff --git a/packages/projects-docs/pages/learn/repositories/devtools.mdx b/packages/projects-docs/pages/learn/devboxes/devtools.mdx similarity index 100% rename from packages/projects-docs/pages/learn/repositories/devtools.mdx rename to packages/projects-docs/pages/learn/devboxes/devtools.mdx diff --git a/packages/projects-docs/pages/learn/devboxes/editors.mdx b/packages/projects-docs/pages/learn/devboxes/editors.mdx new file mode 100644 index 00000000..c56f722c --- /dev/null +++ b/packages/projects-docs/pages/learn/devboxes/editors.mdx @@ -0,0 +1,28 @@ +--- +title: Editors +description: +--- + +import { Tabs, WrapContent } from '../../../../../shared-components/Tabs' +import { Callout } from 'nextra-theme-docs' +import Video from '../../../../../shared-components/Video' + + +# Editors + +CodeSandbox offers two different development environments: a browser-based Sandbox and cloud-based Devbox. + + + +Devboxes run inside a Firecracker MicroVM and use memory snapshotting to ensure fast fork time and wake-up time. They can run anything that you would be able to run in your local environment, including Docker containers. You can learn more about how they work in our [blog post](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds). + +Devboxes are best used to run backend services, compiled languages and things like databases. + +The Devbox editor contains a set of features to increase the accessibility of complex tools like git, setup, review flows, contributions, and visualizing components. + + + + Sandboxes run fully in the browser, and are especially useful to run frontend JavaScript/TypeScript frameworks. If you would like to run backend services or databases, check Devboxes. + + + \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/devboxes/embedding.mdx b/packages/projects-docs/pages/learn/devboxes/embedding.mdx new file mode 100644 index 00000000..c3a3eeb6 --- /dev/null +++ b/packages/projects-docs/pages/learn/devboxes/embedding.mdx @@ -0,0 +1,80 @@ +--- +title: Embedding +authors: ['CompuIves'] +description: Embed a sandbox in docs, blog posts, Medium, and other websites. +--- + +import { Callout } from 'nextra-theme-docs' +import Video from '../../../../../shared-components/Video' + +# Embedding + +## What is an Embed? + +An embed enables you to include a running sandbox in your documentation, blog post, or +website. + +Embeds are now supported as a beta feature for Devboxes. There are a few distinctions between Sandbox and Devbox embeds worth noting. Devboxes have more computing power because they run in VMs. They also support any programming language, not just JavaScript. That said, Devbox embeds are currently limited in terms of interactions compared to Sandboxes, as explained further below. + +### Embedding Devboxes + +Devbox embeds are a great solution if you want to show examples of applications that go beyond front-end JavaScript (namely, Python, Go, Rust and more). + +Unlike Sandbox embeds, which will use the resources of the viewer's machine to run, these embeds run in CodeSandbox microVMs. This allows them to run with optimal performance regardless of the viewer's device. + + +Embeds for Devboxes are currently in beta. + + +## Generate an Embed URL + +You can generate a URL to embed by clicking the `Share` button inside the editor of a Devbox and then clicking on 'Copy embed code'. + +This will give you HTML code with an iFrame that you can paste into your content. + +![Devbox Embed](../images/embed-cloud-sandbox.jpg) + + +MicroVM embeds are a feature of Devboxes. If you have an example from a repository you want to embed, you can import the repository as a [synced template](/learn/sandboxes/synced-templates), which allows you to access (and embed) the code as a Devbox. + + +## Example Embed + +Below is an example of the iFrame to embed a Rust sandbox: + +```html + +``` + +This code outputs the following embed: + + + +## Limitations +As Devbox embeds are in beta, some more advanced options are currently unavailable. + +Notably, the embed viewer cannot make changes to the sandbox before forking it, so inline editing is not currently supported on these embeds. + +Additionally, Devbox embeds still lack some of the customization options that are available in browser sandbox embeds. diff --git a/packages/projects-docs/pages/learn/repositories/interactive-readme.mdx b/packages/projects-docs/pages/learn/devboxes/interactive-readme.mdx similarity index 100% rename from packages/projects-docs/pages/learn/repositories/interactive-readme.mdx rename to packages/projects-docs/pages/learn/devboxes/interactive-readme.mdx diff --git a/packages/projects-docs/pages/learn/devboxes/overview.mdx b/packages/projects-docs/pages/learn/devboxes/overview.mdx new file mode 100644 index 00000000..a446719c --- /dev/null +++ b/packages/projects-docs/pages/learn/devboxes/overview.mdx @@ -0,0 +1,64 @@ +--- +title: Devboxes +description: Learn about the differences between Devboxes and Sandboxes. +--- + +import { Tabs, WrapContent } from '../../../../../shared-components/Tabs' +import { Callout } from 'nextra-theme-docs' + +# CodeSandbox Devboxes + +CodeSandbox provides two development environments that are ideal for prototyping and rapid web development: [Devboxes](/learn/devboxes/overview) (which run in a microVM) and [Sandboxes](/learn/sandboxes/templates) (which run using browser resources). + +We generally recommend using Devboxes, which provide all the tooling needed for building prototypes. Sandboxes are mostly useful as a playground for basic front-end JavaScript projects. + +Previously known as Cloud Sandboxes, Devboxes are a great way to work on any type of project, regardless of its language or size. Devboxes run [microVMs](/learn/environment/vm) and leverage our memory snapshotting to spin up an environment in 1.5 seconds. They have built-in [Docker support](/learn/environment/docker) and include several valuable features, such as [AI](/learn/ai/overview), collaborative [Terminals](/learn/repositories/terminal), [Tasks](/learn/repositories/task), and [VS Code integration](/learn/getting-started/setting-up-vscode). + + +Devboxes are built for scale. Our Free plan includes generous VM specs but you can easily [start a Pro trial](https://codesandbox.io/pro) to improve them. + + +## Creating a Devbox +To create a new Devbox, you can clone a template from our ["Create Devbox"](https://codesandbox.io/s) modal. When clicking on a template, we create a fork (a copy) of the template and open the newly created sandbox in our web editor. + +## Difference between Devboxes & Sandboxes + + + +## What is a Devbox? +Unlike Sandboxes that run on your browser, Devboxes run on our [microVMs](/learn/environment/vm). + + Devboxes are great for prototyping any type of project in any programming language. They can run both backend and front-end services. + You can learn more about the editor and the unique functionalities of the cloud developer environment in [Repositories](/learn/repositories/overview). + + Like Sandboxes, Devboxes are free to use. + + Devboxes run on microVMs, which brings two features that make them great for prototyping: + + 1. Fast cloning. You can fork Devbox [within 2 seconds](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds) and continue with an exact clone of the microVM. This way, you can quickly test multiple approaches to your prototype. + 2. Instant resume. When you connect to a Devbox, it will wake up within 1 second and continue with your running dev server. This way, you can quickly continue prototyping. + + Devboxes and Repositories branches run on the same infrastructure and use the same editor. The main distinction is that Repositories have more features suited to full-scale development. Once you create a Repository from a Devbox you will have: + - Branching + - Git tooling + - Full integration with GitHub + + To configure a Devbox, you can read more about [tasks](https://codesandbox.io/docs/learn/repositories/task) and [Docker](https://codesandbox.io/docs/learn/environment/docker). + + + ## What is a Sandbox? + When using Sandboxes, your code is evaluated and run in our built-in +execution environment. These client environments run entirely inside of your browser and will continue to +bundle your code even when you lose your connection to our servers. + +Sandboxes each have their own bundler attached to them which is +configured to support a specific framework and emulate their official CLI tools. +They are not one-to-one implementations and thus do not support advanced +configuration like custom webpack configurations or ejecting. However, they are +designed to mirror the default behavior of the framework. + +If your project requires the use of a terminal or any additional advanced configuration like Docker, you can use a [Devbox](/learn/sandboxes/overview?tab=cloud) instead. + + + + \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/repositories/preview.mdx b/packages/projects-docs/pages/learn/devboxes/preview.mdx similarity index 100% rename from packages/projects-docs/pages/learn/repositories/preview.mdx rename to packages/projects-docs/pages/learn/devboxes/preview.mdx diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/secrets.mdx b/packages/projects-docs/pages/learn/devboxes/secrets.mdx similarity index 90% rename from packages/projects-docs/pages/learn/browser-sandboxes/secrets.mdx rename to packages/projects-docs/pages/learn/devboxes/secrets.mdx index 1ca47099..48a5f049 100644 --- a/packages/projects-docs/pages/learn/browser-sandboxes/secrets.mdx +++ b/packages/projects-docs/pages/learn/devboxes/secrets.mdx @@ -20,7 +20,7 @@ They're implemented in CodeSandbox using environment variables. When it comes to browser sandboxes, secrets are not transferred between forks and **can only be used in container browser sandboxes**. - We're phasing out container sandboxes for cloud sandboxes. We recommend that you read the [documentation](/learn/environment/secrets) on how to apply secrets to cloud sandboxes. + We're phasing out container sandboxes for Devboxes. We recommend that you read the [documentation](/learn/environment/secrets) on how to apply secrets to Devboxes. ## Adding secrets diff --git a/packages/projects-docs/pages/learn/sandboxes/synced-templates.mdx b/packages/projects-docs/pages/learn/devboxes/synced-templates.mdx similarity index 92% rename from packages/projects-docs/pages/learn/sandboxes/synced-templates.mdx rename to packages/projects-docs/pages/learn/devboxes/synced-templates.mdx index 83c95678..9e35c98a 100644 --- a/packages/projects-docs/pages/learn/sandboxes/synced-templates.mdx +++ b/packages/projects-docs/pages/learn/devboxes/synced-templates.mdx @@ -81,7 +81,7 @@ After you've created this file, and opened the synced template at least once, yo ## VM behaviour of synced templates -For our [cloud sandboxes](https://codesandbox.io/docs/learn/sandboxes/overview?tab=cloud), we run your sandbox in a microVM. We try to automatically detect from your repository contents whether your project is more suited for a cloud sandbox than a browser sandbox. To force the template to load as a cloud sandbox, you can create a `.codesandbox/Dockerfile` file in your repository. This file should contain a valid Dockerfile that we'll use to build your cloud sandbox. +For our [Devboxes](https://codesandbox.io/docs/learn/sandboxes/overview?tab=cloud), we run your sandbox in a microVM. We try to automatically detect from your repository contents whether your project is more suited for a Devbox than a browser sandbox. To force the template to load as a Devbox, you can create a `.codesandbox/Dockerfile` file in your repository. This file should contain a valid Dockerfile that we'll use to build your Devbox. We use memory snapshotting to resume a VM quickly when someone visits it. To ensure that visitors of your sandbox will always get the latest contents of your GitHub repository, we base the memory snapshot on the latest commit of your repository or folder. diff --git a/packages/projects-docs/pages/learn/repositories/task.mdx b/packages/projects-docs/pages/learn/devboxes/task.mdx similarity index 100% rename from packages/projects-docs/pages/learn/repositories/task.mdx rename to packages/projects-docs/pages/learn/devboxes/task.mdx diff --git a/packages/projects-docs/pages/learn/devboxes/templates.mdx b/packages/projects-docs/pages/learn/devboxes/templates.mdx new file mode 100644 index 00000000..aacc9c93 --- /dev/null +++ b/packages/projects-docs/pages/learn/devboxes/templates.mdx @@ -0,0 +1,84 @@ +--- +title: Templates +authors: ['Saeris'] +description: Use templates to kickstart new projects with no setup. +--- + +# Templates + +## What are Templates? + +Templates are starting points for Devboxes and Sandboxes. When you pick a template, you create a fork of the original project. Forked templates are already set up with the +configuration, file structure, and dependencies installed, so you don't have to +spend time doing this each time you begin working on something new. They +are easily accessible from your dashboard and the "Create" modal. + +CodeSandbox offers several official templates for several different programming languages. You can find templates in the ["Create" modal](https://codesandbox.io/s). + +You can also create your own custom templates. Turn any Sandbox and Devbox into a template +that's customized for your particular use-case and preferences. Once a custom +template has been created, you can then start new projects from the "Create" modal using one of your templates. Custom templates can also be added +to workspaces, so workspace members can make use of them. + +## How to make a custom template + +There are a few ways to create a template, but the main way is from within the +"Sandbox Info" panel inside the editor. When viewing one of your sandboxes, +you'll see a button at the bottom of the "Sandbox Info" panel that says +`Save as template`. Clicking this will convert the sandbox to a template, which +will freeze it and make it available from the "Create" modal. + +![Make Template from Sandbox](../images/template-1.jpg) + +Optionally, from the dashboard, you can either drag and drop a sandbox from +"Overview" or one of your folders under "My Sandboxes" to the new "My Templates" +folder. There is also an option within the sandbox options menu to +`Make Sandbox a Template`. + +import Image from 'next/image' +import gif1 from '../images/template-2.gif' +import gif2 from '../images/template-3.gif' + +
+ +
+
+ + +## Using Templates + +After you've made your first custom template, there's a few places from which +you can access and use them. First, inside of the "Create New Sandbox" modal, +you will see a list of your templates under `My Templates`. Clicking on one of +these will fork the template and open it in the editor. + +![Sandbox Modal](../images/template-4.jpg) + +You can also find all of your templates under the `Templates` folder within the +Dashboard. Clicking on any of the templates shown inside this folder will open +it in the editor. + +## Editing Templates + +Templates are frozen upon creation, preventing you from accidentally making +changes to it. In order to make changes to a template, unfreeze it from the +"Sandbox Info" panel. Any time you try to make a change to a frozen template, a +modal will prompt you to fork the template or unfreeze it for the current +session. + +Any changes you make to an unfrozen Template are saved immediately. You don't +need to freeze it again as it is automatically frozen again when you navigate +away from the editor or finish the current sandbox session. + +## Deleting Templates + +There are a few ways in which you can "delete" a template. From the "Sandbox +Info" panel inside the editor, there is a `Delete Template` button at the bottom +when viewing an existing template. Clicking this will convert the template back +to a regular sandbox, removing it from the "Create New Sandbox" modal and moving +back to the "Overview" and "My Sandboxes" folders inside the dashboard. + +Alternatively, you can use a template's options menu inside the "My Templates" +folder to select `Convert to Sandbox`. + +![Delete template from dashboard](../images/template-6.jpg) diff --git a/packages/projects-docs/pages/learn/repositories/terminal.mdx b/packages/projects-docs/pages/learn/devboxes/terminal.mdx similarity index 100% rename from packages/projects-docs/pages/learn/repositories/terminal.mdx rename to packages/projects-docs/pages/learn/devboxes/terminal.mdx diff --git a/packages/projects-docs/pages/learn/repositories/upload.mdx b/packages/projects-docs/pages/learn/devboxes/upload.mdx similarity index 100% rename from packages/projects-docs/pages/learn/repositories/upload.mdx rename to packages/projects-docs/pages/learn/devboxes/upload.mdx diff --git a/packages/projects-docs/pages/learn/devboxes/your-first-sandbox.mdx b/packages/projects-docs/pages/learn/devboxes/your-first-sandbox.mdx new file mode 100644 index 00000000..da682079 --- /dev/null +++ b/packages/projects-docs/pages/learn/devboxes/your-first-sandbox.mdx @@ -0,0 +1,41 @@ +--- +title: Set up your first Devbox +description: Learn how to take your first steps with CodeSandbox Devboxes. +--- + +import { Callout } from 'nextra-theme-docs' + +# Getting Started with Devboxes + +CodeSandbox provides two development environments that are ideal for prototyping and rapid web development: [Devboxes](/learn/devboxes/overview) (which run in a microVM) and [Sandboxes](/learn/sandboxes/templates) (which run using browser resources). + +For the majority of cases, we recommend starting your project as a Devbox (previously known as "Cloud Sandbox"), as they provide a faster experience with several unique features, since they run in our microVM infrastructure. You can find more about the differences of these two experiences on the [Devboxes Docs](/learn/devboxes/overview?tab=devbox). + +This guide specifically focuses on Devboxes. + +## Creating a Devbox + +One of the best things about our Devboxes is that there are dozens of official templates you can use to start coding. + +To get started, [open the `Create` Modal](https://codesandbox.io/s/) and search through our selection of Devbox Templates. You can recognize a Devbox by the special _Devbox_ badge. + +![new modal](../images/dashboard-devbox-modal.png) + +The **`Create`** modal shows you collections of templates you can use as a base for your project. By default, "Featured templates" are shown first, a list that includes both the templates most recently used in your workspace and some of our most popular Devbox templates. You can also navigate the other tabs on the left of the modal for different collections of templates, or use the search at the top left. + +Templates are automatically forked when you select them, so you can edit +and begin creating your own sandbox. + +## Growing a Devbox into a Repository + +When your prototype grows into a full project, you may want to add version control through git, to make updates and collaboration easier to manage. + +CodeSandbox is specifically built to enable you to grow your project as big as you need. + +You can scale your Devbox into a Repository by navigating to the git menu on the left sidebar and clicking _Create Repository_. + +![Scaling a sandbox into a repository](../images/convert-sandbox-to-repo.jpg) + +## Programmatically creating Devboxes + +If you want to use our API to create Devboxes, refer to our [Define API](/learn/sandboxes/cli-api#define-api) documentation and be sure to add an additional `environment: "server"` parameter to the request body. \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/editors/ios/setting-up-ios.mdx b/packages/projects-docs/pages/learn/editors/ios/setting-up-ios.mdx index a738ee06..fe9d877b 100644 --- a/packages/projects-docs/pages/learn/editors/ios/setting-up-ios.mdx +++ b/packages/projects-docs/pages/learn/editors/ios/setting-up-ios.mdx @@ -51,4 +51,4 @@ CodeSandbox will automatically create a fork in GitHub for repositories to which With CodeSandbox for iOS, you can also create small Node.js prototypes locally. This is a useful feature when you're developing on your iOS device and don't have internet access. However, the functionality of these local sandboxes is limited due to restrictions imposed by the iOS operating system on applications available from the App Store. -For instance, local sandboxes are restricted to Node.js version 12, and any framework that relies on JIT compilation or WebAssembly won't work. In this case, we suggest you use CodeSandbox Cloud Sandboxes if possible. +For instance, local sandboxes are restricted to Node.js version 12, and any framework that relies on JIT compilation or WebAssembly won't work. In this case, we suggest you use CodeSandbox Devboxes if possible. diff --git a/packages/projects-docs/pages/learn/editors/overview.mdx b/packages/projects-docs/pages/learn/editors/overview.mdx index 7fded89d..bbfc864b 100644 --- a/packages/projects-docs/pages/learn/editors/overview.mdx +++ b/packages/projects-docs/pages/learn/editors/overview.mdx @@ -26,9 +26,9 @@ Known and loved for years, this editor was built for rapid web development using ## Easily move between web and VS Code -Any project running in a cloud web editor may also be run in VS Code. Work from your local environment with your own configurations and shortcuts whilst remaining connected to the CodeSandbox development environment. +Any project running in a Devbox may also be run in VS Code. Work from your local environment with your own configurations and shortcuts whilst remaining connected to the CodeSandbox development environment. -**Install the CodeSandbox Projects VS Code extension and open any branch or cloud sandbox directly in your VS Code editor.** +**Install the CodeSandbox VS Code extension and open any branch or Devbox directly in your VS Code editor.** [Install VS Code Extension](https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects) diff --git a/packages/projects-docs/pages/learn/environment/branch-protection.mdx b/packages/projects-docs/pages/learn/environment/branch-protection.mdx index 0e31d536..4d0ce6eb 100644 --- a/packages/projects-docs/pages/learn/environment/branch-protection.mdx +++ b/packages/projects-docs/pages/learn/environment/branch-protection.mdx @@ -6,7 +6,7 @@ import { Callout } from 'nextra-theme-docs' # Branch Protection -You can toggle the branch protection status for your projects in CodeSandbox. This works for both cloud sandboxes and repositories. +You can toggle the branch protection status for your projects in CodeSandbox. This works for both Devboxes and repositories. ![Toggle setting](../images/toggle.png) diff --git a/packages/projects-docs/pages/learn/environment/secrets.mdx b/packages/projects-docs/pages/learn/environment/secrets.mdx index 49239b12..c0dacfbb 100644 --- a/packages/projects-docs/pages/learn/environment/secrets.mdx +++ b/packages/projects-docs/pages/learn/environment/secrets.mdx @@ -10,7 +10,7 @@ import Video from '../../../../../shared-components/Video' You can configure environment variables and secrets in your project, such as settings for your project or access tokens for APIs. -This works both for cloud sandboxes and repositories. +This works both for Devboxes and repositories. ![CodeSandbox Environment Variables](../images/env-var.png) @@ -18,9 +18,9 @@ This works both for cloud sandboxes and repositories. Secrets and environment variables are shared across all branches, but you need to restart your VM instance after making changes for them to take effect. -### Cloud Sandbox Configuration +### Devbox Configuration -When setting environment variables for cloud sandboxes, we ensure that any fork of this sandbox will not include these environment variables. Because of this, forks will be a bit slower, as we cannot clone the memory snapshot. +When setting environment variables for Devboxes, we ensure that any fork of this sandbox will not include these environment variables. Because of this, forks will be a bit slower, as we cannot clone the memory snapshot. ### Storage and Encryption diff --git a/packages/projects-docs/pages/learn/environment/vm.mdx b/packages/projects-docs/pages/learn/environment/vm.mdx index 010c5605..fa6fa515 100644 --- a/packages/projects-docs/pages/learn/environment/vm.mdx +++ b/packages/projects-docs/pages/learn/environment/vm.mdx @@ -7,7 +7,7 @@ import { Callout } from 'nextra-theme-docs' # Environment -CodeSandbox Repositories and Cloud Sandboxes run on [microVM technology](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds). Each branch and cloud sandbox gets its own microVM and their resources (shown below) are set to each one of these instances. +CodeSandbox Repositories and Devboxes run on [microVM technology](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds). Each branch and Devbox gets its own microVM and their resources (shown below) are set to each one of these instances. ## Default resources diff --git a/packages/projects-docs/pages/learn/images/codeium-example.png b/packages/projects-docs/pages/learn/images/codeium-example.png new file mode 100644 index 00000000..5dd7a29f Binary files /dev/null and b/packages/projects-docs/pages/learn/images/codeium-example.png differ diff --git a/packages/projects-docs/pages/learn/images/dashboard-create.png b/packages/projects-docs/pages/learn/images/dashboard-create.png new file mode 100644 index 00000000..45e04714 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/dashboard-create.png differ diff --git a/packages/projects-docs/pages/learn/images/dashboard-devbox-modal.png b/packages/projects-docs/pages/learn/images/dashboard-devbox-modal.png new file mode 100644 index 00000000..7a1e2ad2 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/dashboard-devbox-modal.png differ diff --git a/packages/projects-docs/pages/learn/images/dashboard-import-repo.png b/packages/projects-docs/pages/learn/images/dashboard-import-repo.png new file mode 100644 index 00000000..a2d1d357 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/dashboard-import-repo.png differ diff --git a/packages/projects-docs/pages/learn/images/dashboard-import-template.png b/packages/projects-docs/pages/learn/images/dashboard-import-template.png new file mode 100644 index 00000000..78131fa3 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/dashboard-import-template.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-beta-preferences.png b/packages/projects-docs/pages/learn/images/sandbox-beta-preferences.png new file mode 100644 index 00000000..ef12864c Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-beta-preferences.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-console.png b/packages/projects-docs/pages/learn/images/sandbox-console.png new file mode 100644 index 00000000..bb1707d3 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-console.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-dependency-picker.png b/packages/projects-docs/pages/learn/images/sandbox-dependency-picker.png new file mode 100644 index 00000000..0caa4752 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-dependency-picker.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-editor.png b/packages/projects-docs/pages/learn/images/sandbox-editor.png new file mode 100644 index 00000000..9c5219ba Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-editor.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-embed.png b/packages/projects-docs/pages/learn/images/sandbox-embed.png new file mode 100644 index 00000000..2ad49f42 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-embed.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-modal.png b/packages/projects-docs/pages/learn/images/sandbox-modal.png new file mode 100644 index 00000000..d62f0c93 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-modal.png differ diff --git a/packages/projects-docs/pages/learn/images/sandbox-terminal-upgrade.png b/packages/projects-docs/pages/learn/images/sandbox-terminal-upgrade.png new file mode 100644 index 00000000..104e7f37 Binary files /dev/null and b/packages/projects-docs/pages/learn/images/sandbox-terminal-upgrade.png differ diff --git a/packages/projects-docs/pages/learn/index.mdx b/packages/projects-docs/pages/learn/index.mdx index 9436f9e8..ab83ea8b 100644 --- a/packages/projects-docs/pages/learn/index.mdx +++ b/packages/projects-docs/pages/learn/index.mdx @@ -45,7 +45,7 @@ Known and loved for years, this editor was built for rapid web development using Any project running in a cloud web editor may also be run in VS Code. Work from your local environment with your own configurations and shortcuts whilst remaining connected to the CodeSandbox development environment. -**Install the CodeSandbox Projects VS Code extension and open any branch or cloud sandbox directly in your VS Code editor.** +**Install the CodeSandbox VS Code extension and open any branch or Devbox directly in your VS Code editor.** [Install VS Code Extension](https://marketplace.visualstudio.com/items?itemName=CodeSandbox-io.codesandbox-projects) diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/_meta.json b/packages/projects-docs/pages/learn/legacy-sandboxes/_meta.json similarity index 82% rename from packages/projects-docs/pages/learn/browser-sandboxes/_meta.json rename to packages/projects-docs/pages/learn/legacy-sandboxes/_meta.json index d5823a9f..a47b321b 100644 --- a/packages/projects-docs/pages/learn/browser-sandboxes/_meta.json +++ b/packages/projects-docs/pages/learn/legacy-sandboxes/_meta.json @@ -1,9 +1,9 @@ { + "overview": "Overview", "configuration": "Configuration", "deployment": "Deployment", "embedding": "Embedding", "secrets": "Secrets", "file-upload": "File Upload", - "live-sessions": "Live Sessions", "test": "Tests" } diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/configuration.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/configuration.mdx similarity index 100% rename from packages/projects-docs/pages/learn/browser-sandboxes/configuration.mdx rename to packages/projects-docs/pages/learn/legacy-sandboxes/configuration.mdx diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/deployment.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/deployment.mdx similarity index 100% rename from packages/projects-docs/pages/learn/browser-sandboxes/deployment.mdx rename to packages/projects-docs/pages/learn/legacy-sandboxes/deployment.mdx diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/embedding.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/embedding.mdx similarity index 100% rename from packages/projects-docs/pages/learn/browser-sandboxes/embedding.mdx rename to packages/projects-docs/pages/learn/legacy-sandboxes/embedding.mdx diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/file-upload.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/file-upload.mdx similarity index 100% rename from packages/projects-docs/pages/learn/browser-sandboxes/file-upload.mdx rename to packages/projects-docs/pages/learn/legacy-sandboxes/file-upload.mdx diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/live-sessions.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/live-sessions.mdx similarity index 100% rename from packages/projects-docs/pages/learn/browser-sandboxes/live-sessions.mdx rename to packages/projects-docs/pages/learn/legacy-sandboxes/live-sessions.mdx diff --git a/packages/projects-docs/pages/learn/legacy-sandboxes/overview.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/overview.mdx new file mode 100644 index 00000000..ea6baac4 --- /dev/null +++ b/packages/projects-docs/pages/learn/legacy-sandboxes/overview.mdx @@ -0,0 +1,12 @@ +--- +title: Overview +description: About legacy sandboxes +--- + +# Legacy Sandboxes + +As of Nov 20, 2023, the Sandbox editor was replaced with a new unified editor experience that blends seamlessly into the Devbox experience. Legacy sandboxes will be supported during the beta era of the new editor (until the end of 2023). + +If for any reason, you want to go back to the old editor, you may do so by turning off the "Beta editor" feature through your user settings. + +![user settings](../images/sandbox-beta-preferences.png) \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/browser-sandboxes/test.mdx b/packages/projects-docs/pages/learn/legacy-sandboxes/test.mdx similarity index 100% rename from packages/projects-docs/pages/learn/browser-sandboxes/test.mdx rename to packages/projects-docs/pages/learn/legacy-sandboxes/test.mdx diff --git a/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx b/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx index f53b77ac..33b83b28 100644 --- a/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx +++ b/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx @@ -10,9 +10,9 @@ At CodeSandbox, we believe that collaborating on code should be as easy as possi As we evolve our platform, we keep expanding how you can collaborate with others when coding. -## Repositories & Cloud Sandboxes +## Repositories & Devboxes -CodeSandbox Repositories was built to facilitate collaboration. +CodeSandbox Repositories and Devboxes were built to facilitate collaboration. Every branch you run on CodeSandbox gets its own live [development environment](/learn/environment/vm), which is fully collaborative by default. This means **you just have to share the URL of that branch to collaborate with others**. @@ -32,9 +32,9 @@ For more information on managing and creating teams, go to the [Team](/learn/tea Collaboration works on our VS Code extension and the CodeSandbox iOS App in a very similar fashion. Simply find the branch that you want to work on together, share the URL, and build together live. -### Cloud Sandboxes +### Devboxes -Collaborating on Cloud Sandboxes is almost identical to what we described above for Repositories. The main difference is the fact that Cloud Sandboxes are an isolated instance that's not connected to GitHub, so there's no concept of a "branch". +Collaborating on Devboxes is almost identical to what we described above for Repositories. The main difference is the fact that Devboxes are an isolated instance that's not connected to GitHub, so there's no concept of a "branch". diff --git a/packages/projects-docs/pages/learn/sandboxes/_meta.json b/packages/projects-docs/pages/learn/sandboxes/_meta.json index d52419a1..23b1bb49 100644 --- a/packages/projects-docs/pages/learn/sandboxes/_meta.json +++ b/packages/projects-docs/pages/learn/sandboxes/_meta.json @@ -1,13 +1,7 @@ { - "overview": "Overview", - "your-first-sandbox": "First-Time Setup", - "embedding": "Embedding", - "secrets": { - "title": "Secrets", - "href": "/learn/environment/secrets" - }, + "editor-features": "Editor Features", "templates": "Templates", - "synced-templates": "Synced Templates", - "cli-api": "Sandbox CLI & API", - "custom-npm-registry": "Custom NPM Registry" + "cli-api": "CLI & API", + "custom-npm-registry": "Custom NPM Registry", + "faq": "FAQ" } diff --git a/packages/projects-docs/pages/learn/sandboxes/cli-api.mdx b/packages/projects-docs/pages/learn/sandboxes/cli-api.mdx index 7ff042ab..8cb76fbc 100644 --- a/packages/projects-docs/pages/learn/sandboxes/cli-api.mdx +++ b/packages/projects-docs/pages/learn/sandboxes/cli-api.mdx @@ -1,12 +1,12 @@ --- -title: Create Sandboxes with the CLI & API +title: Sandboxes CLI & API authors: ['CompuIves'] description: Learn how to create sandboxes with the API and CLI --- # Create Sandboxes with the CLI & API -There are multiple ways to create sandboxes programmatically. In [Synced Templates](https://codesandbox.io/docs/learn/sandboxes/synced-templates) we describe how to create sandboxes from a GitHub repository or folder. This guide will show you how to create sandboxes using the CLI & API. +This guide will show you how to create sandboxes using the CLI & API. ## CodeSandbox CLI diff --git a/packages/projects-docs/pages/learn/sandboxes/custom-npm-registry.mdx b/packages/projects-docs/pages/learn/sandboxes/custom-npm-registry.mdx index b4cb7cd7..3c724755 100644 --- a/packages/projects-docs/pages/learn/sandboxes/custom-npm-registry.mdx +++ b/packages/projects-docs/pages/learn/sandboxes/custom-npm-registry.mdx @@ -1,5 +1,5 @@ --- -title: Using a Custom NPM Registry +title: Custom NPM Registry authors: ['CompuIves'] slug: /custom-npm-registry description: You can use your own private npm registry if you have Team Pro. diff --git a/packages/projects-docs/pages/learn/sandboxes/editor-features.mdx b/packages/projects-docs/pages/learn/sandboxes/editor-features.mdx new file mode 100644 index 00000000..dcafdc74 --- /dev/null +++ b/packages/projects-docs/pages/learn/sandboxes/editor-features.mdx @@ -0,0 +1,148 @@ +--- +title: Editor Features +authors: ['necoline'] +description: A walk-through of all the main editor features. +--- + +# Sandbox Features +Sandboxes still run on the browser to provide a lightweight experience for front-end code. + +In this new editor, we have carried forward the spirit of speed and simplicity that has powered the rapid sandbox development while preserving the same core features. Other favorite features like live sessions and new features like VS Code will only be available on Devboxes. + +## Previews +Previews in sandboxes appear automatically in your devtools and sync to the changes you make in the code. + +## Console +![sandbox dependency picker](../images/sandbox-dependency-picker.png) +A browser console is available for every preview. You can show or hide it by selecting the bug icon in the top right preview menu. + + +## Embeds + +### What is an Embed? + +An embed enables you to include a running sandbox in your documentation, blog post, or +website. + +Browser sandbox embeds can be achieved using an iFrame or with Embedly support, which works for platforms like Medium, Reddit, Trello, and Notion. You can customize the embed to show just the code, the preview, or both at the same time. + +## Generate an Embed URL + +You can generate a URL to embed by clicking 'Embed' in the header on the editor +and selecting the options you want to have enabled. + +![sandbox dependency picker](../images/sandbox-embed.png) + +## Embed on Medium + +You can easily embed on Medium by taking your sandbox URL (like +https://codesandbox.io/s/new) and pasting it in a Medium article. It should +automatically become an embed after you press enter. + +## Embed Options + +The options shown in the embed modal are not all options available. We need a +new UI for the share model to reflect these options, in the meantime you can +find them here. + +| Option | Description | Values | Default | +| ---------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ | +| `autoresize` | Automatically resize the embed to the content (only works on Medium). | `0`/`1` | `0` | +| `codemirror` | Use CodeMirror editor instead of Monaco (decreases embed size significantly). | `0`/`1` | `0` | +| `editorsize` | Size in percentage of editor. | number | `50` | +| `eslint` | Use eslint (increases embed size significantly). | `0`/`1` | `0` | +| `expanddevtools` | Start with the devtools (console) open. | `0`/`1` | `0` | +| `hidedevtools` | Hide the DevTools bar of the preview. | `0`/`1` | `0` | +| `fontsize` | Font size of editor | number (in px) | `14` | +| `forcerefresh` | Force a full refresh of frame after every edit. | `0`/`1` | `0` | +| `hidenavigation` | Hide the navigation bar of the preview. | `0`/`1` | `0` | +| `highlights` | Which lines to highlight (only works in CodeMirror) | comma separated list of line numbers | | +| `initialpath` | Which url to initially load in address bar | string | `/` | +| `module` | Which module to open by default. Multiple paths comma separated are allowed, in that case we show them as tabs | path to module (starting with `/`) | entry path | +| `moduleview` | Evaluate the file that is open in the editor. | `0`/`1` | `0` | +| `previewwindow` | Which preview window to open by default | `console`/`tests`/`browser` | `browser` | +| `runonclick` | Only load the preview when the user says so. | `0`/`1` | `0` | +| `view` | Which view to open by default | `editor`/`split`/`preview` | `split`, `preview` for small screens | +| `theme` | Which theme to show for the embed | `dark`/`light` | `dark` | + +## Example Embeds + +These are some examples of embeds, based on their properties. + +### Smallest Embed + +This embed is focused on being as light as possible: + +```md +https://codesandbox.io/embed/new?codemirror=1 +``` + +Use this code to embed: + +```html + +``` + +That will give to a result like this: +
+ + +### Code Example Embed + +You can also use CodeSandbox to show code examples, with highlighted lines. This +is only supported with the CodeMirror editor currently: + +```md +https://codesandbox.io/embed/new?codemirror=1&highlights=11,12,13,14 +``` + +Use this code to embed: + +```html + +``` + +That will give to a result like this: +
+ + +CodeSandbox has a separate application for the embed. This application is +specifically built to be as small as possible. If you replace `s` in the URL of +a sandbox to `embed` you have the embed version of the sandbox. Example: +https://codesandbox.io/s/new => https://codesandbox.io/embed/new. Notice that +the embed doesn't have all of the features of the full editor. + +## Dependency Picker +![sandbox dependency picker](../images/sandbox-dependency-picker.png) +Easily add, update and remove dependencies with this tool. + +## Convert to Devbox +Sandboxes and Devboxes were built with a progress development model in mind. Some ideas start out small and stay small while others grow in size, complexity or demand for more quality-of-life features for the developer. If you ever notice that your Sandbox code or your coding style are starting to outgrow the constraints of the Sandbox environment, you can easily convert the Sandbox to a Devbox. Now that Sandboxes and Devboxes work within the same editor, transitioning between the two should feel seamless. + +When working in a Sandbox, you may find yourself wishing for a terminal or aching for the familiarity of your own VS Code setup. By converting to a Devbox, you can gain access to these features in seconds without needing to adjust to a new editor. +![sandbox dependency picker](../images/sandbox-terminal-upgrade.png) + + diff --git a/packages/projects-docs/pages/learn/sandboxes/editors.mdx b/packages/projects-docs/pages/learn/sandboxes/editors.mdx deleted file mode 100644 index d4630f58..00000000 --- a/packages/projects-docs/pages/learn/sandboxes/editors.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Sandbox Editors -description: ---- - -import { Tabs, WrapContent } from '../../../../../shared-components/Tabs' -import { Callout } from 'nextra-theme-docs' -import Video from '../../../../../shared-components/Video' - - -# Sandbox Editors - -CodeSandbox offers two web editors and an iOS editor. A Sandbox is either a Browser Sandbox or a Cloud Sandbox. All Sandboxes are available on the iOS app. - - - -Cloud sandboxes run inside a Firecracker MicroVM and utilise memory snapshotting to ensure fast fork time and wake up time. They can run anything that you would be able to run in your local environment, including Docker containers. You can learn more about how they work in our [blog post](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds). - -Cloud sandboxes are best used to run backend services, compiled languages and things like databases. - -The Cloud Sandbox editor contains a set of features to increase the accessibility of complex tools like git, setup, review flows, contributions, and visualizing components. - - - - Browser sandboxes are sandboxes that fully run in the browser, and are made to run frontend JavaScript/TypeScript frameworks. If you would like to run backend services or databases, check Cloud Sandboxes. - - - \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/sandboxes/embedding.mdx b/packages/projects-docs/pages/learn/sandboxes/embedding.mdx deleted file mode 100644 index 9252a455..00000000 --- a/packages/projects-docs/pages/learn/sandboxes/embedding.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Embedding -authors: ['CompuIves'] -description: Embed a sandbox in docs, blog posts, Medium, and other websites. ---- - -import { Callout } from 'nextra-theme-docs' -import Video from '../../../../../shared-components/Video' - -# Embedding - -## What is an Embed? - -An embed enables you to include a running sandbox in your documentation, blog post, or -website. - -Embeds are now supported as a beta feature for cloud sandboxes. There are a few distinctions between browser and cloud sandbox embeds worth noting. Cloud sandboxes have more computing power because they run in VMs. They also support any programming language, not just JavaScript. That said, cloud sandbox embeds are currently limited in terms of interactions compared to browser sandboxes, as explained further below. - -### Embedding Cloud Sandboxes - -Cloud sandbox embeds are a great solution if you want to show examples of applications that go beyond front-end JavaScript (namely, Python, Go, Rust and more). - -Unlike browser sandbox embeds, which will use the resources of the viewer's machine to run, these embeds run in CodeSandbox microVMs. This allows them to run with optimal performance regardless of the viewer's device. - - -Embeds for cloud sandboxes are currently in beta. - - -## Generate an Embed URL - -You can generate a URL to embed by clicking the `Share` button inside the editor of a cloud sandbox and then clicking on 'Copy embed code'. - -This will give you HTML code with an iFrame that you can paste into your content. - -![Cloud Sandbox Embed](../images/embed-cloud-sandbox.jpg) - - -MicroVM embeds are a feature of cloud sandboxes. If you have an example from a repository you want to embed, you can import the repository as a [synced template](/learn/sandboxes/synced-templates), which allows you to access (and embed) the code as a cloud sandbox. - - -## Example Embed - -Below is an example of the iFrame to embed a Rust sandbox: - -```html - -``` - -This code outputs the following embed: - - - -## Limitations -As cloud sandbox embeds are in beta, some more advanced options are currently unavailable. - -Notably, the embed viewer cannot make changes to the sandbox before forking it, so inline editing is not currently supported on these embeds. - -Additionally, cloud sandbox embeds still lack some of the customization options that are available in browser sandbox embeds. diff --git a/packages/projects-docs/pages/learn/sandboxes/faq.mdx b/packages/projects-docs/pages/learn/sandboxes/faq.mdx new file mode 100644 index 00000000..6502e024 --- /dev/null +++ b/packages/projects-docs/pages/learn/sandboxes/faq.mdx @@ -0,0 +1,20 @@ +--- +title: FAQ +authors: ['necoline'] +description: Answers to frequently asked questions. +--- +# Frequently Asked Questions + +### Where can I find live sessions? +To use live sessions, you will need to convert your sandbox to a devbox. + +### What should I do if I need more space for file uploads? +Converting your sandbox to a devbox will provide you with more storage for your files. + +### How does the CLI work with binary files? +When you deploy a sandbox using the CLI we automatically detect the binary files +and upload them to the CodeSandbox Storage Management after getting +confirmation. + +### What happened to deployments? +Vercel deployments are still supported through CLI commands, but there is no longer an interface in sandboxes to support deployments. diff --git a/packages/projects-docs/pages/learn/sandboxes/overview.mdx b/packages/projects-docs/pages/learn/sandboxes/overview.mdx deleted file mode 100644 index cb72aaf1..00000000 --- a/packages/projects-docs/pages/learn/sandboxes/overview.mdx +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Sandboxes -description: Learn about the differences between cloud sandboxes and browser sandboxes. ---- - -import { Tabs, WrapContent } from '../../../../../shared-components/Tabs' -import { Callout } from 'nextra-theme-docs' - -# CodeSandbox Sandboxes - -Sandboxes are the ideal environment for rapid web development. CodeSandbox provides two types of sandboxes: cloud sandboxes (which run in a microVM) and browser sandboxes (which run using browser resources). - -To create a new sandbox, you can clone a template from our ["Create Sandbox"](https://codesandbox.io/s) modal. When clicking on a template, we create a fork (a copy) of the template and open the newly created sandbox in our web editor. - - -By default, we recommend using cloud sandboxes, which provide all the tooling needed for building prototypes. Browser sandboxes are mostly useful as a playground for basic front-end JavaScript projects. - - -## Difference between Cloud & Browser Sandboxes - - - -## What is a Cloud Sandbox? -Unlike Browser Sandboxes that run on your browser, Cloud Sandboxes run on our [microVMs](/learn/environment/vm). - - Cloud Sandboxes are great for prototyping any type of project. They can run both backend and front-end services. - You can learn more about the editor and the unique functionalities of the cloud developer environment in [Repositories](/learn/repositories/overview). - - Like Browser Sandboxes, Cloud Sandboxes are free to use. - - Cloud Sandboxes run on microVMs, which brings two features that make them great for prototyping: - - 1. Fast cloning. You can fork a sandbox [within 2 seconds](https://codesandbox.io/blog/how-we-clone-a-running-vm-in-2-seconds) and continue with an exact clone of the microVM. This way, you can quickly test multiple approaches to your prototype. - 2. Instant resume. When you connect to a Cloud Sandbox, it will wake up within 1 second and continue with your running dev server. This way, you can quickly continue prototyping. - - Cloud Sandboxes and Repositories run on the same infrastructure and use the same editor. The main distinction between the two is that Sandboxes are built for prototyping while Repositories are built for full-scale development. Once you scale a Sandbox to a Repository, you will have: - - Branching - - Git tooling - - Full integration with GitHub - - To configure a Cloud Sandbox, you can read more about [tasks](https://codesandbox.io/docs/learn/repositories/task) and [Docker](https://codesandbox.io/docs/learn/environment/docker). - - - ## What is a Browser Sandbox? - When using Browser Sandboxes, your code is evaluated and run in our built-in -execution environment. These client environments run entirely inside of your browser and will continue to -bundle your code even when you lose your connection to our servers. - -Browser Sandboxes each have their own bundler attached to them which is -configured to support a specific framework and emulate their official CLI tools. -They are not one-to-one implementations and thus do not support advanced -configuration like custom webpack configurations or ejecting. However, they are -designed to mirror the default behavior of the framework. - -If your project requires the use of a terminal or any additional advanced configuration like Docker, you can use a [Cloud Sandbox](/learn/sandboxes/overview?tab=cloud) instead. - - - - \ No newline at end of file diff --git a/packages/projects-docs/pages/learn/sandboxes/templates.mdx b/packages/projects-docs/pages/learn/sandboxes/templates.mdx index e15e6b1a..fd323f5b 100644 --- a/packages/projects-docs/pages/learn/sandboxes/templates.mdx +++ b/packages/projects-docs/pages/learn/sandboxes/templates.mdx @@ -1,85 +1,14 @@ --- title: Templates -authors: ['Saeris'] -description: Use templates to kickstart new projects with no setup. +authors: ['necoline'] +description: About sandbox templates. --- -# Templates +# Sandbox Templates -## What are Templates? +In the sandbox template modal, you will find the official list of sandbox templates along with any templates that have been created or imported within the workspace. -Templates are starting points for sandboxes. Sandboxes are forked from them. They're already set up with the -configuration, file structure, and dependencies installed, so you don't have to -spend time doing this each time you begin working on something new. Templates -are easily accessible from your dashboard and the "New" modal. +![sandbox templates](../images/sandbox-modal.png) +If you are unable to find the template you are looking for, check out the devbox templates. There are many more languages and frameworks that devboxes support. -CodeSandbox has a number of official templates, such as React, Vue, Angular, -Gatsby, and others that you can use to quickly start a new project. You can find templates in the "Create New Sandbox" modal [here](https://codesandbox.io/s). -You can also create your own custom templates. Turn any sandbox into a template -that's customized for your particular use-case and preferences. Once a custom -template has been created, you can then start new projects from the "New" modal using one of your templates. Custom templates can also be added -to teams, so team members can make use of them. - -## How to make a custom template - -There are a few ways to make a template, but the main way is from within the -"Sandbox Info" panel inside the editor. When viewing one of your sandboxes, -you'll see a button at the bottom of the "Sandbox Info" panel that says -`Save as template`. Clicking this will convert the sandbox to a template, which -will freeze it and make it available from the "Create New Sandbox" modal. - -![Make Template from Sandbox](../images/template-1.jpg) - -Optionally, from the dashboard, you can either drag and drop a sandbox from -"Overview" or one of your folders under "My Sandboxes" to the new "My Templates" -folder. There is also an option within the sandbox options menu to -`Make Sandbox a Template`. - -import Image from 'next/image' -import gif1 from '../images/template-2.gif' -import gif2 from '../images/template-3.gif' - -
- -
-
- - -## Using Templates - -After you've made your first custom template, there's a few places from which -you can access and use them. First, inside of the "Create New Sandbox" modal, -you will see a list of your templates under `My Templates`. Clicking on one of -these will fork the template and open it in the editor. - -![Sandbox Modal](../images/template-4.jpg) - -You can also find all of your templates under the `Templates` folder within the -Dashboard. Clicking on any of the templates shown inside this folder will open -it in the editor. - -## Editing Templates - -Templates are frozen upon creation, preventing you from accidentally making -changes to it. In order to make changes to a template, unfreeze it from the -"Sandbox Info" panel. Any time you try to make a change to a frozen template, a -modal will prompt you to fork the template or unfreeze it for the current -session. - -Any changes you make to an unfrozen Template are saved immediately. You don't -need to freeze it again as it is automatically frozen again when you navigate -away from the editor or finish the current sandbox session. - -## Deleting Templates - -There are a few ways in which you can "delete" a template. From the "Sandbox -Info" panel inside the editor, there is a `Delete Template` button at the bottom -when viewing an existing template. Clicking this will convert the template back -to a regular sandbox, removing it from the "Create New Sandbox" modal and moving -back to the "Overview" and "My Sandboxes" folders inside the dashboard. - -Alternatively, you can use a template's options menu inside the "My Templates" -folder to select `Convert to Sandbox`. - -![Delete template from dashboard](../images/template-6.jpg) diff --git a/packages/projects-docs/pages/learn/sandboxes/your-first-sandbox.mdx b/packages/projects-docs/pages/learn/sandboxes/your-first-sandbox.mdx deleted file mode 100644 index f323abad..00000000 --- a/packages/projects-docs/pages/learn/sandboxes/your-first-sandbox.mdx +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Set up your first sandbox -description: Learn how to take your first steps with CodeSandbox sandboxes. ---- - -import { Callout } from 'nextra-theme-docs' - -# Getting Started with Sandboxes - -Sandboxes are a great way to get working on your idea with zero startup costs. - -CodeSandbox provides both [Cloud Sandboxes](/learn/sandboxes/overview) (powered by microVMs, so they're more powerful) and [Browser Sandboxes](/learn/sandboxes/overview) (powered by your browser, so they are more limited). - -The most popular way of creating a new Sandbox is the 'New' modal. - -![new modal](../images/dashboard-new.jpg) - -The **`New`** modal shows you collections of templates grouped first by relevance and then by broad category. This list is not comprehensive of all the Sandboxes that have been made by the community, however. If you want to browse other Sandboxes and Templates, you can explore everything in through the discover button at the top right of the dashboard sidebar. - -All the cloud sandboxes have a cloud icon in the top-right corner of the card. - -Templates are automatically forked when you select them, so you can edit -and begin creating your own sandbox. - - -## Using Cloud Templates - -Cloud Sandboxes are an all-around great solution to help you prototype any app, regardless of the language you're using or the complexity of your project. - -They have built-in [Docker support](/learn/environment/docker) and include several valuable features, such as collaborative [Terminals](/learn/repositories/terminal), [Tasks](/learn/repositories/task), and [VS Code integration](/learn/getting-started/setting-up-vscode). - - -Cloud sandboxes are built for scale. Our Free plan includes generous VM specs but you can easily [start a Pro trial](https://codesandbox.io/pro) to improve them. - - -One of the best things about our Cloud Sandboxes is that there are dozens of official templates you can use to start coding. - -To get started, [open the `New` Modal](https://codesandbox.io/s/) and search through our selection of Cloud Sandbox Templates. You can recognize a Cloud Sandbox by the special _Cloud_ badge. - -Templates are automatically forked when you select them, so you can edit -and begin creating your own sandbox. - -
-![Cloud Sandbox Templates](../images/dashboard-cloud-template.jpg) - -## Growing a Cloud Sandbox into a Repository - -When your prototype grows into a full project, you may want to add version control through git, to make updates and collaboration easier to manage. - -CodeSandbox is specifically built to enable you to grow your project as big as you need. - -You can scale your Cloud Sandbox into a Repository by navigating to the git menu on the left sidebar and clicking _Create Repository_. - -![Scaling a sandbox into a repository](../images/convert-sandbox-to-repo.jpg) - -## Programmatically creating Cloud Sandboxes - -If you want to use our API to create Cloud Sandboxes, refer to our [Define API](/learn/sandboxes/cli-api#define-api) documentation and be sure to add an additional `environment: "server"` parameter to the request body. \ No newline at end of file diff --git a/packages/projects-docs/pages/tutorial/_meta.json b/packages/projects-docs/pages/tutorial/_meta.json index 9d1b0c04..efb2e2cd 100644 --- a/packages/projects-docs/pages/tutorial/_meta.json +++ b/packages/projects-docs/pages/tutorial/_meta.json @@ -1,7 +1,7 @@ { - "getting-started-with-dev-containers": "Getting Started with Dev Containers", - "cli-tool": "Install CLI Tools and Global Modules", - "getting-started-with-python": "Getting Started with Python", - "getting-started-with-php": "Getting Started with PHP", - "convert-browser-sandbox-cloud": "Convert browser sandbox into cloud sandbox" + "getting-started-with-dev-containers": "Getting started with Dev Containers", + "cli-tool": "Install CLI tools and global modules", + "getting-started-with-python": "Getting started with Python", + "getting-started-with-php": "Getting started with PHP", + "convert-browser-sandbox-cloud": "Convert Sandboxes into Devboxes" } diff --git a/packages/projects-docs/pages/tutorial/convert-browser-sandbox-cloud.mdx b/packages/projects-docs/pages/tutorial/convert-browser-sandbox-cloud.mdx index f7625ae0..90006190 100644 --- a/packages/projects-docs/pages/tutorial/convert-browser-sandbox-cloud.mdx +++ b/packages/projects-docs/pages/tutorial/convert-browser-sandbox-cloud.mdx @@ -1,29 +1,29 @@ --- -title: Convert a browser sandbox into a cloud sandbox -description: Learn how to quickly convert CodeSandbox browser sandboxes into the new, VM-powered cloud sandboxes. +title: Convert a Sandbox into a Devbox +description: Learn how to quickly convert CodeSandbox browser sandboxes into the new, VM-powered Devboxes. --- -# Convert a browser sandbox into a cloud sandbox +# Convert a Sandbox into a Devbox -CodeSandbox provides two different sandboxing environments you can use to quickly experiment with code, learn, prototype a project and share it with others: browser sandboxes and cloud sandboxes. +CodeSandbox provides two different sandboxing environments you can use to quickly experiment with code, learn, prototype a project and share it with others: sandboxes and devboxes. -Cloud sandboxes are part of our evolved CodeSandbox experience, so we now provide a way to easily convert existing browser sandboxes into this new experience. +Devboxes are part of our evolved CodeSandbox experience, so we now provide a way to easily convert existing browser sandboxes into this new experience. -## Why convert into a Cloud Sandbox? +## Why convert into a Devbox? Cloud and browser sandboxes are valuable tools for web development projects, but they have critical differences regarding their capabilities and limitations. [Browser sandboxes](/learn/sandboxes/editors?tab=browser), also known as client-side sandboxes, run directly within the user's web browser. Because they rely on browser features to provide environments for running code, they are lightweight and easy to use. Still, they do not provide the same level of scalability and isolation as virtualized environments since they rely heavily on the browser. -In contrast, [cloud sandboxes](/learn/sandboxes/editors?tab=cloud) use [microVMs](/learn/environment/vm) to provide an isolated and secure environment for running code. These microVMs are lightweight and optimized for running web applications, and they provide a more consistent and predictable environment for running code than browser sandboxes. +In contrast, [Devboxes](/learn/sandboxes/editors?tab=cloud) use [microVMs](/learn/environment/vm) to provide an isolated and secure environment for running code. These microVMs are lightweight and optimized for running web applications, and they provide a more consistent and predictable environment for running code than browser sandboxes. -As a result, cloud sandboxes get rid of several [limitations of browser sandboxes](/faq#are-there-any-limitations-with-sandboxes), while offering additional benefits when managing and scaling infrastructure. Namely, cloud sandboxes can be easily scaled up or down to accommodate project needs, offering more resource allocation and management flexibility. +As a result, Devboxes get rid of several [limitations of sandboxes](/faq#are-there-any-limitations-with-sandboxes), while offering additional benefits when managing and scaling infrastructure. Namely, Devboxes can be easily scaled up or down to accommodate project needs, offering more resource allocation and management flexibility. -Additionally, cloud sandboxes are collaborative by default, allowing for easier collaboration among team members, as developers can easily share their code and collaborate in real time. This sets CodeSandbox apart from other cloud development tools. +Additionally, Devboxes are collaborative by default, allowing for easier collaboration among team members, as developers can easily share their code and collaborate in real time. This sets CodeSandbox apart from other cloud development tools. ### Feature comparison -Besides the benefits presented above, there are some other noteworthy features that are only available in cloud sandboxes: +Besides the benefits presented above, there are some other noteworthy features that are only available in Devboxes: - built-in [Docker support](/learn/environment/docker) - support for any programming language (using Docker) - Boxy [AI assistant](/learn/boxy/overview) @@ -32,15 +32,15 @@ Besides the benefits presented above, there are some other noteworthy features t - element inspector - [tasks](/learn/repositories/task) -However, cloud sandboxes currently do not offer feature parity to browser sandboxes. The following browser sandboxes features are currently not available in cloud sandboxes: +However, Devboxes currently do not offer feature parity to Sandboxes. The following Sandboxes features are currently not available in Devboxes: - deployment menu - live sessions -## Convert into a cloud sandbox via URL +## Convert into a Devbox via URL -There are several ways to convert a browser sandbox into a Cloud Sandbox. The first is from the URL. +There are several ways to convert a Sandbox into a Devbox. The first is from the URL. -Usually, browser sandboxes start with `https://codesandbox.io/s/`. To convert into a cloud Sandbox, you can replace the prefix with `https://codesandbox.io/p/sandbox/`. This will automatically open up a cloud sandbox. +Usually, browser sandboxes start with `https://codesandbox.io/s/`. To convert into a devboxes, you can replace the prefix with `https://codesandbox.io/p/sandbox/`. This will automatically open up a Devbox. ## Convert from the browser sandbox UI @@ -48,7 +48,7 @@ There are a few prompts for converting a sandbox in the browser sandbox UI. ### Terminal tab -If you want to access the terminal in the browser sandbox UI, we suggest you convert it into a cloud sandbox since the experience is much better there. +If you want to access the terminal in the browser sandbox UI, we suggest you convert it into a Devbox since the experience is much better there. ![Convert from terminal](/convert-from-terminal.png) diff --git a/packages/projects-docs/pages/tutorial/getting-started-with-docker.mdx b/packages/projects-docs/pages/tutorial/getting-started-with-docker.mdx index 08e7fa08..bf7a47f4 100644 --- a/packages/projects-docs/pages/tutorial/getting-started-with-docker.mdx +++ b/packages/projects-docs/pages/tutorial/getting-started-with-docker.mdx @@ -7,7 +7,7 @@ import { Callout } from 'nextra-theme-docs' # Getting started with Docker -Docker is available for Cloud Sandboxes and Repositories. With Docker, you can get `root` access and install any package to use within CodeSandbox, including databases and new languages. +Docker is available for Devboxes and Repositories. With Docker, you can get `root` access and install any package to use within CodeSandbox, including databases and new languages. [Here](https://codesandbox.io/p/sandbox/docker-example-hsd8ke) you can find a sandbox that uses Docker. diff --git a/packages/projects-docs/pages/tutorial/getting-started-with-php.mdx b/packages/projects-docs/pages/tutorial/getting-started-with-php.mdx index 73da5842..b4853f5b 100644 --- a/packages/projects-docs/pages/tutorial/getting-started-with-php.mdx +++ b/packages/projects-docs/pages/tutorial/getting-started-with-php.mdx @@ -7,7 +7,7 @@ import { Callout } from 'nextra-theme-docs' # Getting Started with PHP -PHP is fully supported on Cloud Sandboxes and Repositories. It leverages [Docker](./getting-started-with-docker) to run a configurable PHP container, while also bringing LSP support through Intelephense, which includes auto-formatting, auto-linting and type definitions. +PHP is fully supported on Devboxes and Repositories. It leverages [Docker](./getting-started-with-docker) to run a configurable PHP container, while also bringing LSP support through Intelephense, which includes auto-formatting, auto-linting and type definitions. In this tutorial, we will showcase two different approaches you can use to get started with PHP in CodeSandbox: starting from a template or importing an existing PHP project. diff --git a/packages/projects-docs/pages/tutorial/getting-started-with-python.mdx b/packages/projects-docs/pages/tutorial/getting-started-with-python.mdx index b3d4b0b8..d98c2823 100644 --- a/packages/projects-docs/pages/tutorial/getting-started-with-python.mdx +++ b/packages/projects-docs/pages/tutorial/getting-started-with-python.mdx @@ -7,7 +7,7 @@ import { Callout } from 'nextra-theme-docs' # Getting Started with Python -Python is fully supported on Cloud Sandboxes and Repositories. It leverages [Docker](./getting-started-with-docker) to run a configurable Python container, while also bringing IntelliSense and support for Python package managers. +Python is fully supported on Devboxes and Repositories. It leverages [Docker](./getting-started-with-docker) to run a configurable Python container, while also bringing IntelliSense and support for Python package managers. In this tutorial, we will showcase two different approaches you can use to get started with Python in CodeSandbox: starting from a template or importing an existing Python project.