Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft/product-reframing #209

Merged
merged 20 commits into from
Nov 22, 2023
Merged
Show file tree
Hide file tree
Changes from 19 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions packages/projects-docs/pages/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,24 @@ import { Callout } from 'nextra-theme-docs'
<WrapContent>
## 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_.

<Callout>
A [Pro subscription](https://codesandbox.io/pricing) is required to
make sandboxes private or unlisted.
</Callout>

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

Expand All @@ -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?
Expand All @@ -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?

Expand All @@ -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.
Expand All @@ -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?

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)).

Expand Down
12 changes: 6 additions & 6 deletions packages/projects-docs/pages/learn/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"overview": "Overview",
"boxy": "Boxy",
"codeium": "Codeium",
"getting-started": "Getting Started",
"faqs": "FAQs"
}
35 changes: 35 additions & 0 deletions packages/projects-docs/pages/learn/ai/codeium.mdx
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs an update, but I couldn't find the button anymore on stream.

Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
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 "Convert to Devbox" button at the top right of the Sandbox editor.




54 changes: 0 additions & 54 deletions packages/projects-docs/pages/learn/browser-vs-cloud-sbx.mdx

This file was deleted.

2 changes: 1 addition & 1 deletion packages/projects-docs/pages/learn/ci.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
11 changes: 11 additions & 0 deletions packages/projects-docs/pages/learn/devboxes/_meta.json
Original file line number Diff line number Diff line change
@@ -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"
}
28 changes: 28 additions & 0 deletions packages/projects-docs/pages/learn/devboxes/editors.mdx
Original file line number Diff line number Diff line change
@@ -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.

<Tabs tabs={["Devbox", "Sandbox"]}>
<WrapContent>
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.

</WrapContent>
<WrapContent>
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.

</WrapContent>
</Tabs>
Loading