{"id":49782382,"url":"https://github.com/arnaud-deprez/spring-boot-react-sample","last_synced_at":"2026-05-11T22:05:15.487Z","repository":{"id":32119113,"uuid":"122392122","full_name":"arnaud-deprez/spring-boot-react-sample","owner":"arnaud-deprez","description":"Example of spring-boot application serving a reactjs application","archived":false,"fork":false,"pushed_at":"2023-01-04T21:50:51.000Z","size":2978,"stargazers_count":19,"open_issues_count":21,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-04-05T11:16:56.066Z","etag":null,"topics":["create-react-app","gradle","npm","react","reactjs","spring-boot","spring-webflux","webpack","yarn"],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnaud-deprez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-21T20:52:08.000Z","updated_at":"2023-03-08T08:59:45.000Z","dependencies_parsed_at":"2023-01-14T20:45:16.247Z","dependency_job_id":null,"html_url":"https://github.com/arnaud-deprez/spring-boot-react-sample","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/arnaud-deprez/spring-boot-react-sample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaud-deprez%2Fspring-boot-react-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaud-deprez%2Fspring-boot-react-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaud-deprez%2Fspring-boot-react-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaud-deprez%2Fspring-boot-react-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnaud-deprez","download_url":"https://codeload.github.com/arnaud-deprez/spring-boot-react-sample/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaud-deprez%2Fspring-boot-react-sample/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32914567,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-11T17:09:15.040Z","status":"ssl_error","status_checked_at":"2026-05-11T17:08:45.420Z","response_time":120,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["create-react-app","gradle","npm","react","reactjs","spring-boot","spring-webflux","webpack","yarn"],"created_at":"2026-05-11T22:05:10.532Z","updated_at":"2026-05-11T22:05:15.482Z","avatar_url":"https://github.com/arnaud-deprez.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Example spring-boot backend and react frontend\n\nUsually frontend and java backend developers are used to their tools: \n\n* frontend developers often uses [npm](https://www.npmjs.com/)/[yarn](https://yarnpkg.com/) + [webpack](https://webpack.js.org/) and develop in javascript/typescript.\n* java backend developers often uses [maven](https://maven.apache.org/)/[gradle](https://gradle.org/) and develop in any JVM languages.\n\nIn this scenario we will explore a typical use case where frontend developers will develop a web application that will use \nsome REST services exposed by a JVM backend application.\n\nIn a cloud environment like [Kubernetes](https://kubernetes.io), it's more likely that the frontend server will be \ndeveloped in nodejs and acts as a proxy by forwarding the API calls to the JVM backend.\n\nBut if you need to integrate with some [spring-cloud](http://projects.spring.io/spring-cloud/) and [spring-cloud-netflix](https://cloud.spring.io/spring-cloud-netflix/) \ntechnologies such as Eureka and Spring cloud config, it's easier to deploy your react web application in a [Spring Boot](https://projects.spring.io/spring-boot/) application \nas this integration comes for free.\n\nThis example will show you how to integrate a [Reactjs](https://reactjs.org/) web application and a [Spring Boot](https://projects.spring.io/spring-boot/) application \n(based on [Spring Boot Web Reactive](https://spring.io/guides/gs/reactive-rest-service/)) \nwhile using both the tools that frontend and backend developers are used to.\n\n---\n*NOTE*\n\n\u003e Do not hesitate to have a look at [JHipster](http://www.jhipster.tech/) project which comes with an awesome and more advanced integration \n\u003e between [Angular](https://angular.io/) or [React](https://reactjs.org/) and [Spring Boot](https://projects.spring.io/spring-boot/).\n---\n\n## Root project\n\nInitialize a gradle project with `gradle wrapper init` command\n\n## Backend\n\nGo to [spring-boot Initializr](https://start.spring.io/) and fill the form to create your project.\n\nHere I choose:\n* gradle project\n* kotlin\n* group id: com.powple\n* artifact id: backend\n* dependencies: _Spring Reactive Web_, _Spring Boot DevTools_\n\nThen we will create a web service that will be used by the frontend.\nHere I decided to use the Webflux functional endpoints. See [RoutesConfiguration](./backend/src/main/kotlin/com/powple/backend/config/RoutesConfiguration.kt).\n\nIn order to use SPA application router (eg. angular, reactjs or vuejs router), we have to resolve unknown path to the `index.html` page.\nThis is achieved thanks to [SpaWebFluxConfigurer](./backend/src/main/kotlin/com/powple/backend/config/SpaWebFluxConfigurer.kt) \nand the [`/` route](./backend/src/main/kotlin/com/powple/backend/config/RoutesConfiguration.kt)\n\nThen add in [settings.gradle.kts](./settings.gradle.kts): \n\n```kotlin\ninclude('backend')\n```\n\n### Options\n\n#### Caching static resources\n\nAdd `spring.resources.cache.period: 126227704` in [application.yml](./backend/src/main/resources/application.yml) \nto enable caching headers for 4 years.\n\n## Frontend\n\nWe will create a new react application based on [create-react-app](https://github.com/facebook/create-react-app#creating-an-app) utility: \n\n```sh\nnpx create-react-app frontend\n```\n\nThen optionally rename extension of file containing JSX from .js to .jsx to avoid IDE conflict with javascript code style.\n\nThen change the react application to use that greeting service, see: \n* [App.jsx](./frontend/src/App.jsx)\n* [GreetingService.js](./frontend/src/GreetingService.js)\n\n---\n*NOTE*\n\n\u003e The greeting service try to reach the API as if it was exposed locally: `/api/greetings`.\n\u003e In development, we will request the development web server to act as a proxy by forwarding all the API call to our java backend.\n\u003e In production, the react application will be served by [Spring Boot](https://projects.spring.io/spring-boot/) so the API is actually exposed locally.\n---\n\nAdd in [settings.gradle.kts](./settings.gradle.kts): \n\n```kotlin\ninclude(\"backend\")\n```\n\n### Development\n\nIn development, we will to our Webpack development server to proxy all unhandled request to the backend API. \n\nWe can do so by adding in [package.json](./frontend/package.json): \n\n```json\n{\n  //...\n  \"proxy\": \"http://localhost:8080\"\n}\n```\n\nYou can find more information [here](https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development)\n\nOnce it is done, you will be able to run your backend server and frontend web server separately and while developing, \nyou will see the changes directly.\n\n#### Backend\n\nYou will need to configure your IDE to auto-rebuild your project when it detects a change so that [Spring Boot DevTools](https://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-devtools.html) \ncan reload the changes. Check the [doc](https://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-devtools.html) for more info.\n\nAlternatively, you can run in a terminal `./gradlew :backend:bootRun` but you won't have auto-rebuild functionality.\n\n#### Frontend\n\nThen in another terminal, you can run: \n\n```sh\ncd frontend\nyarn install\nyarn start\n```\n\nThen it should pop up your default browser with the [Reactjs](https://reactjs.org/) application at http://localhost:3000.\nMake some changes and see how it impacts the web app.\n\n### Production\n\nWe need to package the result of the build made by `yarn build` command to the [Spring Boot](https://projects.spring.io/spring-boot/) application.\n\nIn order to do that, we will use the [gradle-node-plugin](https://github.com/node-gradle/gradle-node-plugin) to allow us to run yarn/npm tasks from gradle \nand at the end, make `processResources` task from the backend to depends on frontend `yarn build`.\n\n1. First, add in [settings.gradle.kts](./settings.gradle.kts) before backend:          \n\n```kotlin\ninclude(\"frontend\")\n```\n\n2. Make yarn/npm tasks depends on gradle tasks in [build.gradle.kts](./frontend/build.gradle.kts) in frontend.\n\n3. Make backend gradle `processResources` task depending on frontend gradle `yarn_build` tasks in [build.gradle](./backend/build.gradle.kts) in backend \nand copy the frontend build output into `/static` folder in the jar file. More information on [how spring-boot can serve static content](https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content).\n\n---\n**NOTE:** \n\n\u003e In this project, the backend will depend on frontend build only when the gradle property `prod` is set. \n\u003e It is to avoid that we systematically rebuild the frontend when we are only developing in the backend.\n--- \n\nThat's it!\nYou can now serve your react application from a [Spring Boot](https://projects.spring.io/spring-boot/) application using REST services in kotlin or any JVM languages.\n\nLet's try this:\n\n```sh\n./gradlew clean build -Pprod\n java -jar backend/build/libs/*.jar\n```\n\nThen open your browser at http://localhost:8080. Hooray!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaud-deprez%2Fspring-boot-react-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnaud-deprez%2Fspring-boot-react-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaud-deprez%2Fspring-boot-react-sample/lists"}