• Example Search
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

Project: play-webpack-typescript-react (GitHub Link)

• play-webpack-typescript-react-master
  • src
    • main
      • resources
        • application-dev.conf
        • application.conf
        • logback.xml
        • routes
      • twirl
        • views
          • main.scala.html
          • index.scala.html
      • public
        • images
          • .gitkeep
        • js
          • .gitkeep
        • css
          • .gitkeep
      • scala
        • services
          • ApplicationTimer.scala
          • Counter.scala
        • MyGuiceApplicationLoader.scala
        • controllers
          • HomeController.scala
          • CountController.scala
          • AsyncController.scala
        • Module.scala
        • filters
          • ExampleFilter.scala
      • typescript
        • index.tsx
        • HelloWorld.tsx
      • sass
        • _bootstrap.scss
        • main.scss
      • assets
        • js
          • .gitkeep
        • css
          • .gitkeep
    • test
      • scala
        • ApplicationSpec.scala
        • IntegrationSpec.scala
      • typescript
        • HelloWorldTest.tsx
  • tslint.json
  • postcss.config.js
  • .stylelintrc
  • LICENSE
  • project
    • build.properties
    • Webpack.scala
    • plugins.sbt
  • .eslintrc
  • .editorconfig
  • webpack.config.js
  • .babelrc
  • browserslist
  • README.md
  • .scalafmt.conf
  • jestPreProcessor.js
  • package.json
  • build.sbt
  • tsconfig.json
  • .gitignore
  • web_loaders
    • tsfmt-loader.js
  • .vscode
    • settings.json
    • launch.json
    • extensions.json

Play Framework, Webpack, TypeScript, React with Hot Module Reloading, ...

A Play seed project with some useful plugins and a state of the art frontend setup based on Webpack, TypeScript and React.

Note: If you prefer the classic layout of a Play application, check out the first commit of this repository.

Content:

Backend:

• Play Framework
• scoverage
• scalafmt
• scapegoat
• linter
• wartremover
• sbt-coursier

Frontend:

• Webpack with webpack-dashboard
• Browsersync
• TypeScript (with TypeDoc)
• React (with hot module reloading via React Hot Loader 3)
• Awesome TypeScript Loader (which includes caching)
• TSLint
• Jest (includes test coverage)
• Sass
• PostCSS (autoprefixer and cssnano are enabled by default)
• stylelint

Usage:

Webpack is fully integrated into sbt.

Whenever you run Play in development mode (via run) it will listen to http://localhost:9000 and webpack-dev-server will proxy this at http://localhost:2992.

Browsersync will proxy webpack-dev-server at http://localhost:3000 with its UI being available at http://localhost:3001 and http://0.0.0.0:3000 being the external address.

Whenever you run Play in production mode (via dist, stage or start) webpack will generate optimized builds, which get included automatically (including asset fingerprinting and gzipping).

The plugins scalafmt, linter and wartremover are integrated into compilation. scapegoat must be run manually by running scapegoat within sbt.

Testing:

Tests with Jest can be run with

$ npm test

There are also options to generate test coverage or do ongoing testing, whenever some source file changes (similiar to ~test in sbt).

Last but not least:

This project has absolutely no claim to be complete or to be the single answer to everything. It merely exists cause I got tired of creating such a setup each time from scratch and because it allows for easy modification - like adding more optimizations to the frontend release builds.

Any pull requests are totally welcome :)