Running Anything on CodeSandbox

At CodeSandbox, we run your repository and turn it into a link you can share with anyone. People visiting this link can not only see your running code, but they can also click "fork" and get an exact copy of that environment within 2 seconds so they can easily contribute back or play with the code. Give it a try with this Next.js example or import your GitHub repo!

CodeSandbox started out as a code editor with only support for React. However, as we grew in size, we started adding other web development frameworks.

Recently, we released a major update: Docker support. With Docker support, you can virtually run anything on CodeSandbox. From a Go server to a C++ project!

In this post, we’ll go through some possible use cases of our Docker integration. We’ll share tips and tricks, together with some templates that show how you can use Docker with CodeSandbox.

Key Use Cases

Because we run Docker images, we can run anything. You can enable our Docker environment by creating a .codesandbox/Dockerfile file and entering the commands for Docker. There are some key things to remember for our Docker integration:

• We automatically forward ports, so you don’t have to add PORT 3000 statements.
• We automatically mount the workspace folder (of your sandbox or branch) in /workspace, so often there’s no need for ADD or COPY statements.
• We (currently) only support Docker images that are based on Debian or Ubuntu, because we install tooling on top of the image that assumes a Debian-based environment.

You can check our documentation for more details on how to use this integration. Let’s go through some examples to see how this works!

Running Deno

Because we can configure the environment, we can also install other runtimes! Deno is a popular runtime that we previously did not support. With Docker support, you can now run Deno projects on CodeSandbox.

A Dockerfile for Demo would look like this:

FROM denoland/deno:debian-1.34.0

This would be enough to get an environment that runs Deno! We’ve also created a template for it, which you can check here.

Running a Postgres DB

Since we can run Docker, we can also run other services that support Docker! We natively support docker-compose files. If you create a new file called .codesandbox/docker-compose.yml in your sandbox or branch, we’ll automatically run the services that are defined there.

This means that we can run databases, microservices and other server types. Here’s an example where we run a Next.js application that connects to a local Postgres database to show todo items:

This works because we have a docker-compose.yml file that defines a Postgres database.

From here, you can use CodeSandbox to automatically provision your Postgres or MySQL database for every PR, so you can test PRs without having to deploy to staging or run locally. We wrote about this use case in a previous blog post.

Installing Tooling

Thanks to Docker, you can also pre-install utilities in your environment that you want to make available for everyone. For example, if you want to have pnpm preinstalled, you can create a Dockerfile like so:

FROM node:18-bullseye
 
RUN npm i -g pnpm

This will preinstall pnpm in the environment. And because CodeSandbox cloud environments are collaborative by default, everyone you grant access to will also get pnpm pre-installed for them.

Cloudflare Workers

If you’re working with Cloudflare Workers, chances are you know about wrangler. wrangler is a CLI utility that makes it easier to develop for Cloudflare Workers on your own machine.

We have created a wrangler template where we run Cloudflare Workers inside CodeSandbox, and we’ve preinstalled all necessary dependencies in Dockerfile. You can see it running below!

Lots More to Unpack

The applications for running Docker in CodeSandbox are immense!

With this post, we barely scraped the surface of just how much you can run in CodeSandbox by leveraging this integration—but these are still some scenarios where you can get a lot of value on running your setup in our cloud infrastructure.

Whichever the case, using CodeSandbox will certainly save you a bunch of time in the setup process, bring those savings to everyone else using that environment, and give them an always-ready instance where they can do pair programming, develop new features, and do code reviews.

If you want to learn more about our Docker integration, check out our documentation. And if you have your eye on a specific template, let us know!