[2.5.x] Play, webpack and javascript frontends

[Gustavo Santos]

Hi Everyone,

I'm sure many of you use a javascript framework or library to help frontend development on your play applications. I have been trying to integrate webpack on one of our apps, so we can use ES6, linting, minification, etc of the javascript files. So far, the best option I found so far looks to be this: https://github.com/nouhoum/play-react-webpack

Is it a good option to completely separate the frontend and backend development, using a SPA? In our case, we use twirl views and the play router, so that wouldn't be an option without major refactoring.

I would love to know if there are easier or better ways to integrate the fronted using webpack and play as the backend, preferably while still using the play router and twirl views.

Thanks

Gustavo

[Will Sargent]

I know that BrowserSync and Play are a thing:

http://pauldijou.fr/blog/2014/08/05/browser-sync-play-framework/

--

Will Sargent

Engineer, Lightbend, Inc.

will.s...@lightbend.com

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to play-framework+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/db2ccb81-a71f-4451-b134-071680bbd5c7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Gustavo Santos]

I've never had heard about browsersync before, thanks!

On Friday, August 5, 2016 at 8:12:47 PM UTC+1, Will Sargent wrote:

I know that BrowserSync and Play are a thing:

http://pauldijou.fr/blog/2014/08/05/browser-sync-play-framework/

--

Will Sargent

Engineer, Lightbend, Inc.

will.s...@lightbend.com

On Fri, Aug 5, 2016 at 10:05 AM, Gustavo Santos <gustav...@gmail.com> wrote:

Hi Everyone,

I'm sure many of you use a javascript framework or library to help frontend development on your play applications. I have been trying to integrate webpack on one of our apps, so we can use ES6, linting, minification, etc of the javascript files. So far, the best option I found so far looks to be this: https://github.com/nouhoum/play-react-webpack

Is it a good option to completely separate the frontend and backend development, using a SPA? In our case, we use twirl views and the play router, so that wouldn't be an option without major refactoring.

I would love to know if there are easier or better ways to integrate the fronted using webpack and play as the backend, preferably while still using the play router and twirl views.

Thanks

Gustavo

--
You received this message because you are subscribed to the Google Groups "play-framework" group.

To unsubscribe from this group and stop receiving emails from it, send an email to play-framewor...@googlegroups.com.

[Arlo White]

I'm also starting work on an SPA.

I want to use Angular2 and TypeScript, so I started with:

https://www.lightbend.com/activator/template/play-angular2-typescript

This template is pure SBT. Compiles TypeScript with sbt-typescript and pulls in JavaScript libs via WebJars.

However, so far I'm not a fan of WebJars. I added NPM packages for d3 and it was a pain:

• WebJars does not pull in dependencies of the package you add. (Had to add like 20 submodules for d3)
• The Add NPM WebJAR feature fails ~10-20% of the time for no particular reason and you have to try them again
• It takes a few hours for the dependency to become available.

It's not clear to me what value you get from WebJars. Why not directly access NPM?

So I'm tempted to evaluate webpack and other options.

[Ala Schneider]

This link explains a simple solution we used in our project 

[Gustavo Santos]

For anyone interested, I created a seed project with play, webpack and vue.js here: https://github.com/jbaysolutions/play-webpack-vue-seed

I wasn't able to get hot reload to work yet, if anyone knows a way to do it, feel free to submit a merge request.

Another thing I found is a zombie node process that's left when I stop running activator, on Windows at least.

Gustavo

[tan...@gmail.com]

I'm late to the party. At GIVE.asia, a while ago, we've made a sbt plugin that hot-reloads *.vue to *.js during `sbt run`. We currently have ~200 Vue's single file components.

We've recently just made it support Typescript as well. 

See: https://github.com/GIVESocialMovement/sbt-vuefy and https://give.engineering/2018/06/05/vue-js-with-playframework.html

Please let me know if you have any question.