{"id":13400967,"url":"https://github.com/ssorallen/react-play","last_synced_at":"2025-03-14T06:32:03.621Z","repository":{"id":16039347,"uuid":"18783215","full_name":"ssorallen/react-play","owner":"ssorallen","description":"Render React components in the Play Framework with JDK8's JavaScript engine","archived":false,"fork":false,"pushed_at":"2017-12-22T15:03:26.000Z","size":369,"stargazers_count":214,"open_issues_count":3,"forks_count":26,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-07-31T19:27:46.034Z","etag":null,"topics":["javascript","play-framework","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ssorallen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-15T01:32:55.000Z","updated_at":"2024-04-11T16:42:15.000Z","dependencies_parsed_at":"2022-09-24T11:01:31.592Z","dependency_job_id":null,"html_url":"https://github.com/ssorallen/react-play","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Freact-play","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Freact-play/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Freact-play/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssorallen%2Freact-play/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ssorallen","download_url":"https://codeload.github.com/ssorallen/react-play/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243538015,"owners_count":20307099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","play-framework","reactjs"],"created_at":"2024-07-30T19:00:57.451Z","updated_at":"2025-03-14T06:32:03.613Z","avatar_url":"https://github.com/ssorallen.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Awesome React","React [🔝](#readme)"],"sub_categories":["Uncategorized","Tools"],"readme":"React.js on the Play Framework\n==============================\n\n* JDK8 shipped with a JavaScript runtime: [Nashorn](http://openjdk.java.net/projects/nashorn/)\n* React supports server side rendering via\n  [`React.renderToString`](http://facebook.github.io/react/docs/top-level-api.html#react.rendertostring).\n* The [Play Framework](http://playframework.com/) is a web framework that runs\n  on the JVM\n\nWith these powers combined, Play can use the same JavaScript sent to the client\nto render its templates on the server.\n\n## To try it out:\n\n1. Install [JDK8](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) for your platform\n2. Clone this repository\n3. Follow the instructions to install and\n   [get started with Play 2.3.x](https://playframework.com/documentation/2.3.x/Home)\n4. Run the app with `play run`\n5. View [http://localhost:9000/](http://localhost:9000/) in your browser\n\n### What am I looking at?\n\nThis app is using the JavaScript from my\n[React Reddit Client](https://github.com/ssorallen/react-reddit-client) but with\none key, huge, fantastic change: the first view you see is rendered on the\nserver.\n\n### The magic is in the Nashorn\n\nThe part that makes this all work is the Nashorn JavaScript engine that ships\nwith Java 8. By eval'ing components on the server, React can produce a string\nthat's rendereable as plain old HTML.\n\n**The server:**\n\n```scala\ndef index = Action {\n  // Pass 'null' to force the correct class loader. Without passing any param,\n  // the \"nashorn\" JavaScript engine is not found by the `ScriptEngineManager`.\n  //\n  // See: https://github.com/playframework/playframework/issues/2532\n  val engine = new ScriptEngineManager(null).getEngineByName(\"nashorn\")\n\n  if (engine == null) {\n    BadRequest(\"Nashorn script engine not found. Are you using JDK 8?\")\n  } else {\n    // React expects `window` or `global` to exist. Create a `global` pointing\n    // to Nashorn's context to give React a place to define its global namespace.\n    engine.eval(\"var global = this;\")\n\n    // Evaulate React and the application code.\n    engine.eval(new FileReader(\"target/web/web-modules/main/webjars/lib/react/react-with-addons.js\"))\n    engine.eval(new FileReader(\"target/web/public/main/javascripts/components/App.js\"))\n\n    Ok(views.html.main(\"React on Play\") {\n      play.twirl.api.Html(engine.eval(\"React.renderToString(React.createElement(App));\").toString)\n    })\n  }\n}\n```\n\nThe client receives the same React and App JavaScript files and executes the\nsame code the server did. Unlike most other use cases, it will be working on\npre-rendered HTML as opposed to an empty container.\n\n**The client:**\n\n```html\n\u003cdiv id=\"application\"\u003e\n  @content\n\u003c/div\u003e\n\u003cscript src=\"@routes.WebJarAssets.at(WebJarAssets.locate(\"react-with-addons.min.js\"))\"\u003e\u003c/script\u003e\n\u003cscript src=\"@routes.Assets.at(\"javascripts/components/App.js\")\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  React.render(\n    React.createElement(App, null),\n    document.getElementById(\"application\")\n  );\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssorallen%2Freact-play","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fssorallen%2Freact-play","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssorallen%2Freact-play/lists"}