Add the option to include source maps to served files (#23857)

* creating the script using environment variables

* using value from configuration file. it looks cleaner

* using matomo:console command instead

* adding some comment

* Adding some documentation in the README.md

* adding help command

* using short syntax

* refactoring

* fix spelling mistake

* updating screenshot of configfile

---------

Co-authored-by: caddoo <[email protected]>

Author: chippison

.ddev/README.md

@@ -44,6 +44,23 @@ ddev matomo:init:dev
 
 This command will set up the environment for development, installing the additional dependencies required.
 
+We have also added a parameter to the `ddev matomo:init:dev` command to enable source maps for Vue components. 
+To enable them, you can run:
+```
+ddev matomo:init:dev --with-sourcemaps
+```
+
+You can also disable sourcemaps at any time if you want to, just run the default command again:
+```
+ddev matomo:init:dev
+```
+NOTE: You should tick 'Disable cache' on your browser developer tools to see the changes.
+
+To see help:
+```
+ddev help matomo:init:dev
+```
+
 ### 4. Set up the testing environment
 
 After Matomo is set up, you can initialize the testing environment by running:

.ddev/commands/host/matomo_init_dev

@@ -1,8 +1,18 @@
 #!/usr/bin/env bash
 
 ## Description: Initialize Matomo environment for development
-## Usage: matomo:init:dev
-## Example: ddev matomo:init:dev
+## Usage: matomo:init:dev [--with-sourcemaps]
+## Example: ddev matomo:init:dev --with-sourcemaps
+
+WITH_MAPS=0
+for arg in "$@"; do
+  if [ "$arg" = "--with-sourcemaps" ]; then
+    WITH_MAPS=1
+  fi
+done
+
+MAP_FLAG_VALUE=$([ "$WITH_MAPS" -eq 1 ] && echo 1 || echo 0)
+
 
 echo "Run npm install ..."
 ddev npm install
@@ -11,6 +21,10 @@ echo "Enable development mode and disable assets merging ..."
 ddev matomo:console development:enable
 ddev matomo:console config:set Development.disable_merged_assets=1
 
+echo "Configure Vue source maps"
+ddev matomo:console config:set Development.allow_vue_sourcemaps=$MAP_FLAG_VALUE
+## recreate the htaccess files to include/exclude maps
+ddev matomo:console core:create-security-files
+
 echo "Done: Matomo dev setup initialisation finished."
 echo ""
-

config/global.ini.php

@@ -215,6 +215,10 @@
 ; Note that for quick debugging, instead of using below setting, you can add `&disable_merged_assets=1` to the Matomo URL
 disable_merged_assets = 0
 
+; if set to 1, the sourcemaps for built vue files will be allowed to be served.
+; this is useful for debugging vue files in the browser
+allow_vue_sourcemaps = 0
+
 [General]
 ; the following settings control whether Unique Visitors `nb_uniq_visitors` and Unique users `nb_users` will be processed for different period types.
 ; year and range periods are disabled by default, to ensure optimal performance for high traffic Matomo instances

plugins/Installation/ServerFilesGenerator.php

@@ -12,6 +12,7 @@
 use Piwik\Container\StaticContainer;
 use Piwik\Filesystem;
 use Piwik\SettingsServer;
+use Piwik\Config;
 
 class ServerFilesGenerator
 {
@@ -37,6 +38,13 @@ public static function createHtAccessFiles()
             "\t" . $allow . "\n" .
             "</Files>\n";
 
+        $staticFileExtensions = ['gif', 'ico', 'jpg', 'png', 'svg', 'js', 'css', 'htm', 'html', 'mp3', 'mp4', 'wav', 'ogg', 'avi', 'ttf', 'eot', 'woff', 'woff2'];
+        $allowVueSourceMaps = !empty(Config::getInstance()->Development['allow_vue_sourcemaps']);
+        if ($allowVueSourceMaps) {
+            $staticFileExtensions[] = 'map';
+        }
+        $staticFileExtensionsPattern = implode('|', $staticFileExtensions);
+
         $allowStaticAssets =
             "# Serve HTML files as text/html mime type - Note: requires mod_mime apache module!\n" .
             "<IfModule mod_mime.c>\n" .
@@ -45,7 +53,7 @@ public static function createHtAccessFiles()
             "</IfModule>\n\n" .
 
             "# Allow to serve static files which are safe\n" .
-            "<Files ~ \"\\.(gif|ico|jpg|png|svg|js|css|htm|html|mp3|mp4|wav|ogg|avi|ttf|eot|woff|woff2)$\">\n" .
+            "<Files ~ \"\\.(" . $staticFileExtensionsPattern . ")$\">\n" .
             $allow . "\n" .
             "</Files>\n";