# play-java-react-seed **Repository Path**: mirrors_playframework/play-java-react-seed ## Basic Information - **Project Name**: play-java-react-seed - **Description**: :cyclone: Java Play 2.7.x + React seed project with full-fledged build process - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-04-14 - **Last Updated**: 2026-01-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README [![MIT License][license-badge]][license] # Java Play React Seed > Use play framework to develop the web application backend/services and frontend using React Create App, all in a totally integrated workflow and single unified console. This approach will deliver perfect development experience without CORS hassle. Read more @ http://bit.ly/2A1AzEq [![Java Play React Seed](https://github.com/yohangz/java-play-react-seed/blob/master/react.png)](http://bit.ly/2A1AzEq) ## Used Summary * [Play Framework: 2.8.0](https://www.playframework.com/documentation/2.8.x/Home) * [React: 16.8.6](https://reactjs.org/) * [Create React App: 2.1.8](https://github.com/facebookincubator/create-react-app) ## How to use it? ### Prerequisites * [Node.js](https://nodejs.org/) * [JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html) (recommend version 1.8 or higher) ### Let's get started, * Fork or clone this repository. * Used any of the following [SBT](http://www.scala-sbt.org/) commands which will intern trigger frontend associated npm scripts. ``` sbt clean # Clean existing build artifacts sbt stage # Build your application from your project’s source directory sbt run # Run both backend and frontend builds in watch mode sbt dist # Build both backend and frontend sources into a single distribution artifact sbt test # Run both backend and frontend unit tests ``` * This seed is not using [scala play views](https://www.playframework.com/documentation/2.8.x/ScalaTemplates). All the views and frontend associated routes are served via [React](https://reactjs.org/) code base under `ui` directory. ## Complete Directory Layout ``` ├── /app/ # The backend source (controllers, models, services) │ └── /controllers/ # Backend controllers │ └── FrontendController.scala # Asset controller wrapper serving frontend assets and artifacts ├── /conf/ # Configurations files and other non-compiled resources (on classpath) │ ├── application.conf # Play application configuratiion file. │ ├── logback.xml # Logging configuration │ └── routes # Routes definition file ├── /logs/ # Log directory │ └── application.log # Application log file ├── /project/ # Contains project build configuration and plugins │ ├── FrontendCommands.scala # Frontend build command mapping configuration │ ├── FrontendRunHook.scala # Forntend build PlayRunHook (trigger frontend serve on sbt run) │ ├── build.properties # Marker for sbt project │ └── plugins.sbt # SBT plugins declaration ├── /public/ # Frontend build artifacts will be copied to this directory ├── /target/ # Play project build artifact directory │ ├── /universal/ # Application packaging │ └── /web/ # Compiled web assets ├── /test/ # Contains unit tests of backend sources ├── /ui/ # React frontend source (based on Create React App) │ ├── /public/ # Contains the index.html file │ ├── /node_modules/ # 3rd-party frontend libraries and utilities │ ├── /src/ # The frontend source codebase of the application │ ├── .editorconfig # Define and maintain consistent coding styles between different editors and IDEs │ ├── .gitignore # Contains ui files to be ignored when pushing to git │ ├── package.json # NPM configuration of frontend source │ ├── README.md # Contains all user guide details for the ui │ └── yarn.lock # Yarn lock file ├── .gitignore # Contains files to be ignored when pushing to git ├── build.sbt # Play application SBT configuration ├── LICENSE # License Agreement file ├── README.md # Application user guide └── ui-build.sbt # SBT command hooks associated with frontend npm scripts ``` ## What is new in here? ### FrontendCommands.scala * Frontend build command mapping configuration. ``` ├── /project/ │ ├── FrontendCommands.scala ``` ### FrontendRunHook.scala * PlayRunHook implementation to trigger `npm run start` on `sbt run`. ``` ├── /project/ │ ├── FrontendRunHook.scala ``` ### FrontendController.scala - Asset controller wrapper serving frontend assets and artifacts. ``` ├── /app/ │ └── /controllers/ │ └── FrontendController.scala ``` ### ui-build.sbt * This file contains the build task hooks to trigger frontend npm scripts on sbt command execution. ### npm scripts * New and modified npm scripts of [Create React App](https://github.com/facebookincubator/create-react-app) generated package.json. * Check [UI README.md](./ui/README.md) to see all available frontend build tasks. ``` ├── /ui/ │ ├── package.json ``` ## Routes ``` ├── /conf/ │ ├── routes ``` * The following route configuration map index.html to entry route (root). This should be placed as the initial route. ``` GET / controllers.FrontendController.index() ``` * All API routes should be prefixed with API prefix defined under `application.conf` (Default prefix `apiPrefix = "api"`) Example API route: ``` GET /api/summary controllers.HomeController.appSummary ``` * The following route is being used to serve frontend associated build artifacts (css, js) and static assets (images, etc.). This should be placed as the final route. ``` GET /*file controllers.FrontendController.assetOrDefault(file) ``` **Note: _On production build all the front end React build artifacts will be copied to the `public` folder._** ## Can be used to implement any front end/ui build! * Simply replace the ui directory with the build of your choice * Make output directory ROOT/public/ * Implement a proxy to localhost:9000 ## Looking for some other frontend framework or language choice * [Scala Play React Seed](https://github.com/yohangz/scala-play-react-seed) * [Scala Play Angular Seed](https://github.com/yohangz/scala-play-angular-seed) * [Java Play Angular Seed](https://github.com/yohangz/java-play-angular-seed) * [Scala Play Vuejs Seed](https://github.com/duncannevin/scala-play-vue-seed) by [Duncan Nevin](https://github.com/duncannevin) * [Java Play Vuejs Seed](https://github.com/duncannevin/java-play-vue-seed) by [Duncan Nevin](https://github.com/duncannevin) ## Contributors | [
Yohan Gomez][yohan-profile] | [
Lahiru Jayamanna][lahiru-profile]
| [
Gayan Attygalla](https://github.com/Arty26) | | :---------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------: | ## License This software is licensed under the MIT license [license-badge]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat [license]: https://github.com/yohangz/java-play-react-seed/blob/master/README.md [yohan-profile]: https://github.com/yohangz [lahiru-profile]: https://github.com/lahiruz [gayan-profile]: https://github.com/Arty26