install the AssetMapper recipe

.gitignore

@@ -20,4 +20,8 @@
 npm-debug.log
 yarn-error.log
 ###< symfony/webpack-encore-bundle ###
-composer.lock
+composer.lock
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###

composer.json

@@ -86,7 +86,8 @@
     "scripts": {
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+            "assets:install %PUBLIC_DIR%": "symfony-cmd",
+            "importmap:install": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"

config/packages/asset_mapper.yaml

@@ -0,0 +1,5 @@
+framework:
+    asset_mapper:
+        # The paths to make available to the asset mapper.
+        paths:
+            - assets/

importmap.php

@@ -0,0 +1,19 @@
+<?php
+
+/**
+ * Returns the importmap for this application.
+ *
+ * - "path" is a path inside the asset mapper system. Use the
+ *     "debug:asset-map" command to see the full list of paths.
+ *
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ *     be used as an "entrypoint" (and passed to the importmap() Twig function).
+ *
+ * The "importmap:require" command can be used to add new entries to this file.
+ */
+return [
+    'app' => [
+        'path' => './assets/app.js',
+        'entrypoint' => true,
+    ],
+];

symfony.lock

@@ -119,9 +119,6 @@
     "psr/event-dispatcher": {
         "version": "1.0.0"
     },
-    "psr/event-dispatcher": {
-        "version": "1.0.0"
-    },
     "psr/link": {
         "version": "1.1.1"
     },
@@ -146,6 +143,21 @@
     "symfony/asset": {
         "version": "v5.4.0"
     },
+    "symfony/asset-mapper": {
+        "version": "7.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.4",
+            "ref": "6c28c471640cc2c6e60812ebcb961c526ef8997f"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/asset_mapper.yaml",
+            "importmap.php"
+        ]
+    },
     "symfony/browser-kit": {
         "version": "v5.4.0"
     },
@@ -282,18 +294,6 @@
             "config/packages/lock.yaml"
         ]
     },
-    "symfony/lock": {
-        "version": "6.0",
-        "recipe": {
-            "repo": "github.com/symfony/recipes",
-            "branch": "master",
-            "version": "5.2",
-            "ref": "a1c8800e40ae735206bb14586fdd6c4630a51b8d"
-        },
-        "files": [
-            "config/packages/lock.yaml"
-        ]
-    },
     "symfony/mailer": {
         "version": "5.4",
         "recipe": {
@@ -435,9 +435,6 @@
     "symfony/proxy-manager-bridge": {
         "version": "v5.4.0"
     },
-    "symfony/rate-limiter": {
-        "version": "v5.4.0"
-    },
     "symfony/rate-limiter": {
         "version": "v6.0.0"
     },
@@ -525,9 +522,6 @@
             "templates/base.html.twig"
         ]
     },
-    "symfony/uid": {
-        "version": "v5.4.0"
-    },
     "symfony/uid": {
         "version": "v6.0.0"
     },

templates/base.html.twig

@@ -10,6 +10,7 @@
         {% endblock %}
 
         {% block javascripts %}
+            {% block importmap %}{{ importmap('app') }}{% endblock %}
             {#{{ encore_entry_script_tags('app') }}#}
         {% endblock %}
     </head>