Getting started with Roc

This guide will walk you through how to set up your first project using React. This is just one example on how an application can be created. More guides and and documentation is on the way.

Install

Make sure you have Node.js 4.x or higher and npm 3.x or higher on your system.

npm install -g roc@next

roc will now be available globally on your system.

Create new Redux and React project

Create directory for your app:

mkdir react-app && cd react-app

Bootstrap app starting point:

roc init web-app-react

Tip

web-app-react is an alias to rocjs/roc-template-web-app-react, a repository location on Github. This template then uses the roc-package-web-app-react extension. You can use your own repository by running roc init GITHUB_USER/REPO.

You can create your own extensions but that is outside the scope of this guide.

Development mode

roc dev

While this command is running the following is at your disposal:

  • See your app running at http://localhost:3030 with Browsersync support.
  • Manage your BrowserSync instance at http://localhost:3031. Connect as many different devices as you like.
  • Live reloading is active, and code can be live-edited and will be live-pushed to your browser.

View (dynamic) configuration options

roc dev --help

This prints all options that you can use to configure your current application. They are defined by the extensions that we use; currently roc-package-web-app-react in this guide. The runtime cli parameters are compatible with permanent values in roc.config.js.

Default project structure

The basic template defines this for you, but you may modify it to use an entirely different structure through roc.config.js.

Roc does not enforce any set structure on you.

├── app
│   ├── components
│   │   ├── clicker
│   │   │   ├── index.js
│   │   │   └── style.scss
│   │   ├── footer
│   │   │   ├── index.js
│   │   │   ├── style.scss
│   │   └── navbar
│   │       ├── index.js
│   │       └── style.scss
│   ├── redux
│   │   ├── clicker.js
│   │   └── reducers.js
│   ├── routes
│   │   └── index.js
│   └── screens
│       ├── about
│       │   ├── index.js
│       │   └── style.scss
│       ├── app
│       │   ├── index.js
│       │   └── style.scss
│       └── start
│           ├── index.js
│           └── style.scss
├── package.json
├── public
│   └── favicon.png
└── roc.config.js

app/components - components of the application app/screens - components mapped to routes app/redux - source related to data flow app/routes - react router mapping public - files served directly from web server roc.config.js - application configuration package.json - npm package data

Default project configuration

This configuration is the default one generated by roc-template-web-app-react.

module.exports = {
  settings: {
    runtime: {
      applicationName: '{{ rocTitleName }}',
      port: {{ rocPort }},
      serve: ['public', 'build/client'],
      favicon: 'favicon.png',
    },
    build: {
      reducers: 'app/redux/reducers.js',
      routes: 'app/routes/index.js',
    },
  },
};

Change application configuration

Permanent configurations belonging to your application should be defined in roc.config.js.

Temporary configuration changes can be done using the cli as seen from roc dev --help.

Build production bundles

roc build

Start production bundles

roc start

Additional documentation

Roc installs and manages many libraries for you so that you can focus on your application. Below is a link outlining the most important ones.

An open source project byIcons by Freepik  from Flaticon