如何结合play框架和angular2？

Question

我的问题是关于如何在项目中组织正面和背面.据我所知,有两种方法可以做到这一点

1. 使用web-jars依赖项和sbt插件将前端和后端组合在一个项目中.因此,SBT将运行像所有必要的操作uglify,concat,compilation(typescript到javascript)...
2. 将正面和背面分开并单独展开.在这种情况下,后端必须添加标头Access-Control-Allow-Origin.这样,正面和背面可以部署在2个不同的主机中.要使用的工具是npm和gulp/grunt
3. 混合1和2.仍然使用相同的存储库用于正面和背面,但正面是由外部工具构建和生成的,如npm,bower和gulp/grunt

目前,选项2和3没有很多文档.此外,该typescript插件还没有准备好.

哪种方式更适合scala play + angular2开发？

Answer 1

我最近一直在使用几个Angular和Angular 2应用程序并处理类似的问题.对于所有场景,我们的后端和前端应用程序在代码方面是分开的,并且仅通过REST接口进行通信.尽管如此,我们提供了前端和后端部分,并且使用一个托管服务器(可以是Play Framework或Tomcat)也很自然.

选项#1 一开始,我们选择了这个.Webjars看起来像一个奇迹,几个sbt或maven插件可以帮助您进行前端项目的缩小,编译,linting等.对某些人来说这可能会很顺利.不幸的是,我发现这个工作流程不自然.一些插件丢失或配置困难.Webjars并不总是最新的,其中一些是自动可用的,一些不是......等等.在一个简单的项目中它可能有用,但对我来说,这还不够.

选项#2 我们尝试过单独的服务器进行开发,但我们快速退出.对于大多数操作,您仍然需要您的前端和后端服务器.所以你必须从两个开始.这意味着你有2倍以上的命令或工作流来记住和教导他人.CORS不是一个大问题,但您可以考虑禁用它进行生产,这意味着项目中的额外工作.单独开发后端或前端这种方式更快,但在我看来,如果你要同时提供这两者 - 你的开发过程应该帮助你.

选项#3 这是我们正在使用的那个.随着sbt它是可能和方便的.SbtWeb插件允许您设置playRunHooks您希望与项目一起运行的任何操作.我们的想法是运行一个JavaScript构建工具,它将执行所有必要的前端作业,fe:

playRunHooks += {
  Process(Seq("npm", "install"), file(portal)).lines.foreach(println)
  RunSubProcess(portal, "npm", "run", "watch")
}

RunSubProcess可以在这里找到.

因此,简而言之,您可以让Play Server为您的静态内容提供服务,但忽略其变化.这是由照顾npm,gulp,webpack,grunt不管你选择- .有很多JavaScript构建工具,插件和模板可以帮助您.您不需要任何sbt插件,只需允许JavaScript世界完成其工作.一开始可能很难设置但很快得到回报.

作为一个示例项目,您可能需要查看带有Angular 2和Webpack 2的 Activator模板Play Framework,它的项目托管在GitHub上:play-ng2-webpack2.它帮了我一点.

现在也可以使用Tomcat,xsbt-web-plugin和developmentMode.哲学是相似的.

希望你找到自己的方式:).