diff --git a/packages/projects-docs/pages/learn/repositories/_meta.json b/packages/projects-docs/pages/learn/repositories/_meta.json index b820906c..8d7c8f7c 100644 --- a/packages/projects-docs/pages/learn/repositories/_meta.json +++ b/packages/projects-docs/pages/learn/repositories/_meta.json @@ -1,4 +1,5 @@ { + "migration-guide": "Migration Guide", "overview": "Overview", "getting-started": "Getting Started", "devtools": { diff --git a/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx b/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx index a6a5b615..6c548513 100644 --- a/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx +++ b/packages/projects-docs/pages/learn/repositories/collaborate-share.mdx @@ -3,8 +3,14 @@ title: Collaborate and Share description: --- +import { Callout } from 'nextra-theme-docs' + # Collaborate & Share + +**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces. + + At CodeSandbox, we believe that collaborating on code should be as easy as possible. As we evolve our platform, we keep expanding how you can collaborate with others when coding. diff --git a/packages/projects-docs/pages/learn/repositories/getting-started/repo-import.mdx b/packages/projects-docs/pages/learn/repositories/getting-started/repo-import.mdx index 97d8096e..7481387d 100644 --- a/packages/projects-docs/pages/learn/repositories/getting-started/repo-import.mdx +++ b/packages/projects-docs/pages/learn/repositories/getting-started/repo-import.mdx @@ -7,6 +7,10 @@ import { Callout } from 'nextra-theme-docs' # Import a repository + +**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces. + + If you haven't already imported a repository, you can do so by navigating to the [Recent page](https://codesandbox.io/dashboard/recent) in the dashboard and clicking `+ Repository`. If you have already granted GH OAuth permissions, you will see a list of GitHub organizations that you are a part of. diff --git a/packages/projects-docs/pages/learn/repositories/migration-guide.mdx b/packages/projects-docs/pages/learn/repositories/migration-guide.mdx new file mode 100644 index 00000000..8e1b8dd9 --- /dev/null +++ b/packages/projects-docs/pages/learn/repositories/migration-guide.mdx @@ -0,0 +1,140 @@ +--- +title: Migration Guide +description: How to migrate from CodeSandbox Repositories to GitHub Codespaces. +--- + +import { Callout } from 'nextra-theme-docs' + +# Migration guide: CodeSandbox Repos to GitHub Codespaces + + +CodeSandbox Repositories will no longer accept new imports starting **April 1, 2026**. Full support for repositories will end on **July 1, 2026**. We recommend migrating to GitHub Codespaces before these dates. + + +This guide walks you through moving your development workflow from CodeSandbox Repositories to GitHub Codespaces. The transition should take about 30 minutes for most projects. + +If you need help at any point, reach out to [support@codesandbox.io](mailto:support@codesandbox.io). + +## Vocabulary mapping + +Before you start, here's how CodeSandbox concepts translate to Codespaces. + +| CodeSandbox | Codespaces | Difference | +| --- | --- | --- | +| Sandbox | Codespace | A Sandbox is the branch. A Codespace is an instance of a branch. | +| Forking a Sandbox | Creating a branch | In Codespaces, you create a git branch first, then launch a container for it. | +| VM Snapshot | Prebuilds | CodeSandbox saves memory state. Codespaces pre-installs dependencies so you start fast. | +| `.codesandbox/tasks.json` | `.devcontainer/devcontainer.json` | CodeSandbox uses a dedicated tasks file. Codespaces uses `postCreateCommand` or `postAttachCommand`. | + +## Transitioning the "instant" workflow + +### What you're used to (CodeSandbox) + +In CodeSandbox Repositories, you visit the main branch and the VM is already running with your tasks (like `npm start`) pre-executed. If you want to make changes, you click "Branch," which clones the running VM state into a new branch and URL instantly. + +### The new way (GitHub Codespaces) + +**From the browser:** + +1. Navigate to your repo on GitHub. +2. Create a new branch. +3. Click **Code** and then **Create Codespace on [branch]** for the full VM. + +**From VS Code desktop:** + +1. Open VS Code locally. +2. Use the GitHub Codespaces extension to create or connect to environments directly. + +## Step-by-step: starting a feature + +### Step 1: Set up Prebuilds (Prerequisite) + +To replicate the "instant" feel of CodeSandbox where you don't wait for `npm install`, enable Prebuilds in your GitHub repo settings. This tells GitHub to run your setup scripts every time code is pushed, so the container is ready when you open it. + +1. Go to your repository on GitHub. +2. Navigate to **Settings** > **Codespaces**. +3. Under **Prebuild configuration**, click **Set up prebuild**. +4. Select the branch and region, then save. + +### Step 2: Create a branch and Codespace + +In CodeSandbox, you "Forked" to branch. In the new workflow: + +1. Go to the GitHub repository. +2. Create a new branch (e.g., `feat/new-ui`). +3. Click **Code** > **Codespaces** > **+**. + +### Step 3: Move tasks to `.devcontainer/devcontainer.json` + +Since you no longer have a `.codesandbox/tasks.json`, move those commands into the `.devcontainer/devcontainer.json` lifecycle hooks. + +**Where your commands go:** + +| CodeSandbox (`.codesandbox/tasks.json`) | Codespaces (`.devcontainer/devcontainer.json`) | +| --- | --- | +| `setupTasks` | `"postCreateCommand": "npm install"` | +| `runTasks` | `"postAttachCommand": "npm start"` | + +**Example `.devcontainer/devcontainer.json`:** + +```json +{ + "name": "My Project", + "image": "mcr.microsoft.com/devcontainers/javascript-node:20", + "postCreateCommand": "npm install", + "postAttachCommand": "npm start", + "forwardPorts": [3000] +} +``` + + +**Note:** Use `postAttachCommand` (not `postStartCommand`) for tasks that should run each time you connect to the Codespace. This ensures your dev server starts automatically when you open the environment. + + +Place this file at `.devcontainer/devcontainer.json` in your repository root. + +### Step 4: Connect from VS Code desktop + +The Codespaces extension is built into VS Code: + +1. Open VS Code locally. +2. Click the **Remote Explorer** icon (bottom-left green icon or sidebar). +3. Select **GitHub Codespaces**. +4. Your environment will be listed. Click to connect. + + +**Important:** A branch must already exist on GitHub before you can connect Codespaces to it. If you don't see your branch, create it first—either locally and push it to GitHub, or create it directly on GitHub. + + +## Key differences to know + +### Persistence + +In CodeSandbox, every change is "live." In Codespaces, your work is saved in the cloud VM, but you still need to **commit and push** for others to see changes in the repository. + +### Secrets and environment variables + +Move your sandbox environment variables to GitHub Codespaces Secrets: + +1. Go to GitHub **Settings** > **Codespaces** > **Secrets**. +2. Click **New secret**. +3. Add your key-value pairs and select which repositories can access them. + +### Collaboration + +CodeSandbox is "live" by default with real-time multiplayer. For Codespaces, use the **Live Share** extension within your Codespace to collaborate in real-time: + +1. Install the Live Share extension (it may already be included). +2. Click **Live Share** in the bottom status bar. +3. Share the generated link with collaborators. + +## Timeline + +| Date | What happens | +| --- | --- | +| **April 1, 2026** | New repository imports are disabled. Existing repositories continue to work. | +| **July 1, 2026** | Full support for CodeSandbox Repositories ends. | + +## Need help? + +If you run into issues during migration or have questions about your specific setup, contact us at [support@codesandbox.io](mailto:support@codesandbox.io). diff --git a/packages/projects-docs/pages/learn/repositories/open-source.mdx b/packages/projects-docs/pages/learn/repositories/open-source.mdx index 8f909694..d2393c15 100644 --- a/packages/projects-docs/pages/learn/repositories/open-source.mdx +++ b/packages/projects-docs/pages/learn/repositories/open-source.mdx @@ -7,6 +7,10 @@ import { Callout } from 'nextra-theme-docs' # Open Source Collaboration + +**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces. + + Working with your favorite open-source repositories is easier with CodeSandbox. Whether you are just checking out a repository, testing out an idea or formally proposing a feature, CodeSandbox can eliminate tedious steps in your process and get you working on your ideas faster. ## Viewing open-source repositories diff --git a/packages/projects-docs/pages/learn/repositories/overview.mdx b/packages/projects-docs/pages/learn/repositories/overview.mdx index ef7a07e4..3a706f85 100644 --- a/packages/projects-docs/pages/learn/repositories/overview.mdx +++ b/packages/projects-docs/pages/learn/repositories/overview.mdx @@ -8,6 +8,10 @@ import { Callout } from 'nextra-theme-docs' # CodeSandbox Repositories + +**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces. + + CodeSandbox allows you to instantly spin up a cloud development environment for any branch in your GitHub repository. It has a focus on speed and collaboration and allows you to create a workspace to be experienced by multiple people at the same time. ## Tailored for your project diff --git a/packages/projects-docs/pages/learn/repositories/review.mdx b/packages/projects-docs/pages/learn/repositories/review.mdx index 5336188a..9433f183 100644 --- a/packages/projects-docs/pages/learn/repositories/review.mdx +++ b/packages/projects-docs/pages/learn/repositories/review.mdx @@ -7,6 +7,10 @@ import { Callout } from 'nextra-theme-docs' # Using CodeSandbox for PR reviews + +**Deprecation notice:** CodeSandbox Repositories will no longer accept new imports starting April 1, 2026. Full support for repositories will end on July 1, 2026. Please review our [migration guide](/learn/repositories/migration-guide) to transition to GitHub Codespaces. + + PR Reviews are currently only available for GitHub repositories.