Browserify Demo Playground
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:
Once the file is created you should be able to start your server and visit the playground:
DEBUG=playground* node server