Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattdesl/prot
highly opinionated dev environment [Proof of concept]
https://github.com/mattdesl/prot
Last synced: about 2 months ago
JSON representation
highly opinionated dev environment [Proof of concept]
- Host: GitHub
- URL: https://github.com/mattdesl/prot
- Owner: mattdesl
- License: mit
- Created: 2015-12-26T22:50:10.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-05T07:22:30.000Z (about 8 years ago)
- Last Synced: 2024-10-17T16:47:55.369Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 71.3 KB
- Stars: 200
- Watchers: 8
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - mattdesl/prot - highly opinionated dev environment [Proof of concept] (others)
README
# prot
[](http://github.com/badges/stability-badges)
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](https://twitter.com/mattdesl/status/680776941960564736). I will not be actively maintaining this module. See [run-js](https://github.com/remixz/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](http://mattdesl.svbtle.com/rapid-prototyping).
## Install
Make sure you have npm@2 or higher, and install globally:
```sh
npm install -g prot
```
## Development
Create a folder and `cd` into it, then run `prot`.
```sh
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:
```js
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`:
```sh
# same as `prot index.js`
prot
```
## CSS
You can specify an optional CSS file like so:
```sh
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.
```sh
prot --install
```
Also see:
- [atom-npm-install](https://github.com/hughsk/atom-npm-install)
## React/JSX
You can also enable `babel-preset-react` with `-r` or `--react`:
```sh
prot --react --install
```
After running the above command, try pasting the following and reloading the browser.
```js
// 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.
```sh
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](https://www.npmjs.com/package/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](http://mattdesl.svbtle.com/rapid-prototyping)
- [budo](https://github.com/mattdesl/budo) - a more robust dev server, similar to this
- [module-generator](https://www.npmjs.com/package/module-generator) for the boilerplate (ignores, license)
- [ghrepo](http://npmjs.com/package/ghrepo) for the GitHub API
- [@mattdesl/ghpages](http://npmjs.com/package/@mattdesl/ghpages) for distribution
- [@mattdesl/quick-stub](https://www.npmjs.com/package/@mattdesl/quick-stub) personalized tools for scaffolding features into a module
## License
MIT, see [LICENSE.md](http://github.com/mattdesl/prot/blob/master/LICENSE.md) for details.