1. Damon Oehlman
  2. playground

Overview

Browserify Demo Playground

This is a simple code playground built using codemirror to allow interactive experimentation using browserify.

It's still very much a work in progress, but if you want to give it a go it's pretty simple to set it up.

Firstly, create a new project that you will house your code playground in. This could be part of an existing documentation or demo site, but for the purposes of demonstration let's set one up standalone first.

mkdir test-playground
cd test-playground
npm init

Follow the normal npm init prompts to setup the package.json for your new site. Now the playground is designed as express compatible middleware so let's add express into the mix for our site:

npm install express --save

And also install the playground module:

npm install playground --save

We should then create a simple server.js file that will launch our playground site:

var express = require('express');
var playground = require('playground');
var app = express();
var server = require('http').Server(app);

// run the playground in the playground mount point
app.use(express.json());
app.use(playground(__dirname + '/samples'));

// start the server
server.listen(3000);

You can probably see that in our code above we reference a samples directory where we have told the playground to load our code examples from. So let's create that directory and put an example to try out:

mkdir samples
mkdir samples/hello

By creating the samples/hello directory the playground will recognize hello as a sample that can be loaded and tinkered with by site visitors. Thus the sample will be listed in the sample index and made available at the appropriate url in the playground (taking into account express mountpoints, etc). In our case above, the hello sample will be available at http://localhost:3000/hello.

Before it will be available though, we'll need to create the sample. We can do this by creating an index.js file in the samples/hello directory. We'll make it super simple to validate the playground is working:

alert('hello');

Once the file is created you should be able to start your server and visit the playground:

DEBUG=playground* node server

http://localhost:3000