I'm trying with my best to complete it.
This is a modern Play Framework + Vue.js (v2) + TypeScript boilerplate that uses Webpack to load front-end modules and provide hot reloading.
Using it with TypeScript, the Vue Component become strong-typed which leave rest of the TypeScript compiler and Webpack loader to do the rest.
Using with TypeScript also comes with an cons, that the Vue Component become harder to be defined, it need to be in namespace/package with many modules define and html/scss templates.
In production mode, it has proper long-term caching, minified and gzip-compressed css and js bundles (The gzip isn't working right now and will be ready in future updates)
It supports SASS and includes Bootstrap 4 by default. (Bootstrap may easily be removed or replaced though).
It works out-of-the-box. (Errr i am not sure about it right now. Maybe in future updates ?)
Just clone this project.
git clone https://github.com/thanhphamvan/play-scala-vue-typescript-webpack.git
Install the front-end dependencies.
cd front && npm install
Launch the project
sbt ~run
The above sbt build comes with webpack-dev-server for hot-reloading in dev mode. That means the request for assets and js files will be handled by webpack-dev-server, not the PlayFramework. In that case, the Play is a router, not fully-functional web back-end.
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.
Vue components are located in front/src/components. Each of them comes with a unique namespace.
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. (lets make clear, gzip is not working right now in my merge, but will be on future updates)
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.
see conf/application.conf and conf/frontend.con.
Play Framework default config file.
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.