prot

by mattdesl

mattdesl / prot

highly opinionated dev environment [Proof of concept]

198 Stars 8 Forks Last release: Not found MIT License 11 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

prot

experimental

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
into it, then run
prot
.
mkdir cool-prototype
cd cool-prototype
prot index.js --open

This will create an empty

index.js
file in the current folder, stub
package.json
(if it doesn't exist), run a server at
localhost:9966
, and launch the URL in your default browser.

Now you can hack around with

index.js
. Try adding the following:
import { parse } from 'url'
console.log(parse(window.location.href))

Saving the

index.js
file will trigger a LiveReload. It includes ES2015 and
babel-polyfill
by default, and supports npm/Node dependencies through browserify.

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
or
-i
, which will auto-install npm dependencies on file save, and add them to your package.json. This means you can hack without typing
npm install react --save
and so forth.
prot --install

Also see:

React/JSX

You can also enable

babel-preset-react
with
-r
or
--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
and
react-dom
because of the
--install
flag.

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
or
-b
flag.
prot -b index.html

The above command will bundle a compressed

index.js
into a script tag inside
index.html
. The HTML is now self-contained. If
--css
is specified, it will be compressed and inlined into a style tag.

The build will set NODE_ENV to

'production'
for smaller bundles.

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

License

MIT, see LICENSE.md for details.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.