A webpack-driven static site playground for local development of codepen-esque experiments.
Supports:
- Vanilla JS
- React.js (instructions for enabling below)
- Node >= 10
- Yarn/NPM
- Clone the repo
yarnornpm installyarn start- Default app opens at
localhost:4000(Live reloading enabled by default. HMR enabled by editing webpack config) - See 'Developing in your playground' below
yarn build- Static site output at
/dist - Deploy to your favourite static site hosting service
Static Site Playground is designed to be very simple. There are three main files provided for you to use in your creative coding experiments (found under src/ folder):
app.hbs: this is your 'HTML' file. It's inserted into the body element. You can use standard HTML, but if you want to use the power of handlebars templating, feel free to define template partials, or invesigatebootstrap.jsto see how to use dynamic partials with injected data.app.js: this is your JS file.
- To enable React.js support, uncomment the
importline for react in this file
app.scsss: this is your styles file. It uses SASS, so you can define partials, use mixins, and all the other powerful tools of the SASS pre-processor.
Main asset folder: /static/assets
- Images: put images in
static/assets/imagesand import into CSS asurl(), JS asrequire()orimport ..., or HTML as<img src="">and webpack will take care of copying/inlining you assets for the project - Fonts: support pending
- Videos: support pending
- Custom scripts: put scripts in
static/assets/scriptsorstatic/assets/scripts/vendorand import in JS asrequire()orimport ...or in HTML as<script src="...">and webpack (should) take care of bundling for your dev server/build
/src/header.hbs: add extra HTML (<link>,<script>,<meta>) content for the<head>of your HTML filesrc/_bootstrap.scss: core styles used of the app label badge that appears in top right of your app./.env.sample: ENV values in the sample are injected and used in the raw HTML as meta tags, and as the app label that appears in the top right. If you provide an.envfile with overrides, they'll appear in your app too../bootstrap.js: Used to import supporting assets (app.scss, etc) for webpack build
Codepen.io is a highly convenient website for creating, sharing, and viewing code experiments and creative coding adventures. However, it's limited in some respects (depends on internet connection, limited in size of data, can't easily browser dev tools due to iFrame embedding, etc).
I think there is a missing 'local development' solution for rapidly creating coding prototypes for when either internet is spotty, or I want to debug easily, or I want to save and reload much faster than online solutions allow.
- Live server / hot reloading in development
- Simple tech stack: vanilla JS | sass stylesheets | plain HTML
- Branchable/forkable app template that can be extended / enhanced as you see fit
- Reliable build task for production environments that can be deployed to surge / netlify / static site hosting
- support for serving custom assets: images with optimization
- support for serving custom assets: fonts
- support for serving custom assets: videos
- support for modern JS frameworks: React.js
- support for modern JS frameworks: Vue.js
- support for modern JS frameworks: Angular