Version assets

.dockerignore

@@ -1,2 +1,3 @@
 /var
 /vendor
+/web/assets

.gitignore

@@ -4,3 +4,4 @@
 /tests/acceptance.suite.yml
 /tests/unit.suite.yml
 /vendor
+/web/assets

README.md

@@ -33,19 +33,19 @@ The sections
 [Transition to Microservices](#transition-to-microservices)
 and
 [Scale-Out the application](#scale-out-the-application)
-describe whats done to apply these concepts.
+describe what's done to apply these concepts.
 
 ## Installation and requirements
 
-I recommend to use
-[Docker](https://www.docker.com),
-[Docker Compose](https://docs.docker.com/compose/).
-You can also set up a stack yourself.
+[Docker](https://www.docker.com)
+and
+[Docker Compose](https://docs.docker.com/compose/)
+for deploying the application.
 
-Since I use the latest JavaScript techniques, like ECMAScript 6, it doesn't work in all browsers.
-You could see that I don't use a bundler. This is intentional because I use ECMAScript 6 modules
-and I want to keep the tooling small.
-Please don't look at the front end design, this is by no means my domain.
+A modern browser, as this project uses modern features and doesn't polyfill all of them, e.g.
+[Server-sent events](https://caniuse.com/eventsource)
+and
+[Custom Elements](https://caniuse.com/custom-elementsv1).
 
 ### Development
 
@@ -122,7 +122,7 @@ If authors are assigned to a chat, only those authors can write and read message
 The public interface is formed by a
 [controller](/src/Chat/Presentation/Http/ChatController.php),
 which can be called up via http, and a
-[message consumer](/src/Chat/Infrastructure/Messaging/CommandConsumer.php),
+[message handler](/src/Chat/Infrastructure/Messaging/CommandMessageHandler.php),
 which serves as an interface to a message broker.
 
 This context publishes
@@ -205,7 +205,7 @@ There's also a
 [Process Manager](http://www.enterpriseintegrationpatterns.com/patterns/messaging/ProcessManager.html)
 involved.
 Its name is referee and it's a
-[message consumer](/src/ConnectFour/Port/Adapter/Messaging/RefereeConsumer.php).
+[message handler](/src/ConnectFour/Port/Adapter/Messaging/RefereeMessageHandler.php).
 The referee picks up a player joined event and ensures, that a chat is initiated.
 When the chat is initiated, it assigns the chat to the game.
 This is done, so the storage of games and chats can be on different MySQL instances.

composer.json

@@ -39,6 +39,7 @@
     "psr/event-dispatcher": "^1.0",
     "psr/log": "^3.0",
     "symfony/asset": "^6.3",
+    "symfony/asset-mapper": "^6.3",
     "symfony/clock": "^6.2",
     "symfony/config": "^6.3",
     "symfony/console": "^6.3",
@@ -78,5 +79,8 @@
       "composer/package-versions-deprecated": true,
       "phpstan/extension-installer": true
     }
+  },
+  "extra": {
+    "public-dir": "/web"
   }
 }

config/config.yml

@@ -16,6 +16,11 @@ framework:
         enabled: true
     router:
         resource: "%kernel.project_dir%/config/routing.yml"
+    asset_mapper:
+        importmap_path: "%kernel.project_dir%/config/importmap.php"
+        importmap_polyfill: false # It's manually added to the base template (with feature detection).
+        paths:
+            - assets/
 
 monolog:
     handlers:

config/importmap.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace {
+
+    use Symfony\Component\Finder\Finder;
+
+    $projectDirectory = dirname(__DIR__);
+
+    require_once $projectDirectory . '/vendor/autoload.php';
+
+    $finder = Finder::create()
+        ->files()
+        ->in($projectDirectory . '/config/*')
+        ->name('importmap.php');
+
+    $map = [
+        'app' => ['path' => 'js/app.js', 'preload' => true]
+    ];
+
+    foreach ($finder as $file) {
+        $map = array_merge($map, require $file->getRealPath());
+    }
+
+    return $map;
+}

deploy/single-server/docker-compose.yml

@@ -44,7 +44,6 @@ services:
             - "80:80"
         depends_on:
             - nchan
-            - service-js-polyfill
             - web-interface-http
         volumes:
             - /var/run/docker.sock:/var/run/docker.sock
@@ -151,15 +150,6 @@ services:
             - "traefik.http.routers.nchan.rule=PathPrefix(`/sse`)"
             - "prometheus-job=nchan"
             - "prometheus-port=81"
-    service-js-polyfill:
-        image: gamingplatform/service-js-polyfill
-        restart: on-failure
-        labels:
-            - "traefik.enable=true"
-            - "traefik.http.routers.service-js-polyfill.priority=20"
-            - "traefik.http.routers.service-js-polyfill.rule=PathPrefix(`/polyfill`)"
-            - "traefik.http.routers.service-js-polyfill.middlewares=service-js-polyfill-stripprefix"
-            - "traefik.http.middlewares.service-js-polyfill-stripprefix.stripprefix.prefixes=/polyfill"
     web-interface-http:
         <<: *php-container
         labels:

docker-compose.yml

@@ -35,7 +35,6 @@ services:
             - "80:80"
         depends_on:
             - nchan
-            - service-js-polyfill
             - php-fpm
         volumes:
             - /var/run/docker.sock:/var/run/docker.sock
@@ -158,18 +157,10 @@ services:
             - "traefik.http.routers.nchan.rule=PathPrefix(`/sse`)"
             - "prometheus-job=nchan"
             - "prometheus-port=81"
-    service-js-polyfill:
-        image: gamingplatform/service-js-polyfill
-        restart: on-failure
-        labels:
-            - "traefik.enable=true"
-            - "traefik.http.routers.service-js-polyfill.priority=20"
-            - "traefik.http.routers.service-js-polyfill.rule=PathPrefix(`/polyfill`)"
-            - "traefik.http.routers.service-js-polyfill.middlewares=service-js-polyfill-stripprefix"
-            - "traefik.http.middlewares.service-js-polyfill-stripprefix.stripprefix.prefixes=/polyfill"
     php-fpm:
         <<: *php-container
         volumes:
+            - ./assets:/project/assets:delegated
             - ./config:/project/config:delegated
             - ./src:/project/src:delegated
             - ./tests:/project/tests:delegated

docker/php-fpm/entrypoint.sh

@@ -2,7 +2,12 @@
 
 set -e
 
-bin/console cache:warmup --env="${APP_ENVIRONMENT}"
+bin/console cache:warmup
+
+if [ "${APP_ENVIRONMENT}" = "prod" ]
+then
+    bin/console asset-map:compile
+fi
 
 if [ "${APP_WAIT_FOR}" != "" ]
 then

src/WebInterface/Presentation/Http/View/base.html.twig

@@ -3,18 +3,16 @@
 <head>
     <title>Gaming</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/img/icon/apple-touch-icon.png') }}"/>
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/img/icon/favicon-32x32.png') }}"/>
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/img/icon/favicon-16x16.png') }}"/>
-    <link rel="manifest" href="{{ asset('assets/img/icon/site.webmanifest') }}"/>
-    <link rel="mask-icon" href="{{ asset('assets/img/icon/safari-pinned-tab.svg') }}" color="#427280"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('icon/apple-touch-icon.png') }}"/>
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('icon/favicon-32x32.png') }}"/>
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('icon/favicon-16x16.png') }}"/>
+    <link rel="manifest" href="{{ asset('icon/site.webmanifest') }}"/>
+    <link rel="mask-icon" href="{{ asset('icon/safari-pinned-tab.svg') }}" color="#427280"/>
     <meta name="msapplication-TileColor" content="#da532c"/>
     <meta name="theme-color" content="#ffffff"/>
-    <link rel="stylesheet" href="{{ asset('assets/css/main.css') }}"/>
-    <script type="text/javascript">
-        {# Load polyfills if necessary. #}
-        !function(){function n(n,e,t){var o=document.createElement("script");o.type=e,o.src=n,o.onload=t||function(){},document.head.appendChild(o)}function e(){n("{{ asset('assets/js/main.js') }}","module")}window.EventSource&&window.customElements?e():n("/polyfill/polyfill.min.js?packages=CustomElements,EventSource","text/javascript",e)}();
-    </script>
+    <link rel="stylesheet" href="{{ asset('css/app.css') }}"/>
+    <script>if(!HTMLScriptElement.supports||!HTMLScriptElement.supports('importmap')){let t=document.createElement('script');t.setAttribute('async','');t.setAttribute('src','https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js');document.currentScript.replaceWith(t)}</script>
+    {{ importmap() }}
 </head>
 <body>
 <notification-list></notification-list>

web/assets/img/icon/site.webmanifest → web/icon/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "Gaming Platform",
     "icons": [
         {
-            "src": "/assets/img/icon/android-chrome-192x192.png",
+            "src": "icon/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/assets/img/icon/android-chrome-512x512.png",
+            "src": "icon/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }