An example single page app with the server using Ratpack and the frontend using React. In a development environment the React components can be live edited so that a browser refresh isn't requierd.
It uses create-react-app because who can keep up with all the build configuration required to build javascript these days.
It handles authentication via the Ratpack Pac4j module using JSON Web Tokens (JWT). It has example of using websockets to transfer data from the JVM to the frontend. AuthenticatorService performs the authentication, use the same username/password to login.
./gradlew npm_installornpm installfrom thereactdirectory./gradlew npm_buildornpm buildfrom thereactdirectory./gradlew npm_startornpm startfrom thereactdirectory./gradlew run- the browser will open using port 3000
Now edit files under react/src.
Your changes will appear without reloading the browser like this:
New node dependencies can be added to react/package.json.
The node server (port 3000) proxies api requests to the Ratpack server. The Ratpack server (port 5050) will serve up the production optimized built javascript/css assets.
.
├── build.gradle
├── ratpack
│ ├── build.gradle # gradle file for building server
│ └── src
│ ├── main
│ │ ├── groovy # java source
│ │ └── resources
│ └── ratpack
│ ├── Ratpack.groovy # server handling
│ └── templates
│ └── index.html -> ../../../../react/build/index.html
│ # sym-linked, built from node
├── react
│ ├── build.gradle # gradle file which builds the js/css
│ ├── index.html # index file template
│ ├── package.json # add additional node libraries as needed
│ └── src # react javascript code
└── settings.gradle # for multi-project build
The /ratpack/src/ratpack/template/index.html should be sym-linked to /react/build/index.html. In order to do that you can use PowerShell to create the link with the following command:
New-Item -ItemType SymbolicLink -Target react\build\index.html -Path ratpack\src\ratpack\templates\index.html