A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/alidcastano/rogue.js below:

alidcast/rogue.js: The "nearly invisible" way to server-render React applications

The "nearly invisible" server-rendering framework for React applications

Rogue streamlines the process of creating server-rendered React applications.

We call Rogue a nearly invisible library, because it doesn't require a special /pages directory (like Nextjs) or a separate routes.js file (like Afterjs); all you need, is the App.js component you'd usually have. This means that, staying true to React's values, you can organize your code however you like.

We're able to give you back control of your application, because we leverage React Router (for dynamic routing) and Apollo Graphql (for querying data), which together dispense with the need to split your server-rendered routes into distinct entry points. With these libraries, everything already happens on a per component basis, so we just handle the server-rendering setup for you.

There are three Rogue packages:

The fastest way to get up and running with rogue is via @roguejs/cli. If you'd like to setup Rogue with another SSR built tool, you can also run rogue programmatically.

Note: roguejs/cli runs on Parcel which is still relatively young and has some issues. If these are blockers for you, for now, you can use Rogue programmatically with another SSR build tool such as razzle.

First, install the packages:

npm install @roguejs/cli @roguejs/app react react-dom react-router react-router-dom

Add the following scripts to your package.json:

"scripts": {
  "dev": "rogue dev",
  "build": "rogue build",
  "start": "rogue start"
}

Create an App.js entry point in your src directory:

export default () => <div>Welcome to Rogue.js!</div>

Finally, run npm run dev and go to http://localhost:3000.

Think you'll need a more advanced advanced configuration? You can always eject from our built-in client and server builds by creating your own client.js and server.js entry points, respectively. See running-programmatically for more information.

Any logic you'd like to handle upon server rendering can be done inside a component's static getInitialProps method (we kept the same property name as Nextjs to pay homage to the grandaddy of React SSR frameworks).

It's important to note that Rogue only calls getInitialProps inside your App.js component (and not inside pages like Nextjs).

The reason for that is that Rogue assumes you're using Apollo Graphql and React Router 4. So that elimates the two primary use-cases for getInitialProps inside pages: querying data and handling redirects.

Nonetheless, getInitialProps is still useful for bootstrapping your application with server specific logic. You can use it to configure SSR support for external libraries (see @roguejs/hocs for examples), or, another common scenario, is refreshing an authenticated user. Here's how that might look like:

// note: this example uses our apollo and redux hocs
export default class App extends React.Component {
  static async getInitialProps({ req, res }) {
    const token = getToken(ctx.req)
    if (!ctx.store.getState().session.user) { // refresh session
      try {
        const res = await ctx.apollo.query({ query: authUserQuery })
        ctx.store.dispatch(setSession({ user: res.data.authUser }))
      } catch (err) { // invalid or expired token 
        ctx.store.dispatch(removeSession())
      }
    }
  }
}

If you return any value from getInitialProps, make sure that it is a plain Object, as it will be serialized when server rendering.

This data will then be passed to the component exported from your App.js file.

There are two ways to manage document tags: application side or server side.

To manage document tags within your application, Rogue has automatic support for react-helmet. Check out their documentation for usage, but here's a basic example:

import { Helmet } from 'react-helmet'

export default () => (
  <React.Fragment>
    <Helmet>
      <title>My Rogue App!</title>
    </Helmet>
    <App />
  </React.Fragment>
)

To manage document tags for server-logic, you can use Rogue's ctx.app object. Here's an example of how you might use Rogue's API to setup a CSS-in-JS library such as styled-components:

const app = rouge(App, process.env.BUNDLE_URL, {
  renderToString(app, ctx) {
    const markup = ReactDOM.renderToString(app)

    const sheet = new ServerStyleSheet()
    sheet.collectStyles(app)
    ctx.app.headTags.push(sheet.getStyleTags())

    return markup
  }
})

In your server.js initialize your Rogue app by passing it your root App component and path to your client bundle:

import rogue from '@roguejs/app/server'
import { BUNDLE_SRC } from '@roguejs/cli'
import App from './App'

const app = rouge(App, BUNDLE_SRC)

app.listen(4000)

In your client.js hydrate your Rogue app:

import hydrate from '@roguejs/app/client'
import App from './App'

hydrate(App)

And that's it! With just a few lines of code, you've setup a server-rendered React application.

Accepts the following options:

Has the following methods:

You can use Rogue with your own custom server. Simply pass rogue.render to your app's middleware:

import rogue from '@roguejs/app/server'
import { BUNDLE_SRC } from '@roguejs/cli'
import express from 'express'
import App from './app/App'

const app = rouge(App, BUNDLE_SRC)

const server = express()

server.use(app.render)

export default server

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4