Build frontend assets

Author: tatevikg1

.gitignore

@@ -12,6 +12,7 @@
 /public/
 /var/
 /vendor/
+/node_modules/
 .DS_Store
 .vagrant
 .phpunit.result.cache

README.md

@@ -151,6 +151,14 @@ You can get a list of all installed phpList modules with this command:
 composer run-script list-modules
 ```
 
+To compile and publish the `phplist/web-frontend` assets into
+`public/build` (used by the web frontend Twig templates),
+run:
+
+```bash
+composer run-script build-web-frontend-assets
+```
+
 
 ## Creating a .tar.gz package of this distribution
 

composer.json

@@ -90,6 +90,10 @@
             "php bin/console cache:clear",
             "php bin/console cache:warmup"
         ],
+        "build-web-frontend-assets": [
+            "yarn install",
+            "yarn build:web-frontend"
+        ],
         "post-install-cmd": [
             "@create-directories",
             "@update-configuration"

composer.lock

@@ -0,0 +1,34 @@
+{
+  "private": true,
+  "scripts": {
+    "build:web-frontend": "encore production",
+    "watch:web-frontend": "encore dev --watch"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@symfony/webpack-encore": "^5.1.0",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@vue/compiler-sfc": "^3.5.16",
+    "autoprefixer": "^10.4.27",
+    "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "file-loader": "^6.0.0",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.0",
+    "tailwindcss": "^4.2.1",
+    "vue-loader": "^17.3.1",
+    "webpack": "5.104.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-notifier": "^1.15.0"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.4.0",
+    "@tatevikgr/rest-api-client": "^2.0.5",
+    "apexcharts": "^5.10.4",
+    "ckeditor5": "^48.0.0",
+    "vue": "^3.5.16",
+    "vue-router": "4",
+    "vue3-apexcharts": "^1.11.1"
+  }
+}

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [
+        require('@tailwindcss/postcss'),
+        require('autoprefixer'),
+    ],
+};

postcss.config.js

@@ -0,0 +1,26 @@
+const Encore = require('@symfony/webpack-encore');
+const path = require('path');
+
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
+
+Encore
+    .setOutputPath('public/build/')
+    .setPublicPath('/build')
+    .addEntry('app', './vendor/phplist/web-frontend/assets/app.js')
+    .addStyleEntry('styles', './vendor/phplist/web-frontend/assets/styles/app.css')
+    .enableVueLoader(() => {}, { version: 3 })
+    .enableSingleRuntimeChunk()
+    .enablePostCssLoader()
+    .copyFiles({
+        from: './vendor/phplist/web-frontend/assets/images',
+        to: 'images/[path][name].[hash:8].[ext]',
+    })
+    .addAliases({
+        '@': path.resolve(__dirname, 'vendor/phplist/web-frontend/assets'),
+        '@images': path.resolve(__dirname, 'vendor/phplist/web-frontend/assets/images'),
+    })
+;
+
+module.exports = Encore.getWebpackConfig();