roc
Version:
Build modern web applications easily
93 lines (73 loc) • 5 kB
Markdown
# [Roc](http://www.getroc.org)
Roc enables you to focus on writing great software and away from juggling boilerplate, configuration files and ever changing dependencies.
Can be used to quickly prototype something with zero-setup to running applications in production.

[](https://www.npmjs.com/package/roc)
[](https://travis-ci.org/vgno/roc)
[](https://coveralls.io/github/vgno/roc?branch=master)
[](https://codeclimate.com/github/vgno/roc)
[](https://codeclimate.com/github/vgno/roc)
[](https://david-dm.org/vgno/roc)
## Introduction
Roc is development tool that makes it easier to create web applications and components without the boilerplate fragmentation and complex setup processes. It does this in a modular and extendable way.
Roc makes it easy to; using existing extensions:
* Create production ready [React](http://facebook.github.io/react/) applications featuring universal rendering.
* Create general web applications running on a [Koa](http://koajs.com/) server.
* First class developer experience with hot reloading and [Browsersync](http://browsersync.io).
* Best in class build setup using [Webpack](http://webpack.github.io/) and [Babel](http://babeljs.io).
Basically Roc composes some great open source tools and make them easy to use with a streamlined command line interface and configuration/extension system. If needed Roc allows for overriding of every aspect of it, so it does not limit you.
## Get started
### Install Roc
```
npm install -g roc
```
This provides you with a really simple command line interface. Only Linux and OS X is _currently_ supported.
### Bootstrap React + Redux application
```
mkdir react-app && cd react-app
```
```
roc init web-react
```
```
roc dev
```
This will:
* create a new directory
* init a Roc project inside it that uses React and Redux
* start the project in development mode
### Production ready
To build and run in production just use:
```
roc build
```
```
roc start
```
### Where to go from here
See the documentation for the particular extension that is used for more details on what it does. A very common use-case is to make modifications to your `roc.config.js`. To get a better understanding of all the possible options in the extension use the `roc list-settings` command or `--help` for a specific command.
## Extensions
Roc is highly flexible and makes it easy to create new extensions. It does not enforce limits on what the extensions do or how they do it. It is trivial to both create new extensions and to extend existing ones. For example it would be possible to create a alternative to `roc-web` that uses [Browserify](http://browserify.org/) instead of [Webpack](http://webpack.github.io/).
### Current Extensions
| Project | Github page |
| ------- | ----------- |
| Roc Web | https://github.com/vgno/roc-web |
| Roc Web React | https://github.com/vgno/roc-web-react |
#### Example of tasks handled by these extensions
- Building and bundling through [Webpack](http://webpack.github.io/).
- Web server through [Koa](http://koajs.com/).
- [React](http://facebook.github.io/react/) (complete with [Redux](https://github.com/rackt/redux) and server side rendering).
- First class developer experience featuring hot code reloading and [Browsersync](http://browsersync.io).
- Transpiling from ES2015 _(ES6)_ and beyond using [Babel](http://babeljs.io).
## Documentation
See the [documentation](/docs/README.md).
## Motivation
Roc was born out of the need to create modern applications following the correct conventions and using best practices consistently.
We quickly realized that keeping boilerplate updated within each project over time was unmanageable. It seems natural to have this _repeated complexity managed by separated semantically versioned packages_.
Development of Roc was started before these posts where created but they still describe in a good way what Roc aims to solve:
* [Challenge: Best JavaScript Setup for Quick Prototyping](http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html) by [**@vjeux**](https://github.com/vjeux)
* [Javascript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) by [**@ericclemmons**](https://github.com/ericclemmons)
## Contribute
We are still working on getting the balance between flexibility and easy-of-use. Input here is valuable to us and please contribute if you want, we welcome you to interact.
## Thanks
Thanks to [Jongleberry](https://github.com/jonathanong) for letting us use the `roc` package name on npm.