Migrating from Webpack Encore to AssetMapper

.dockerignore

@@ -13,12 +13,10 @@ vendor
 phpunit.xml
 ###< symfony/phpunit-bridge ###
 
-###> symfony/webpack-encore-bundle ###
-node_modules
-public/build
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###
 
 .dockerignore
 .DS_Store

.github/workflows/build.yml

@@ -44,13 +44,7 @@ jobs:
             - name: Install dependencies
               run: composer install --optimize-autoloader --no-interaction --no-progress
 
-            - name: Use Node.js
-              uses: actions/setup-node@v3
-              with:
-                node-version: 18
-
-            - run: npm install
-            - run: npm run build
+            - run: bin/console asset-map:compile
 
             - run: sudo chown -R $USER:$USER /home/runner/work/elasticsearch-admin/elasticsearch-admin
             - run: bin/console app:phpunit

.gitignore

@@ -20,17 +20,15 @@
 .phpunit.result.cache
 ###< phpunit/phpunit ###
 
-###> symfony/webpack-encore-bundle ###
-/node_modules/
-/public/build/
-npm-debug.log
-yarn-error.log
-###< symfony/webpack-encore-bundle ###
-
 ###> app ###
 .env
 .php_cs.cache
 .php-cs-fixer.cache
 info.json
 public/.htaccess
 ###< app ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###

.travis.yml

@@ -25,8 +25,7 @@ env:
 
 install:
     - composer install
-    - npm install
-    - npm run build
+    - bin/console asset-map:compile
 
 script:
     - bin/console app:phpunit

Dockerfile

@@ -18,10 +18,10 @@ ENV SECRET_REGISTER=$SECRET_REGISTER
 RUN apk --no-cache add php82 php82-fpm php82-opcache php82-json php82-openssl php82-curl php82-zlib php82-fileinfo \
     php82-xml php82-simplexml php82-phar php82-intl php82-dom php82-xmlreader php82-ctype php82-session php82-gd \
     php82-tokenizer php82-pdo php82-pdo_mysql php82-pdo_pgsql php82-iconv php82-zip php82-gmp php82-mbstring php82-xmlwriter \
-    nginx supervisor nodejs npm curl
+    nginx supervisor curl
 
 # Create symlink so programs depending on `php` still function
-#RUN ln -s /usr/bin/php82 /usr/bin/php
+RUN ln -s /usr/bin/php82 /usr/bin/php
 
 # Configure nginx
 COPY docker/nginx.conf /etc/nginx/nginx.conf
@@ -37,12 +37,11 @@ COPY docker/php.ini /etc/php82/conf.d/custom.ini
 COPY docker/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
 
 # Create folders
-RUN mkdir -p /var/www/html && mkdir -p /.composer && mkdir -p /.npm
+RUN mkdir -p /var/www/html && mkdir -p /.composer
 
 # Make sure files/folders needed by the processes are accessable when they run under the nobody user
 RUN chown -R nobody.nobody /var/www/html && \
   chown -R nobody.nobody /.composer && \
-  chown -R nobody.nobody /.npm && \
   chown -R nobody.nobody /etc/nginx && \
   chown -R nobody.nobody /run && \
   chown -R nobody.nobody /var/lib/nginx && \
@@ -61,8 +60,7 @@ COPY --from=composer /usr/bin/composer /usr/bin/composer
 # Run composer install to install the dependencies
 RUN composer install --optimize-autoloader --no-interaction --no-progress --no-dev
 
-RUN npm install
-RUN npm run build
+RUN bin/console asset-map:compile
 
 COPY --chown=nobody .env.dist .env
 

assets/js/app.js → assets/app.js

@@ -1,3 +1,12 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.min.css';
+import './styles/app.css';
+
+import { Dropdown, Modal, Toast } from 'bootstrap';
+
+const dropdownElementList = document.querySelectorAll('.dropdown-toggle');
+const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new Dropdown(dropdownToggleEl));
+
 (() => {
     'use strict'
 
@@ -53,23 +62,17 @@
     })
 })();
 
-require('jquery');
-global.$ = global.jQuery = $;
+import $ from 'jquery';
 
-require('bootstrap');
+import saveAs from 'file-saver';
+
+import slug from 'slug';
 
-import { saveAs } from 'file-saver';
-var slug = require('slug');
 slug.charmap['/'] = '-';
 slug.charmap['?'] = '-';
 slug.charmap['='] = '-';
-global.slug = slug;
-
-global.sleep = function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
 
-global.createToast = function createToast(body) {
+var createToast = function createToast(body) {
     var toast = `<div class="toast bg-dark text-light border border-secondary" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-body">
             ${body}
@@ -108,12 +111,12 @@ if (buttonInstall) {
     });
 }
 
-global.serviceWorkerEnabled = false;
+var serviceWorkerEnabled = false;
 
 if('serviceWorker' in navigator && 'https:' == window.location.protocol) {
     navigator.serviceWorker.register(app_base_url + 'serviceworker.js')
     .then(function(ServiceWorkerRegistration) {
-        global.serviceWorkerEnabled = true;
+        serviceWorkerEnabled = true;
 
         if (buttonInstall) {
             var standalone = window.matchMedia('(display-mode: standalone)');

assets/css/app.scss → assets/styles/app.css

@@ -1,7 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
-@import "~bootstrap-icons/font/bootstrap-icons.scss";
-
 #toast-container {
     position: fixed;
     right: 20px;

composer.json

@@ -14,6 +14,7 @@
         "minishlink/web-push": "^8.0.0",
         "phpoffice/phpspreadsheet": "^1.29",
         "symfony/asset": "7.0.*",
+        "symfony/asset-mapper": "7.0.*",
         "symfony/console": "7.0.*",
         "symfony/dotenv": "7.0.*",
         "symfony/expression-language": "7.0.*",
@@ -33,7 +34,6 @@
         "symfony/translation": "7.0.*",
         "symfony/twig-bundle": "7.0.*",
         "symfony/validator": "7.0.*",
-        "symfony/webpack-encore-bundle": "^2.1",
         "symfony/yaml": "7.0.*",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
@@ -80,7 +80,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"