Awesome
Silhouette Play React Seed Template
The Silhouette Play React Seed project shows how Silhouette can be used to create a SPA with React/Redux and Play. It's a starting point which can be extended to fit your needs.
Features
- MongoDB storage
- SBT multi project
- i18n
- Sign Up
- Sign In (Credentials)
- Cookie authentication
- Dependency Injection with Guice
- Publishing Events
- Avatar service
- Remember me functionality
- Password reset functionality
- Account activation functionality
- Email sending and auth token cleanup
- Security headers
- CSRF Protection
Documentation
Consult the Silhouette documentation for more information. If you need help with the integration of Silhouette into your project, don't hesitate and ask questions in our Forum or on Stack Overflow.
Installation
Install all NPM dependencies for the UI:
cd app-ui
# With NPM
npm install
# With yarn
yarn install
How does it work
The application is divided into a backend and a frontend part. The frontend part is located in the
app-ui folder and it is based on Neutrino. A detailed explanation can be found in the README.md
of this folder. The frontend application follows the modern JavaScript development workflow. This
means that in development mode we start an Express server on port 5000, which serves your UI. This
comes with the advantage that you can use webpacks Hot Module Replacement.
The backend application is a normal Play application which starts on port 9000 and which serves as the API of the frontend.
If you build your application, then the frontend code will be integrated into your Play application. This means that you do not need any JavaScript server side tooling in production. Your Play application will serve your frontend code, which was previously packed with webpack.
The application comes with a SBT plugin that triggers the corresponding NPM tasks for the Play SBT build lifecycle.
| SBT Commands | NPM Tasks |
|---|---|
sbt "npm <arg>" | npm run <arg> |
sbt npm:clean | npm run clean |
sbt npm:compile | npm run build |
sbt npm:start | npm run start |
sbt npm:dist | npm run build |
sbt npm:test | npm run test |
sbt run | npm run start |
sbt stage | npm run deploy:prod |
sbt dist | npm run deploy:prod |
Run in dev mode
Start the application with the following command.
sbt run
You can open http://localhost:9000 which redirects you to http://localhost:5000. Or you open the UI directly
with http://localhost:5000. (Note that mongo must be already started)
Run in stage mode
To run the app in stage mode you can execute the following command:
sbt clean stage && bash target/universal/stage/bin/silhouette-play-react-seed -Dplay.http.secret.key=abcdefghijk
The application can now be served over the URL http://localhost:9000.
Build the application for production
This builds a RPM package which can be installed on all RPM based systems. The application uses SBT Native Packager to create the build. To create builds for other distributions, please follow the documentation. This app supports the packaging for RPM or DEB packages out of the box.
Build a RPM package
sbt clean rpm:packageBin
build a DEB package
sbt clean debian:packageBin
The application comes also with some build and deployment scripts located in the build folder. Adapt the
scripts to fit your needs.
Anatomy of the Play application
The Play application is based on SBT's Multi-project builds. Here comes a short overview over the available modules and their dependencies.
| Module | Description | Dependencies |
|---|---|---|
| test | Test related helpers | - |
| core | Code which is shared between modules | test % Test |
| auth | Authentication related code | core % Compile, test % Test |
| admin | A placeholder module for your code | auth % Compile and Test, test % Test |
All your custom modules should depend on the auth module, as long as it uses authentication based functionality.
The auth module comes with a test helper, so you must depend also in Test on this module.
The root module is located in the src directory of the project folder. It contains the base application code
and configuration.
Anatomy of the JavaScript application
The frontend application is a React/Redux application which will be packed with webpack. For side effecting code it uses Redux Saga which has some similarities to the Actor model. Some files are also type checked with Flow - a static type checker for JavaScript.