Kickstart Your Web App Development with CodeSandbox

By Jonathan Kemp

What if I told you...

you could open your browser and start coding full blown web applications?

CodeSandbox is an online editor that helps you create web applications, from initial prototype to deployment.

With just a few clicks...

  • Start a project with React, Vue, Angular, etc.
  • Preview it in the browser
  • All without touching command line tools
  • Or dealing with any config files

When you're done...

  • You can download your project
  • Export it to GitHub
  • Share it
  • Even deploy it

Features:

Search by package

One click install for new dependencies

Share code with a single link

Embedding

Hot Module Reloading

Linting with ESLint

TypeScript

UI for configuration files

Import, build, commit, deploy

How to get started:

Create Sandbox - https://codesandbox.io/s/

Import from GitHub

Upload from CLI

Import from GitHub

  1. Enter the URL to your GitHub repository to generate a URL to your sandbox
  2. The sandbox will stay in sync with your repository

Import from CLI

  1. Install the CLI 
    npm i -g codesandbox
  2. Go to your `create-react-app` project 
    cd path-of-your-project
  3. Deploy your project to CodeSandbox 
    codesandbox ./

Search by package

One click install for new dependencies

Static File Hosting

The development server will serve all files statically from the public folder, depending on the template.

Integrated DevTools

The preview window has integrated DevTools, like a console, test view and a problem viewer.

Externally Hosted Previews

You can open your sandbox preview with a separate URL, while still keeping Hot Module Reloading.

Autocompletion

Typings are automatically downloaded for every dependency, so you always have autocompletions.

TypeScript

TypeScript autocompletions and diagnostics for TS sandboxes.

Prettier

Code automatically gets prettified on save according to your own Prettier preferences.

ESLint

All code is linted automatically using latest version of ESLint, with full ES6 support.

Emmet.io

You can easily expand abbreviations with Emmet.io in all JS, HTML and CSS files.

React

Create React apps with no build configuration (create-react-app)

You don’t need to install or configure tools like Webpack or Babel

They are preconfigured and hidden so that you can focus on the code

What's included:

React, JSX, ES6, and Flow syntax support

Language extras beyond ES6 like the object spread operator

Autoprefixed CSS

A fast interactive unit test runner

A build script to bundle JS, CSS, and images for production

An offline-first service worker and a web app manifest

Hassle-free updates for the above tools with a single dependency

More information:

Vue

CLI for rapid Vue.js development

Sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations

Flexibility to tweak the config of each tool without the need for ejecting

What's included:

Webpack

Babel

Vuex/Vue Router

TypeScript

Progressive Web App support

ESLint

PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus

Unit Testing

E2E Testing

Vue Loader

vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs)

App.vue

webpack and vue-loader gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications

More information:

Angular

A command line interface for Angular

Follows the official best practices

Generate components, routes, services and pipes with a simple command

Easily preview your app locally while developing

Run your unit tests or your end-to-end tests with the breeze of a command

What's included?

Angular

Webpack??

TypeScript???

What's included:

Files and directories are created based on best-practices from the official Angular Style Guide

Webpack

npm dependencies are installed

TypeScript is configured for you

The Karma unit test runner is configured for you

The Protractor end-to-end test framework is configured for you

More information:

Vanilla

Parcel: Blazing fast, zero configuration web application bundler

Parcel

Blazing fast bundle times

Out of the box support for JS, CSS, HTML, file assets, and more - no plugins needed

Code is automatically transformed using Babel, PostCSS, and PostHTML when needed

Zero config code splitting

Automatically updates modules in the browser as you make changes during development, no configuration needed

What's included:

Bundler, similar to webpack, but with faster bundle times

Can take any type of file as an entry point

Development server built in

Automatically rebuild your app as you change files

Supports hot module replacement for fast development

More information:

And more!

Preact - Svelte - CxJS - Dojo 2

Pro Version

Live collaboration

Private sandboxes

Unlimited sandboxes

Static file hosting capped at 500Mb

Live Collaboration

Edit sandboxes together in real time, Google Docs style

Use Classroom Mode to control who can make edits

One of the primary purposes of CodeSandbox is as a teaching tool.

Lower the Learning Curve

With CodeSandbox you don't have to do anything to start programming

You don't have to set up a development environment

You don't have to install dependencies

Sandbox counterparts

create-react-app

npx create-react-app my-app

cd my-app

npm start

vue-cli

npm install -g @vue/cli

vue create my-project

cd my-project

npm start

angular-cli

npm install -g @angular/cli

ng new my-project

cd my-project

ng serve

parcel

npm install -g parcel-bundler

npm init -y

parcel index.html

You can download your project

Export it to GitHub

Share it

Deploy with ZEIT Now

Integrate ZEIT Now with sandboxes

Deploy a production-ready version of your application using the magic of Now

Build applications on CodeSandbox from start to finish

What’s Now?

Now allows you to deploy and publish any kind of web application, website or services to the cloud with ease, speed and reliability.

Getting Started:

The best way to get started with Now on your device is Now Desktop, a minimal application that runs in your menubar and comes with the following features:

Installs Now CLI and keeps it up to date automatically (the command line interface for interacting with Now).

Let's you deploy any kind of application or file by simply dragging and dropping it onto its menubar icon or selecting it using a file picker.

Deployment

now

Now will deploy the app and give you a URL.

Configuring a Domain Name

now alias https://my-web-app-avvuiuuwto.now.sh my-web-app.com

To map this domain name to the app's unique URL.

Updates

If you've made any changes to your app, you will need to deploy the latest version of your app.

now

More information:

How does CodeSandbox work?

Magic!

It’s open source y’all!

Client: the web application

https://github.com/CompuIves/codesandbox-client

Server: the Phoenix API server

https://github.com/phoenixframework/phoenix

All importers for CodeSandbox

https://github.com/codesandbox-app/codesandbox-importers

Includes the cli

Documentation

Thank you!

Jonathan Kemp

@jonkemp

https://github.com/jonkemp

Jonathan Kemp

CodePen - https://codepen.io/jonkemp/pens/public/

CodeSandbox - https://codesandbox.io/u/jonkemp/sandboxes