Introducing the CodeSandbox Storybook add-on

Bring every story to life.

Learn more
Blog chevron_right Engineering
Nov 20, 2023

How We Improved Our Workflows by Dogfooding Our Platform

Using cloud development to build a cloud development platform.

Alex Moldovan
Alex Moldovan
How We Improved Our Workflows by Dogfooding Our Platform

At CodeSandbox, we run your code in our cloud infrastructure, configure the environment for you and keep your code always ready, behind a shareable URL. Give it a try with this Next.js example or import your GitHub repo!

As an engineer, working at a tech product company comes with the privilege of understanding customers and being able to empathize with your users. Their struggles are most likely your struggles as well. And when you have the unique opportunity to empower them through your work, the reward is tenfold.

Even before I joined CodeSandbox back in 2020, I was fascinated with small and medium-sized team workflows and code collaboration. Engineering is never a solo effort. Working in a team, having other eyes on your code and bringing in non-engineering roles into the discussion are all vital for the success of the product.

The current state of code collaboration

Code collaboration happens around git, branches and pull requests. And while all of these are battle-proven and have their strengths, they also come with some drawbacks.

Git is great for storing and versioning code, but with no tooling around, it is still a pull-based mechanism for collaboration. It is your responsibility to check if the remote version of the repository has updates. Also, your local branch can get out of sync with the remote target branch whenever someone else pushes some changes.

Branches on top of the git model are a great way of separating code changes into different work streams. But local development forces you to point to a single branch. This can become a burden when working in a bigger team where constant review and integration are needed. Checking out a different branch can result in any number of errors: build or runtime crashes, invalid dependencies, and so on. It also adds the inconvenience of having to stash or commit your code to avoid losing changes.

Finally, pull/merge requests are the backbone of code reviews and work integration. Yet git providers offer only a static version of the code and require you to switch back and forth between the platform and the code environment / browser dev server. Unless you use plugins or integrations between your systems, code reviewing requires a switch of environment.

Enter cloud development

Over the past 2 years our team has been working on a new CodeSandbox experience, a cloud-based environment, readily available, sharable, and super friendly for collaboration and work integration.

And while it was still a beta product, we’ve been successfully using it for the past 18 months. Here’s how it helped us collaborate more and improve our workflows.

Each branch with a unique environment

Instead of having an environment for each user, we flipped the model to build the environments around branches. This facilitates collaboration, as branches are searchable and shareable via a URL. Now anyone can jump between environments without affecting their work in progress.

Changing branches

This model allows us to work on multiple features in parallel. It also allows us to collaborate on the same code changes async, without the fear of conflicts or outdated versions of the same branch.

Automated git flows

One of the most frustrating git experiences is to branch out from main and then hours later find out that you branched from an older commit. This can lead to git conflicts and can get you off track very fast as you have to focus on solving the git problem before your actual project work.

So we decided to optimize some common git flows. Whenever you branch out, we make sure you branch from the latest version of the remote branch. Our git integration also shows you when you need to pull the target branch because of new commits upstream. It also automatically pulls the remote branch in case someone else works on the same branch in another environment.

These flows are especially nice for distributed teams. I often leave my work in progress overnight and when I pick it up in the morning I immediately notice I’m behind the target branch.

UI showing a branch behind main

Reviews and comments in the code editor

Since the branch has its own environment, we are also supporting PR workflows in the same environment. Once a PR is created, the same branch link can be used to ask for code reviews. The PR diffs allow you to see the changes, add comments and submit a review summary. All this while running dev servers, tests or any other tasks. This lowers context switching and allows our team to easily flip between code reviews and development.

But also this helped other team members get involved in the review process. We often have colleagues from product, design or marketing getting involved in the PRs, as exemplified in the video below.

Showcase of some of our PR review features.

A new default

It’s interesting how developing the cloud development experience took us closer to using cloud development for work. It got to the point where most of our team members (including myself) have a hard time switching back to a local development.

I’m super excited about the prospect of more teams adopting cloud development. It might not be the right solution for everyone, but it definitely is a huge productivity booster for us. Also, using CodeSandbox to build CodeSandbox is an experience on its own, but that’s a story for another time ;)

To try this experience for yourself, import a repository into CodeSandbox. And if you're new to our platform, don't forget to follow our "Getting started" course.

Keep reading about Engineering .

Are CDEs Coming to Replace Local Development?
Engineering Feb 1, 2024

Are CDEs Coming to Replace Local Development?

Does it have to be cloud vs. local? Let's explore how CDEs will impact you as a software engineer.

The History of State Management at CodeSandbox
Engineering Dec 5, 2023

The History of State Management at CodeSandbox

A long, winding road from our Redux origins to our latest explorations using React and Impact.