A Silhouette Seed template which shows how Silhouette can be used to create a SPA with React/Redux and Play
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app-admin/src/main
app-auth/src
app-core/src
app-test/src/main/scala/test
app-ui
build
project
scripts
src
.gitignore
.scalariform.conf
LICENSE
README.md
build.sbt
scalastyle-config.xml

README.md

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.