Chore(web-twig): Build assets for demo app

refs #DS-299

apps/web-twig-demo/.gitignore

@@ -8,3 +8,10 @@
 /var/
 /vendor/
 ###< symfony/framework-bundle ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

apps/web-twig-demo/assets/app.js

@@ -0,0 +1,10 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.scss';
+// import '@lmc-eu/spirit-web/js/bundle/spirit-web.bundle.js';

apps/web-twig-demo/assets/styles/app.scss

@@ -0,0 +1 @@
+@forward '@lmc-eu/spirit-web/src/scss/';

apps/web-twig-demo/composer.json

@@ -19,12 +19,14 @@
     "ext-ctype": "*",
     "ext-iconv": "*",
     "lmc/spirit-web-twig-bundle": "^1.27",
+    "symfony/asset": "5.4.*",
     "symfony/console": "5.4.*",
     "symfony/dotenv": "^5.4",
     "symfony/flex": "^1",
     "symfony/framework-bundle": "^5.4",
     "symfony/runtime": "^5.4",
     "symfony/twig-bundle": "5.4.*",
+    "symfony/webpack-encore-bundle": "^1.16",
     "symfony/yaml": "^5.4"
   },
   "config": {

apps/web-twig-demo/config/bundles.php

@@ -4,4 +4,5 @@
     Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
     Lmc\SpiritWebTwigBundle\SpiritWebTwigBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

apps/web-twig-demo/config/packages/webpack_encore.yaml

@@ -0,0 +1,44 @@
+webpack_encore:
+  # The path where Encore is building the assets - i.e. Encore.setOutputPath()
+  output_path: '%kernel.project_dir%/public/build'
+  # If multiple builds are defined (as shown below), you can disable the default build:
+  # output_path: false
+
+  # Set attributes that will be rendered on all script and link tags
+  script_attributes:
+    defer: true
+    # Uncomment (also under link_attributes) if using Turbo Drive
+    # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+    # 'data-turbo-track': reload
+  # link_attributes:
+  # Uncomment if using Turbo Drive
+  # 'data-turbo-track': reload
+
+  # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
+  # crossorigin: 'anonymous'
+
+  # Preload all rendered script and link tags automatically via the HTTP/2 Link header
+  # preload: true
+
+  # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
+  # strict_mode: false
+
+  # If you have multiple builds:
+  # builds:
+  # frontend: '%kernel.project_dir%/public/frontend/build'
+
+  # pass the build name as the 3rd argument to the Twig functions
+  # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+framework:
+  assets:
+    json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+#when@prod:
+#    webpack_encore:
+#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+#        # Available in version 1.2
+#        cache: true
+
+#when@test:
+#    webpack_encore:
+#        strict_mode: false

apps/web-twig-demo/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@lmc-eu/spirit-web-twig-demo",
+  "version": "1.0.0",
+  "description": "Spirit Web Twig Demo",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@babel/preset-env": "^7.16.0",
+    "@hotwired/stimulus": "^3.0.0",
+    "@lmc-eu/spirit-web": "^0.43.0",
+    "@symfony/stimulus-bridge": "^3.2.0",
+    "@symfony/webpack-encore": "^4.0.0",
+    "core-js": "^3.23.0",
+    "regenerator-runtime": "^0.13.9",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-notifier": "^1.15.0"
+  },
+  "scripts": {
+    "dev-server": "encore dev-server",
+    "dev": "encore dev",
+    "watch": "encore dev --watch",
+    "build": "encore production --progress"
+  }
+}

apps/web-twig-demo/public/css/demo.css

@@ -0,0 +1,75 @@
+.docs-TileLink {
+  display: block;
+  padding: 1rem;
+  border: 2px solid #e9e9e9;
+  border-radius: 8px;
+  font-size: 1.125rem; /* Based on the `body-large-text-regular` style. */
+  font-weight: 600;
+  line-height: 1.55;
+}
+
+.docs-TileLink:hover,
+.docs-TileLink:focus {
+  border-color: #dbdbdb;
+}
+
+.docs-TileLink:active {
+  border-color: #d4d4d4;
+}
+
+.docs-Section:not(:last-child) {
+  margin-bottom: 2.5rem;
+}
+
+.docs-Heading {
+  margin-bottom: 1.5rem;
+  font-size: 1.125rem; /* Based on the `heading-small-text` style. */
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.docs-Box {
+  min-height: 2rem;
+  padding: 1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  background: #0b1c21;
+}
+
+.docs-Box--small {
+  font-size: 0.75rem;
+  text-align: center;
+  white-space: normal;
+}
+
+.docs-FormFieldGrid {
+  display: grid;
+  grid-template-columns: 25rem;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .docs-TileLink {
+    padding: 1.5rem;
+  }
+
+  .docs-Section:not(:last-child) {
+    margin-bottom: 4rem;
+  }
+
+  .docs-Heading {
+    font-size: 1.5rem;
+  }
+
+  .docs-Box--small {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .docs-Box--small {
+    font-size: 1rem;
+  }
+}

apps/web-twig-demo/symfony.lock

@@ -108,5 +108,24 @@
             "config/packages/twig.yaml",
             "templates/base.html.twig"
         ]
+    },
+    "symfony/webpack-encore-bundle": {
+        "version": "1.16",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "1.10",
+            "ref": "f8fc53f1942f76679e9ee3c25fd44865355707b5"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/bootstrap.js",
+            "assets/controllers.json",
+            "assets/controllers/hello_controller.js",
+            "assets/styles/app.css",
+            "config/packages/webpack_encore.yaml",
+            "package.json",
+            "webpack.config.js"
+        ]
     }
 }

apps/web-twig-demo/templates/layout/base.html.twig

@@ -13,10 +13,11 @@
     >
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
-    <link rel="stylesheet" href="/src/scss/index.scss">
-    <link rel="stylesheet" href="/assets/demo.css">
+    {{ encore_entry_link_tags('app') }}
+    <link rel="stylesheet" href="{{ asset('css/demo.css') }}">
 
     <script src="/src/js/index.esm.ts" type="module"></script>
+    {{ encore_entry_script_tags('app') }}
 
   </head>
   <body>