{"id":18483973,"url":"https://github.com/geowarin/boot-react","last_synced_at":"2025-04-05T14:06:23.049Z","repository":{"id":66068245,"uuid":"40254634","full_name":"geowarin/boot-react","owner":"geowarin","description":"A starter application with spring boot and react","archived":false,"fork":false,"pushed_at":"2017-11-03T15:53:02.000Z","size":357,"stargazers_count":589,"open_issues_count":6,"forks_count":153,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-03-29T13:07:33.189Z","etag":null,"topics":["hot-reload","react","redis","redux","spring-boot","spring-session"],"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/geowarin.png","metadata":{"files":{"readme":"README.adoc","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-05T15:55:14.000Z","updated_at":"2025-03-08T15:50:05.000Z","dependencies_parsed_at":"2023-03-13T20:30:57.272Z","dependency_job_id":null,"html_url":"https://github.com/geowarin/boot-react","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/geowarin%2Fboot-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Fboot-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Fboot-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geowarin%2Fboot-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geowarin","download_url":"https://codeload.github.com/geowarin/boot-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345852,"owners_count":20924102,"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":["hot-reload","react","redis","redux","spring-boot","spring-session"],"created_at":"2024-11-06T12:38:12.578Z","updated_at":"2025-04-05T14:06:23.009Z","avatar_url":"https://github.com/geowarin.png","language":"JavaScript","readme":"# Spring boot and react hot starter\n\nimage:https://travis-ci.org/geowarin/boot-react.svg?branch=master[\"Build Status\", link=\"https://travis-ci.org/geowarin/boot-react\"]\nimage:https://ci.appveyor.com/api/projects/status/y3uw0gpo9dtec349?svg=true[\"Windows build Status\", link=\"https://ci.appveyor.com/project/geowarin/boot-react\"]\n\nBe more productive with this simple project that uses the https://spring.io/blog/2015/06/17/devtools-in-spring-boot-1-3[spring dev tools]\nand https://github.com/gaearon/babel-plugin-react-transform[react transform] for hot reloading.\n\nEverything: backend, frontend and styles will be hot reloaded automatically.\n\nSee http://geowarin.github.io/spring-boot-and-react-hot.html[my article] for an in-depth explanation.\n\nThis project also sets up spring security and http://projects.spring.io/spring-session/[spring-sessions], which will\nautomatically store your sessions in Redis, allowing you to scale on multiple servers.\n\nBoth the frontend and the backend are fully tested.\n\n## Developing\n\nThe Java code is available in the `backend` sub-project.\nThe `frontend` sub-project contains the javascript code.\n\nIn development you will have access to the awesome https://github.com/gaearon/redux-devtools[redux-dev-tools], which\nwill allow you keep track of your application state and undo/redo every action at will.\n\n### Running the backend (recommended)\n\nThe recommended way to launch the server is to use your favorite java IDE.\nThe main method of the application is in the `BootReactApplication` class.\n\n### Running the frontend (recommended)\n\n**You will need node 6.0+ and yarn to run the dev server and build the project**\n\nThe frontend dev server will be automatically launched when you start the backend.\n\nI strongly recommend that you install `yarn` on your development machine.\n\nTo install download the dependencies needed by the frontend do:\n\n```\ncd frontend\nyarn\n```\n\nIf you do not have the required binaries on your machine, you can use `./gradlew frontend:yarn_install` and `./gradlew frontend:start`.\nThose two command will download the required node/yarn versions automatically and use them to run the node tasks.\n\n### Alternatives for running the projects\n\nThere is also a gradle task to run the spring server: `./gradlew bootRun`.\n\n### Hot reloading\n\nWith the dev server running, saving your javascript files or stylus assets will automatically trigger the hot reloading\n(without browser refresh) of the application.\n\nFor the backend, recompiling the project in your IDE will trigger the reloading of the application's class loader.\n\n### Sessions\n\nSessions are stored in Redis with spring-sessions.\nSpring-sessions allows you to transparently persist the HttpSession on Redis.\nThis allows to distribute the load on multiple servers if you choose to.\n\nThe application relies on a stateless REST api.\nWhen they authenticate, clients will be given a token.\nThey will save this token in their local storage and send it as an HTTP header (`x-auth-token`).\nThis allows the retrieval of the session data in Redis.\n\nIf you want to use a real redis, you can run the application with the `redis` profile.\n\nIf the `redis` profile is not active, your session will be stored in a map.\nSee: https://github.com/geowarin/boot-react/blob/master/backend/src/main/java/react/config/redis/EmbeddedSessionConfig.java[EmbeddedSessionConfig].\nThis is great in development but you should avoid it in production.\n\nSummary:\n|===\n| Profile | description | uses `x-auth-token` header?\n\n| `redis` | Use a real redis connecting on localhost by default. | Yes\n| \u003cnone\u003e (`!redis`) | Uses a map to store sessions | Yes\n|===\n\n### Active profiles\n\nIf your run your project with gradle, the system properties won't be passed on to Spring.\nSee https://github.com/spring-projects/spring-boot/issues/832[this issue] for workarounds.\n\nThe simplest way to go is to specify active profiles in your IDE.\n\nhttp://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-profiles.html[Check out the doc] to learn\nmore about profiles in Spring Boot.\n\nTo run the jar in production mode use the following command:\n\n```\njava -jar boot-react-0.0.1-SNAPSHOT.jar --spring.profiles.active=production                                                       16:57:01\n```\n\n### Security\n\nThe application is configured to work with Spring Security.\nIt uses an in-memory authentication but you are free use\nhttp://docs.spring.io/spring-security/site/docs/4.0.2.RELEASE/reference/htmlsingle/#jc-authentication[other implementations]\nor to http://docs.spring.io/spring-security/site/docs/4.0.2.RELEASE/reference/htmlsingle/#core-services[roll your own].\n\n### Redux\n\nThis project uses https://github.com/rackt/react-redux[Redux] to handle state and actions.\nIt is a simple library with very powerful dev tools.\n\nDan Abramov, the author of Redux, published a https://egghead.io/series/getting-started-with-redux[great Redux video tutorial].\n\nI also suggest reading the https://github.com/rackt/react-redux/blob/master/docs/quick-start.md[redux quick start] to understand\nhow to architecture you application and the difference between containers and components.\n\nComponents are simple display elements that receive everything they need (state and actions) via props.\n\nContainers are connected to Redux and as such, they can pull whatever properties they are interested in from the state\nand bind actions to dispatch.\nThose containers are only connecting simple components to Redux.\n\nSmall components are written using the https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components[stateless functional components syntax], i.e,\nthose component are pure render components and only their props will have an impact on the DOM.\n\nBeware, hot reloading is not supported on functional components yet (see https://github.com/geowarin/boot-react/issues/13[this issue]) unless they are wrapped in a real Component.\n\nWe can http://rackt.github.io/redux/docs/recipes/WritingTests.html[write tests] on connected components,\nbut it is more effective to test them in isolation from Redux.\n\n### Router push state\n\nThe project uses https://github.com/rackt/react-router[react-router] to handle routes.\nYou can choose several modes to handles the router history.\nBy default, the project uses the browser history,\nwhich creates the nicest URLs (**/login**, **/private**, etc.).\n\nIn development, we use a dev server that\nhttps://github.com/geowarin/boot-react/blob/master/frontend/server.js#L21-L24[proxies] requests to the index.\n\nIn production, we have to use a special https://github.com/geowarin/boot-react/blob/master/backend/src/main/java/react/config/SinglePageAppConfig.java[resource handler]\nto redirect all non-asset requests to the index.\n\nYou can remove it if you choose to use memory history (no URL change) or hash history\n(**/\\#/login**, **/#/private**).\n\n### Stylus\n\nWe use https://learnboost.github.io/stylus/[stylus] as a css preprocessor.\nWe also leverage two stylus modules:\n\n* https://github.com/tj/nib[nib], which provides interesting mixins\n* http://jeet.gs/[jeet], a powerful grid system\n\nSee examples of jeet http://codepen.io/collection/eilAH/[here].\n\nIn development, the styles are included by webpack, which enables hot reloading.\nIn production, we use the https://github.com/webpack/extract-text-webpack-plugin[Extract Text Plugin] to extract the css to a separate file.\n\n## Static assets\n\nIf you want to include static assets like images in the project, please see https://github.com/geowarin/boot-react/issues/16[this issue],\nwhich explains how to use the URL loader.\n\nI'm real bad at creating logos but if you have time, I would be happy to include this by default in the project.\n\n## Running the tests\n\n\nThe check tasks will run the tests in both the frontend and the backend:\n```\n./gradlew check\n```\n\nYou can run the backend/frontend tests only with:\n```\n./gradlew backend/frontend:test\n```\n\nTo test the backend, we use a simple https://github.com/geowarin/spring-spock-mvc[library] that wraps\nspring mvc tests and makes them a bit nicer to read.\nSee the https://github.com/geowarin/boot-react/blob/master/backend/src/test/groovy/react/auth/AuthenticationSpec.groovy[auth-spec]\nfor an example.\n\nTo test the frontend, we use https://github.com/airbnb/enzyme[enzyme].\n\n## Shipping\n\nThis command will generate an optimized bundle and include it in the jar.\n\n```\n./gradlew clean assemble\n```\n\nThe jar will be available in `./backend/build/libs/boot-react-0.0.1-SNAPSHOT.jar`\n\nYou can then launch it with:\n\n```\njava -jar -Dspring.profiles.active=production backend/build/libs/boot-react-0.0.1-SNAPSHOT.jar\n```\n\nIn production, you should use a real Redis instance so, please uncomment and edit the configuration file\n(`backend/src/main/resources/application.yml`).\n\nWith spring boot 1.3, you can install the application http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/html/deployment-install.html#deployment-service[as a linux service]\n\nNB: each application can be assembled with the `assemble` task so you can use `frontend:assemble` or `backend:assemble`.\nThe backend task depends on the frontend task.\n\n## Docker\n\nThe project can create a docker container.\n\nJust run:\n\n```\n./gradlew backend:buildDocker\n```\n\nAnd it will create a docker image named `boot-react/boot-react`.\n\n```\n\u003e docker images\nREPOSITORY                               TAG                 IMAGE ID            CREATED              VIRTUAL SIZE\nboot-react/boot-react                    latest              5280d39f660f        About a minute ago   138.9 MB\n```\n\nYou can then run it with:\n\n```\ndocker run -p 8080:8080 boot-react/boot-react\n```\n\nYou can also pass arguments to the application like this:\n\n```\ndocker run -p 8080:8080 boot-react/boot-react --spring.profiles.active=redis --spring.redis.host=redis\n```\n\n## Docker-compose\n\nThere is a simple `docker-compose.yml` in the root directory of the project.\nOnce you have built the application image with `./gradlew backend:buildDocker`, you can run:\n\n```\ndocker-compose up -d\n```\n\nThis will run the application together with a redis server.\n","funding_links":[],"categories":["spring-boot demo"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeowarin%2Fboot-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeowarin%2Fboot-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeowarin%2Fboot-react/lists"}