The frontend dependencies can now detect their path automatically.

Therefore it does not need to be configured in the webpack.config.js before compilation. This should help to make things like issue #426 easier to resolve.

README.md

@@ -101,21 +101,17 @@ for a detailed guide how to install Part-DB.**
       In bigger instances with concurrent accesses, MySQL is more performant. This can not be changed easily later, so
       choose wisely.
 4. Install composer dependencies and generate autoload files: `composer install -o --no-dev`
-5. If you have put Part-DB into a subdirectory on your server (like `part-db/`), you have to edit the file
+5. Install client side dependencies and build it: `yarn install` and `yarn build`
-   `webpack.config.js` and uncomment the lines (remove the `//` before the lines) `.setPublicPath('/part-db/build')` (
+6. _Optional_ (speeds up first load): Warmup cache: `php bin/console cache:warmup`
-   line 43) and
+7. Upgrade database to new scheme (or create it, when it was empty): `php bin/console doctrine:migrations:migrate` and
-   `.setManifestKeyPrefix('build/')` (line 44). You have to replace `/part-db` with your own path on line 44.
-6. Install client side dependencies and build it: `yarn install` and `yarn build`
-7. _Optional_ (speeds up first load): Warmup cache: `php bin/console cache:warmup`
-8. Upgrade database to new scheme (or create it, when it was empty): `php bin/console doctrine:migrations:migrate` and
    follow the instructions given. During the process the password for the admin is user is shown. Copy it. **Caution**:
    This steps tamper with your database and could potentially destroy it. So make sure to make a backup of your
    database.
-9. You can configure Part-DB via `config/parameters.yaml`. You should check if settings match your expectations, after
+8. You can configure Part-DB via `config/parameters.yaml`. You should check if settings match your expectations, after
    you installed/upgraded Part-DB. Check if `partdb.default_currency` matches your mainly used currency (this can not be
    changed after creating price information).
    Run `php bin/console cache:clear` when you changed something.
-10. Access Part-DB in your browser (under the URL you put it) and login with user *admin*. Password is the one outputted
+9. Access Part-DB in your browser (under the URL you put it) and login with user *admin*. Password is the one outputted
    during DB setup.
    If you can not remember the password, set a new one with `php bin/console app:set-password admin`. You can create
    new users with the admin user and start using Part-DB.

src/EventSubscriber/WebpackAutoPathSubscriber.php

@@ -0,0 +1,57 @@
+<?php
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2023 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+declare(strict_types=1);
+
+
+namespace App\EventSubscriber;
+
+use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+use Symfony\WebpackEncoreBundle\Event\RenderAssetTagEvent;
+
+/**
+ * This class fixes the wrong pathes generated by webpack using the auto publicPath mode.
+ * Basically it replaces the wrong /auto/ part of the path with the correct /build/ in all encore entrypoints.
+ */
+class WebpackAutoPathSubscriber implements EventSubscriberInterface
+{
+    public static function getSubscribedEvents(): array
+    {
+        return [
+            RenderAssetTagEvent::class => 'onRenderAssetTag'
+        ];
+    }
+
+    public function onRenderAssetTag(RenderAssetTagEvent $event): void
+    {
+        if ($event->isScriptTag()) {
+            $event->setAttribute('src', $this->resolveAuto($event->getUrl()));
+        }
+        if ($event->isLinkTag()) {
+            $event->setAttribute('href', $this->resolveAuto($event->getUrl()));
+        }
+    }
+
+    private function resolveAuto(string $path): string
+    {
+        //Replace the first occurence of /auto/ with /build/ to get the correct path
+        return preg_replace('/\/auto\//', '/build/', $path, 1);
+    }
+}

webpack.config.js

@@ -36,16 +36,9 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
 Encore
     // directory where compiled assets will be stored
     .setOutputPath('public/build/')
-    // public path used by the web server to access the output path
+    // This value doesn't matter, as the public path is set to auto later down. This is just to prevent a warning
     .setPublicPath('/build')
-    // only needed for CDN's or subdirectory deploy
+    // only needed for CDN's or subdirectory deploy (this should not be needeed, as we use auto public path)
-    //.setManifestKeyPrefix('build/')
-
-    /**
-     * If you are putting Part-DB into a sub directory you have to uncomment these lines and
-     * replace "part-db/" with your path to Part-DB
-     */
-    //.setPublicPath('/part-db/build')
     //.setManifestKeyPrefix('build/')
 
     /*
@@ -189,3 +182,7 @@ if (Encore.isDev()) {
 
 
 module.exports = Encore.getWebpackConfig();
+
+//Enable webpack auto public path (this only works in combination with WebpackAutoPathSubscriber!!)
+//We do it here to supress a warning caused by webpack Encore
+module.exports.output.publicPath = 'auto';