prot

A ridiculously opinionated dev environment for insanely fast rapid prototyping.

This is a proof-of-concept and a response to @Vjeux's challenge to create a system for rapid prototyping. I will not be actively maintaining this module. See run-js for a more active project in a similar vein.

For a more flexible workflow with minimal boilerplate, check out my post Rapid Prototyping in JavaScript.

Install

Make sure you have [email protected] or higher, and install globally:

npm install -g prot

Development

Create a folder and

cd

prot

mkdir cool-prototype
cd cool-prototype
prot index.js --open

This will create an empty

index.js

package.json

localhost:9966

Now you can hack around with

index.js

import { parse } from 'url'
console.log(parse(window.location.href))

Saving the

index.js

babel-polyfill

If you don't specify anything, it will default to

index.js

# same as `prot index.js`
prot

CSS

You can specify an optional CSS file like so:

prot index.js --css main.css

The CSS will be LiveReloaded without refreshing the browser, and without losing any application state.

Auto-Install

^{(this feature is still experimental)}

You can pass

--install

-i

npm install react --save

prot --install

Also see:

• atom-npm-install

React/JSX

You can also enable

babel-preset-react

-r

--react

prot --react --install

After running the above command, try pasting the following and reloading the browser.

// index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  
Hello, world!
,
  document.body
)

It should auto-install and save

react

react-dom

--install

Build

At some point you will want to deliver this through DropBox, FTP, gh-pages, or whatever. The easiest way to do that is by bundling it as a single HTML file.

Use the same arguments as before, but include the

--build

-b

prot -b index.html

The above command will bundle a compressed

index.js

index.html

--css

The build will set NODE_ENV to

'production'

See here for an example of the build output:

• http://mattdesl.github.io/prot/example/

Features

• All the features of budo like:
  • Syntax errors shown in browser
  • LiveReload (JS = page refresh, CSS = injected)
  • Pretty terminal logging
• ES2015 and

  babel-polyfill

  by default, react with a flag
• Builds and compresses JS and CSS as an inline HTML file
• Auto-install npm dependencies
• Auto-stub

  index.js

  and

  package.json

• Includes

  loose-envify

  ,

  uglifyify

  and

  bundle-collapser

  for smaller builds and dead code elimination

Open Questions

• How do you deal with dependencies without having to set up a

  package.json

  and all that jazz?
• How do you deal with special Babel presets, source transforms, etc?
• How about CSS pre-processors?
• Is it possible to distribute/share a hack without compressing/bundling the code?
• What about Webpack, HMR, and all the other bells & whistles?

See Also

• Rapid Prototyping in JavaScript
• budo - a more robust dev server, similar to this
• module-generator for the boilerplate (ignores, license)
• ghrepo for the GitHub API
• @mattdesl/ghpages for distribution
• @mattdesl/quick-stub personalized tools for scaffolding features into a module

License

MIT, see LICENSE.md for details.