[feature]: Multiple themable storefronts on 1 magento instance

[Jordaneisenburger]

Is your feature request related to a problem? Please describe. As a merchant I can have multiple storeviews/websites on the same Magento backend. In default M2 we could couple different theme's to different websites. As far as I'm aware that's not possible right now with pwa studio.

Describe the solution you'd like I would love to see a solution where we can create different theme/storefronts and connect them to the the right storeview.

So I assume we would want to be able to define "storeviews/themes", where they just like default M2 stack ontop of eachother. So as an example:

venia-concept (has all code, acts like the base) venia-super-concept (only has a few changed files)

Additional context Haven't yet given this much thought but I assume we need to build multiple dist folders to prevent bundles getting too big. And we should be able to do something like yarn server.js --storefront=venia-super-concept to be able to start different webpack servers for the respective dist folders

Please let us know what packages this feature is in regards to:

• [ ] venia-concept
• [ ] venia-ui
• [x] pwa-buildpack
• [ ] peregrine
• [ ] pwa-devdocs
• [x] upward-js
• [ ] upward-spec
• [ ] create-pwa

[awilcoxa]

This is an upcoming epic on the roadmap but a spike and POC would be ideal. We need to ensure that the spike is aligned with current architecture and framework (ex: style guide).

We should loop in @jimbo and @zetlen for guidance/feedback on proposed approach.

[awilcoxa]

Created story in backlog for triage (PWA-655)

[Jordaneisenburger]

So we've came up with a solution for this in our project.

Basically what we are doing is inside the root of the project we create a new storeViews folder that holds all the custom theme's. This can include css styling, .js files or whole components.

So in the overrides.js we tell webpack what files to overwrite:

module.exports = [
    [
        '@experius-galaxy/ui/lib/components/base/logo/mainLogo.svg',
        './src/components/base/logo/mainLogo.svg',
    ],
].map(([src, target]) => [
    new RegExp(require.resolve(src)),
    require.resolve(target),
]);

//webpack.js.config
   clientConfig.plugins = [
        ...clientConfig.plugins,
        ...overrides.map(
            ([source, target]) =>
                new NormalModuleReplacementPlugin(source, target),
        ),
    ];

To build / watch a different store view we've created an extra command to package.json

"watch:example": "NODE_ENV=development && yarn cpExampleEnv && webpack-dev-server --progress --color --env.mode development",

And last we've added some extra config to storeViews/example/.env.default

#### Store View Config #############################################
#
# This will load the storeview specific variables into webpack
# point to this storefront's theme.scss relative to root.
STORE_VIEW_THEMING=./storeViews/example/src/theme.scss
#
# Set the appending order from left to right, right being the latest override
# If you are only changing theme.scss you can comment STORE_VIEW_OVERRIDES="example" like so #STORE_VIEW_OVERRIDES="example"
# Example: STORE_VIEW_OVERRIDES="example, secondExample"
STORE_VIEW_OVERRIDES="example"
#
################################################################################

It's a short write up so hope it makes sense.