This is a modern Play Framework + Vue.js (v2) boilerplate that uses Webpack to load front-end modules and provide hot reloading.
In production mode, it has proper long-term caching, minified and gzip-compressed css and js bundles
It supports SASS and includes Bootstrap 4 by default. (Bootstrap may easily be removed or replaced though).
It works out-of-the-box.
Install the front-end dependencies.
cd front && npm install
Launch the project
sbt ~run
The front-end code entry point is located in front/app.js
. This is where you can import your modules
and declare your Vue components.
SASS stylesheets are located in the front/sass
folder.
The main stylesheet is front/sass/style.scss
. It's imported by default.
Vue single-file components are located in front/src/components
.
This boilerplate uses Webpack-dev-server to provide hot-reloading during development.
The Play application is in the app
folder. The FrontController
is responsible for
serving the index page, with dev or production bundles depending on the current environment.
Use sbt dist
to create zip archive containing your application. This will also trigger
the front-end build.
To launch the front-end build manually you can run sbt frontEndBuild
.
In production mode, CSS and JS are split into two different files. Thanks to gzip compression, the default js bundle is less than 23kb.
Production bundles have a unique hash in their name, allowing long-term caching without any risk of keeping an old build in the browser's cache.
The lib/WebpackBuildFile
object is responsible for determining the full
name of the CSS and JS bundles.
Allows you to change the port Webpack-dev-server is running on. (default 8080)
Contribution are welcome if you know how to improve this project.