Sandbox environments for DevDot 🛝

[im2nguyen]

🔗 Relevant links

This PR creates a new DevDot feature called "sandboxes". This extends the existing hosted terminal sessions (Instruqt) functionality across all of DevDot (tutorials and documentation).

Sandboxes let users experiment with our tools while navigating through our documentation. These sandboxes persist when users navigate to a different documentation page.

When users land on a tutorial that has an interactive lab, it will load the tutorial's interactive lab. However, they can override this behavior by opening the sandbox in the dropdown. They can re-load the tutorials' interactive lab by clicking "show terminal".

We also track sandbox behavior:

1. sandbox_start: URL and lab_id where users open the sandbox
2. sandbox_opened: URL and lab_id where the sandbox is open
3. sandbox_closed: URL and lab_id where user close the sandbox

Of these sandbox metrics, sandbox_start sends the highest signal on "I want to test this", with sandbox_opened showing potential pages where the sandbox is still useful during the user's learning journey.

• Preview link 🔎
• Asana task 🎟️

🗒️ What

🤷 Why

🛠️ How

📸 Design Screenshots

🧪 Testing

💭 Anything else?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev-portal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 20, 2025 4:18pm

[github-actions]

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	198.57 KB (🟡 +3.7 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

New Page Added

The following page was added to the bundle from the code in this PR:

Page	Size (compressed)	First Load
/[productSlug]/sandbox	140.81 KB	339.39 KB

Fifty-seven Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/	135.65 KB (🟡 +2.21 KB)	334.23 KB
/404	119.67 KB (🟡 +2.36 KB)	318.25 KB
/500	119.67 KB (🟡 +2.36 KB)	318.25 KB
/[productSlug]/integrations	150.39 KB (🟡 +2.31 KB)	348.97 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]	173.61 KB (🟡 +2.27 KB)	372.19 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion]	173.61 KB (🟡 +2.27 KB)	372.19 KB
/[productSlug]/integrations/[organizationSlug]/[integrationSlug]/[integrationVersion]/components/[componentType]/[componentSlug]	179.54 KB (🟡 +2.27 KB)	378.11 KB
/[productSlug]/tutorials	149.54 KB (🟡 +2.31 KB)	348.11 KB
/[productSlug]/tutorials/[...tutorialSlug]	229.81 KB (🟡 +1.19 KB)	428.38 KB
/[productSlug]/tutorials/[collectionSlug]	195.48 KB (🟡 +2.29 KB)	394.06 KB
/_error	119.7 KB (🟡 +2.36 KB)	318.28 KB
/boundary	160.75 KB (🟡 +2.31 KB)	359.33 KB
/boundary/api-docs/[[...page]]	162.87 KB (🟡 +2.29 KB)	361.44 KB
/boundary/install	180.76 KB (🟡 +2.29 KB)	379.33 KB
/certifications	175.49 KB (🟡 +2.27 KB)	374.06 KB
/certifications/[slug]	176.14 KB (🟡 +2.27 KB)	374.71 KB
/consul	160.75 KB (🟡 +2.31 KB)	359.32 KB
/consul/install	174.25 KB (🟡 +2.29 KB)	372.82 KB
/consul/install/enterprise	174.28 KB (🟡 +2.29 KB)	372.86 KB
/hcp	160.75 KB (🟡 +2.31 KB)	359.32 KB
/hcp/api-docs/consul/[[...page]]	159.9 KB (🟡 +2.17 KB)	358.47 KB
/hcp/api-docs/identity/[[...page]]	159.9 KB (🟡 +2.17 KB)	358.47 KB
/hcp/api-docs/packer/[[...page]]	159.9 KB (🟡 +2.17 KB)	358.47 KB
/hcp/api-docs/vagrant-box-registry/[[...page]]	159.91 KB (🟡 +2.17 KB)	358.48 KB
/hcp/api-docs/vault-secrets/[[...page]]	158.61 KB (🟡 +2.25 KB)	357.18 KB
/hcp/api-docs/waypoint/[[...page]]	159.9 KB (🟡 +2.17 KB)	358.47 KB
/hcp/api-docs/webhook/[[...page]]	159.9 KB (🟡 +2.17 KB)	358.47 KB
/nomad	160.75 KB (🟡 +2.31 KB)	359.32 KB
/nomad/install	173.72 KB (🟡 +2.29 KB)	372.3 KB
/nomad/install/enterprise	173.71 KB (🟡 +2.29 KB)	372.28 KB
/open-api-docs-preview	163.85 KB (🟡 +2.01 KB)	362.42 KB
/open-api-docs-preview-v2/[[...page]]	163.26 KB (🟡 +2.4 KB)	361.83 KB
/packer	160.75 KB (🟡 +2.31 KB)	359.32 KB
/packer/install	173.7 KB (🟡 +2.29 KB)	372.27 KB
/profile/account	139.81 KB (🟡 +2.37 KB)	338.39 KB
/profile/bookmarks	140.81 KB (🟡 +2.37 KB)	339.38 KB
/sentinel	160.75 KB (🟡 +2.31 KB)	359.32 KB
/sentinel/install	173.7 KB (🟡 +2.29 KB)	372.28 KB
/terraform	160.75 KB (🟡 +2.31 KB)	359.33 KB
/terraform/install	173.7 KB (🟡 +2.29 KB)	372.28 KB
/tutorials	131.09 KB (🟡 +2.31 KB)	329.66 KB
/tutorials/library	152.62 KB (🟡 +2.32 KB)	351.19 KB
/vagrant	160.75 KB (🟡 +2.31 KB)	359.32 KB
/vagrant/install	174.21 KB (🟡 +2.29 KB)	372.78 KB
/vagrant/install/vmware	173.71 KB (🟡 +2.29 KB)	372.28 KB
/validated-designs	126.18 KB (🟡 +2.28 KB)	324.75 KB
/validated-designs/[...slug]	169.89 KB (🟡 +352 B)	368.46 KB
/validated-patterns	152.92 KB (🟡 +2.3 KB)	351.49 KB
/validated-patterns/[...tutorialSlug]	193.61 KB (🟡 +1.03 KB)	392.19 KB
/validated-patterns/[collectionSlug]	141.14 KB (🟡 +2.37 KB)	339.71 KB
/vault	160.75 KB (🟡 +2.31 KB)	359.32 KB
/vault/install	173.7 KB (🟡 +2.29 KB)	372.27 KB
/vault/install/enterprise	173.71 KB (🟡 +2.29 KB)	372.28 KB
/waypoint	160.75 KB (🟡 +2.31 KB)	359.32 KB
/well-architected-framework	152.93 KB (🟡 +2.3 KB)	351.51 KB
/well-architected-framework/[...tutorialSlug]	193.62 KB (🟡 +1.03 KB)	392.19 KB
/well-architected-framework/[collectionSlug]	141.14 KB (🟡 +2.37 KB)	339.72 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.