react-play 0,0

Render React components in the Play Framework with JDK8's JavaScript engine

React.js on the Play Framework

With these powers combined, Play can use the same JavaScript sent to the client to render its templates on the server.

To try it out:

  1. Install JDK8 for your platform
  2. Clone this repository
  3. Follow the instructions to install and get started with Play 2.3.x
  4. Run the app with play run
  5. View http://localhost:9000/ in your browser

What am I looking at?

This app is using the JavaScript from my React Reddit Client but with one key, huge, fantastic change: the first view you see is rendered on the server.

The magic is in the Nashorn

The part that makes this all work is the Nashorn JavaScript engine that ships with Java 8. By eval’ing components on the server, React can produce a string that’s rendereable as plain old HTML.

The server:

def index = Action {
  // Pass 'null' to force the correct class loader. Without passing any param,
  // the "nashorn" JavaScript engine is not found by the `ScriptEngineManager`.
  //
  // See: https://github.com/playframework/playframework/issues/2532
  val engine = new ScriptEngineManager(null).getEngineByName("nashorn")

  if (engine == null) {
    BadRequest("Nashorn script engine not found. Are you using JDK 8?")
  } else {
    // React expects `window` or `global` to exist. Create a `global` pointing
    // to Nashorn's context to give React a place to define its global namespace.
    engine.eval("var global = this;")

    // Evaulate React and the application code.
    engine.eval(new FileReader("target/web/web-modules/main/webjars/lib/react/react-with-addons.js"))
    engine.eval(new FileReader("target/web/public/main/javascripts/components/App.js"))

    Ok(views.html.main("React on Play") {
      play.twirl.api.Html(engine.eval("React.renderToString(React.createElement(App));").toString)
    })
  }
}

The client receives the same React and App JavaScript files and executes the same code the server did. Unlike most other use cases, it will be working on pre-rendered HTML as opposed to an empty container.

The client:

<div id="application">
  @content
</div>
<script src="@routes.WebJarAssets.at(WebJarAssets.locate("react-with-addons.min.js"))"></script>
<script src="@routes.Assets.at("javascripts/components/App.js")"></script>
<script>
  React.render(
    React.createElement(App, null),
    document.getElementById("application")
  );
</script>

Related Repositories

react-native-nba-app

react-native-nba-app

This is why we play ...

sse-chat

sse-chat

Chat example app using Server Sent Events plus REST calls. Scala, Play Framework 2.3, AngularJS or React (alternatively). ...

react-native-keyboard-spacer

react-native-keyboard-spacer

Plug and play react-native keyboard spacer view. ...

react-play

react-play

Render React components in the Play Framework with JDK8's JavaScript engine ...

react-native-audio-streaming

react-native-audio-streaming

iOS & Android react native module to play an audio stream, with background support and media controls ...


Top Contributors

ssorallen benmccann turadg