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'
hydrate(App)
// server.js
import Rogue from '@roguejs/app/server'
import http from 'http'
import App from './App'
const app = new Rogue(App)
http.createServer(app.render).listen(3000)🚧 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 README.md.
- Alid Castano (@alidcastano)