Rogue.js - a nearly invisible framework for creating server-rendered React applications
JavaScript TypeScript
Clone or download


With Rogue, the server rendering configuration will be nearly invisible to you. You don't need a special /pages directory (like Nextjs) or a separate routes.js file (like Afterjs). All you need is the App.js entry point you'd usually have. This means that you can wrap your app in layouts/transitions/providers, etc. the same way you would in a regular React Application, and staying true to React's values, you can organize your code however you like.

As an added benefit, Rogue also comes with first-class support for: GraphQL (Apollo), State Management (Redux), and Css-in-Js (Emotion / Styled-Components).

But anyway, -- these are just words; and we know the way to your heart is with code, so here's an example of how your server-rendered apps will look going forward:

// App.js
export default () => 'Hello World!'

// client.js
import { hydrate } from '@roguejs/app'
import App from './App'


// server.js
import Rogue from '@roguejs/app/server'
import http from 'http'
import App from './App'

const app = new Rogue(App)


🚧 Under Construction 🚧

If you'd like to get started with Rogue now, we recommend you use @roguejs/app (see below) with your own custom build setup. Check out the with-razzle directory for an example of how to setup Rogue.

There are three Rogue packages:

  • @roguejs/app, holds the core modules for the Rogue framework. You can use this package to streamline your SSR experience independent of any build setup.
  • @roguejs/hocs, holds higher order components that come preconfigured with SSR support for Rogue. You can use this package to enhance your application without uncessary SSR boilerplate.
  • @roguejs/cli (WIP), holds the build and development system for the Roguejs framework. You can use this package to power a Roguejs app with zero configuration.

Each of the above packages holds its respective documentation inside its