Light

gbogard / play-vue-webpack Goto Github PK

View Code? Open in Web Editor NEW

47.0 7.0 16.0 125 KB

Play Framework (Scala) + Vue.js + Webpack boilerplate

Scala 52.38% HTML 5.32% CSS 1.61% Vue 8.84% JavaScript 31.84%

webpack boilerplate starter-kit play-framework vue vuejs

play-vue-webpack's Introduction

Play Framework + Vue.js starter

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.

How to use

Download the project.

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.

Production mode

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.

Long-term caching

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.

Configuration

conf/frontend.conf

webpack.port

Allows you to change the port Webpack-dev-server is running on. (default 8080)

Contribute

Contribution are welcome if you know how to improve this project.

play-vue-webpack's People

Contributors

Stargazers

Watchers

Forkers

don41382 thanhphamvan aniamer eximius313 letusfly85 halkhalil jhonfx rvran01 rozkerim hiroki1117 goldeneyezhang jamestung1990 nsb83 corkine kinshotomoya

play-vue-webpack's Issues

Please upgrade to SBT 1.0

Sbt has dropped support for Process (which is used in project/WebpackServer.scala)
http://www.scala-sbt.org/1.x/docs/Process.html
Could you please migrate it?

Adding vue-router to the frontend

@gbogard Thanks for making this project. I was wondering if you have any suggestions on how to add a vue-router in order to make a single-page-app frontend. I already tried but it doesn't seem to be working. visiting localhost:9000/ just returns a blank page - no errors in the terminal or browser console.

Reading Configuration by parseFile seems to be wrong

Reading Configuration by parseFile seems to be wrong and it also throws exception when running Stage.
I'd suggest to:

Insert include "frontend.conf" at the end of application.conf file
Replace:

class FrontController @Inject() (cc: ControllerComponents, env: Environment) extends AbstractController(cc){
  val config: Config = ConfigFactory.parseFile(new File("conf/frontend.conf")).resolve()

  def index = Action {
    Ok(views.html.index.render(env, config.getInt("webpack.port"), WebpackBuildFile.jsBundle, WebpackBuildFile.cssBundle))
  }
}

with

class FrontController @Inject() (cc: ControllerComponents, env: Environment, config: Configuration) extends AbstractController(cc){
  def index = Action {
    Ok(views.html.index.render(env, config.get[Int]("webpack.port"), WebpackBuildFile.jsBundle, WebpackBuildFile.cssBundle))
  }
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.