codesandbox

How to create a Cloud Sandbox (not Browser Sandbox) on Codesandbox.io using the define API


We are dynamically creating browser sandboxes on codesandbox.io using the following code...

import { getParameters } from 'codesandbox/lib/api/define'
import type { IFiles } from 'codesandbox-import-utils/lib/api/define'

export const createChartSandbox = (chartTemplate: any) => {
  const files: IFiles = {}
  Object.keys(chartTemplate).forEach(filePath => {
    files[filePath] = {
      content: chartTemplate[filePath],
      isBinary: false
    }
  })
  const parameters = getParameters({ files })
  const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${encodeURIComponent(parameters)}&view=split`
  return url
}

This works today. But we'd like to skip the creation of a browser sandbox and go directly to the newer cloud sandbox (option is always displayed at the top to fork to the newer cloud sandbox). We see this as a more reliable environment for our samples.

Is it possible to pass a parameter to the define endpoint that would go straight to a cloud sandbox instead of a browser sandbox?


Solution

  • If you use the define endpoint to create a sandbox, it will open as a browser sandbox by default; however, it is possible to create the sandbox and get a sandbox_id. Using that sandbox_id, you can open a cloud sandbox.

    Add &json=1 to the end of the URL and a JSON will be returned:

    {
      "sandbox_id": "djfj033"
    }
    

    Then open this url with that sandbox_id https://codesandbox.io/p/sandbox/djfj033 to get a cloud sandbox.