playgrounds

A service & framework for building demo sites.

Usage

$ npm i

$ npm run create <name> <optional template>

Templates

simple webpack (default):

$ npm run create my-app

react + webpack:

$ npm run create my-app webpack-react

threejs + webpack:

$ npm run create my-app webpack-threejs

Check out your new playground:

$ cd playgrounds/<name>

$ npm i

Start dev server:

$ npm run dev

Create new build:

$ npm run build

API

To include an API route, modify api/index.js.

eg:

import {Router} from 'express';
import request from 'request'; // could be any request libary or even node's http

router.get('/example', (req, res) => {
    const reqOptions = {
        headers: {
            'User-Agent': 'example-app',
        },
    };

    request.get(REPO_ROUTE, reqOptions, (err, resp) => {
        // handle however you want
        if (err) {
            res.status(500).send(err);
        } else if (resp.statusCode === 200) {
            res.json(JSON.parse(resp.body));
        } else {
            res.send(resp);
        }
    });
});

export default router;

To make front end requests in your app, use your library of choice to send requests. We recommend using superagent. When making requests, the environment variable BASE_API_URL will be available to you.

eg:

import request from 'superagent';
request
  .get(`${process.env.BASE_API_URL}/example`)
  .set('Accept', 'application/json')
  .end((err, resp) => {
    document.getElementById('container').innerHTML = JSON.stringify(err || resp.body, 0, 2);
  });

see api-demo in /playgrounds for a working demo of this.

NOTE: you will need to run the main playgrounds server locally in tandem with your app's webpack server to use the api in development

Features

• npm run dev: first-in-class development experience.

  • State preserving hot-reload
  • State preserving compilation error overlay
  • Lint-on-save with ESLint
  • Source maps

• npm run build: Production ready build.

  • JavaScript minified with UglifyJS.
  • HTML minified with html-minifier.
  • CSS across all components extracted into a single file and minified with cssnano.
  • All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.