This is a script for setting up a super-quick local playground for frontend development. You can choose between:
- a barebones HTML project
- a simple Webpack setup that will allow you to install and import npm dependencies out of the box.
Once installed, you can hit play <playground-name> in your Terminal and the util will bootstrap the project if necessary, fire up a dev server, open the page in the browser and the project in VS Code.
This script relies on the following software to be installed and set up on your machine:
- VS Code with
codeshell command installed - Node.js >= v6
- http-server for Node installed globally
Clone or download this repo to any location on your machine.
Add the ./script/ directory from this repo to your $PATH. I use bash, so I add the following line to ~/.bash_profile:
export PATH=/path/to/playground-util/script/:$PATHCreate a directory ~/code/_playgrounds/
$ mkdir ~/code/_playgrounds/Finally, restart your Terminal.app to apply the changes.
$ play playground-namewill create a directory called "playground-name" inside the ~/code/_playgrounds/ directory, create the index.html, fire up a http-server, open the page in your browser and open the directory in VS Code.
If a directory ~/code/_playgrounds/playground-nanme/ already exists, it will open the existing one instead.
$ play playground-bundled --webpackwill setup a copy of playground-template-webpack. For all subsequent boots of this project, calling play playground-bundled will be sufficient. The util will auto-detect that this is a webpack project.
$ play lswill output a list of all existing playgrounds.