Using CodeSandbox in Developer Relations

It’s fun exploring new tools I can use in my developer evangelism work, but hard to find the time. My New Year's resolution is to try new things and share my thoughts to help other time strapped devrel professionals.

In this post, we’ll look at CodeSandbox whose tagline is “Quickly prototype ideas with code“.  What caught my eye was in their footer under use cases, they listed devrel.

What is CodeSandbox?

CodeSandbox is an online code editor that runs in your browser and can be used to build static, full stack web apps or components. CodeSandbox supports both JavaScript and Typescript and templates jumpstart your work with popular frameworks like React, Vuejs, Angular, Ember, NextJS, Node HTTP server and many more.

Getting Started

Create your account using your GitHub or Google login, too easy. Pick a template to start. I chose Node HTTP server since my work focuses on server-side code.  The interface is split into 3 main areas.  The left side is your files and dependencies, the middle is your editor and on the right a browser container that spins up in 15-20 seconds to display “hello world”.  Boom, how is that for a fast TTFHW (time to first hello world).

What about working with an existing codebase?

As a developer, I’m a bit lazy.  My next thought was how can I import existing code into CodeSandbox.  I clicked Create Sandbox and selected “import project”. There were two options. One is to paste a URL for a GitHub repository and the other is to import from Stackbit. I chose to import Xero’s node typescript starter project.

My code imported, dependencies were installed and the browser container spun up but no bueno. Instead of seeing a “connect to Xero” link, I got a 502 bad gateway.

What went wrong? Glancing at the terminal panel (did I mention a terminal is included) I saw my problem.

“Error: Environment Variables not all set - please check your .env file in the project root or create one!”

Initial I created an .env file in my sandbox per the README for this project.  This did get my code running but, I discovered a more secure way to manage my secrets in CodeSandbox.

Instead of using a .env file which would expose my keys to developers who forked my sandbox, I found you can set secret keys under the Server Control Panel. Once I set the 3 secrets, they were available as environment variables.

To double check, I shared my sandbox with my personal email address. After signing up with my personal gmail I could see the sandbox but needed to fork it to make any changes. Upon forking I got a notification that 3 secrets needed to be set and a button to the Server Control Panel. Very nice!

Also, remember any callback or redirectURIs should point to your CodeSandbox container and not localhost.  You can find the URL at the top of the browser container.

If you run into trouble, you have the option of restarting your server or sandbox from the Server Control Panel.

How can I share my awesome sandbox?

There are a few ways to share your sandboxes. You can invite individuals into your sandbox using their email or CodeSandbox username. You can grant them edit or view only permissions. Allowing you to collaborate live with other developers like Google Docs for code. They have a concept of workspaces for organizing teams around sandbox projects.

You can share a link to your sandbox. They even have one click sharing to twitter and DEV.to, and an “edit on CodeSandbox button” you can add to your website.

You have the option to generate an embed tag and customize it display the editor, preview or both. Embeds work on Medium and I’m sure most standard websites.  Here’s my sandbox embed below.

How can developer relations professionals use CodeSandbox?

The sharing and embedding of sandboxes described above are a good starting point. You could build interactive code into your documentation or blog posts. The “edit on CodeSandbox” would fit nicely on your GitHub README allowing developers to fork your sandbox no code download required.

To create a new sandbox developers choose a template. Typically it’s based on their  preferred JavaScript framework, but there are also community templates created by individuals. Anyone can create and share a template based on their sandbox in CodeSandbox search. DevRel folks can easily turn their sandbox into a template in a single click.

What about using CodeSandbox for hands-on workshops? In the past, I’ve found, one of the biggest challenges of workshops is installing and configuring software on a variety of laptop environments. While I don’t have personal experience using CodeSandbox for this use case, I am interested in trying this out in the future.

The COVID-19 pandemic had us pivot toward more online activities. My team at Xero conducted several webinars in 2020, but they were slides and code demonstrations. This post has me thinking "what about using CodeSandbox live during your webinar?"  It turns out there is a live classroom feature where you share a “live” url of your sandbox with attendees. Your team can code while attendees follow along and ask questions via chat. When the webinar is done attendees can fork your sandbox and keep playing with the code you’ve shared.

Final thoughts

A few features I didn’t mention is the ability to create a new Github repository for your sandbox and export your code to GitHub. You also have two options to deploy your sandbox to production.  You can use a one click option inside CodeSandbox for either Netlify or Vercel hosting platforms.

If you’ve used CodeSandbox in other interesting ways, let me know in the comments below and for full documentation go to https://codesandbox.io/docs