storefront:hot-proxy not working with multiple sales channels

[AlexBa]

Hey,
I have an annoying issue which I first have discovered 1-2 months ago: If I want to use "./psh.phar storefront:hot-proxy" with multiple sales channels, the resulting site is broken.

With broken I mean: Specific templates like the header are applied multiple times to the site. Additionally, I'm using a premium theme from the community store (Orion), but the used theme in the hot proxy is still the default Storefront theme. Some styling is missing too.

If I delete all sales channels except the one with the premium theme, everything is working correctly. Deleting a sales channel means: Delete all related orders, documents, customers & newsletter recipients which are using the sales channel (with a raw MySQL query).

Unfortunately, it's not possible to delete a sales channel in the admin easily. If I click on "delete", nothing happens. Only an error appears in the AJAX response. The problem are the foreign key constraints in the DB. I think deleting a sales channels with existing data should be handled differently. But this is a different topic.

Does anyone have the same problem?

[AlexBa]

By the way: I'm using Shopware 6.2.2

[JustusNBB]

Hello, being a big fan of Hot Module Reload, I have been digging around in the Shopware (6.4+) Webpack setup (with the goal of optimising storefront performance). I have it working with a couple of hacks and pitfalls for multiple themes for different sales channels!

Let's discuss and improve from here:

1. Theme Compilation/Dump Order is non-deterministic across deployments with different identifiers (files/ ordered by ThemeID).

This means which Theme Configuration ends up in var/ is random, it always contains exactly one Theme Config (the LAST one). The Hot-Proxy setup however is geared to read the FIRST theme configuration, as soon as there are are multiple themes, the Hot-Proxy is not able to select the right Theme+Config combination anymore.

For now I've made this work by adding a THEME_INDEX env override, which allows to pick the Theme instead of always using whatever is the first one.

2. Secondary sales channel (under e.g. subdomain.localhost:9998) font asset routing is unsupported, the following hack works, but really feels like the wrong idea:

// Addition in build/proxy-server-hot/index.js
if (client_req.url.indexOf('/font/') >= 0) {
                requestOptions.host = '127.0.0.1';
                requestOptions.port = 80; // route to apache
}

Maybe this is something the asset server on port 9999, could handle?
Is shopware/shopware#1910 related?

$app-css-relative-asset-path: '/theme/<themehashid>/assets';

// webpack.config.js
const scssEntryFileContent = (() => {
        const themeMappings = JSON.parse(fs.readFileSync(path.resolve(projectRootPath, 'files/theme-config/index.json'), { encoding: 'utf8' }));
        const assetIds = Object.keys(themeMappings).map(salesChannelId => md5(themeMappings[salesChannelId] + salesChannelId)); // like the MD5ThemePathBuilder.assemblePath method
        const themeHashForAssetPath = assetIds[THEME_INDEX];
        const themeConfig = JSON.parse(fs.readFileSync(path.resolve(projectRootPath, `files/theme-config/${Object.values(themeMappings)[THEME_INDEX]}.json`), { encoding: 'utf8' }));
       // [...] now we need `var/` contents, but it's only for the one theme...

3. I am aspiring to build all themes in parallel with Webpack (so they work without restarts & hacks like a THEME_INDEX override), but I haven't found the way to manipulate Webpack Chunking without the ThemeCompiler interfering... how do we get subdomain.localhost:9998 to select the correct theme (entrypoint)?

@AlexBa does my information help you "to make it work" for you too?
I hope to find more time to refine this solution when I come back from vacation in September!