Использование frontend в gsp

Связи
  • jandcode.core.web.std.gsp.JsIndexGspContext (class)
  • jandcode.core.apx.web.gsp.FrontendIndexGspContext (class)

После сборки модуля frontend, мы имеем каталог frontend/_gen/frontend, в котором имеется собранное клиентское приложение. Теперь необходимо подключить этот собранный код к генерируемой с помощью gsp странице html.

Конечно, можно воспользоваться плагином HtmlWebpackPlugin, однако на практике чаще нужно полностью управлять генерацией страницы, к которой подключается клиенский код.

Пример, как это можно сделать:

<%@ page import="jandcode.core.apx.web.gsp.*; jandcode.core.web.gsp.*;jandcode.core.web.std.gsp.*;" %>
<!doctype html>
<%
  /*
    Запуск entry main из сгенерированного webpack приложения
   */

  BaseGsp th = this
  //
  def ctx = th.inst(JsIndexGspContext)
  def wpCtx = th.inst(FrontendIndexGspContext)
  //
  ctx.title = "Jandcode Samples Jsmodules1"
  // добавляем в ссылки entry с именем 'main'
  wpCtx.addLink("main")
%>
<html>
<head>
  <meta charset="UTF-8">
  <title>${ctx.title}</title>
  <link rel="icon" href="data:,">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="jc-app"></div>
%{-- выводим все ссылки, которые были добавлены в addLink выше--}%
<% ctx.outLinks() %>
%{-- выводим запуск entry, фактически генерируется JcEntry.run() --}%
<script>
    ${wpCtx.libraryName}.run()
</script>
</body>
</html>

Класс JsIndexGspContext знает про наличие и формат entrypoints-manifest.json и с использованием этой информации правильно генерирует подключение скриптов.