Edit in GitHubLog an issue

Multiple websites with UPWARD

This topic describes how to configure your UPWARD server to run multiple PWA sites from a single Magento Open Source or Adobe Commerce backend.

The UPWARD connector module#

When you use the PWA scaffolding tool to create a PWA Studio project, one of the many modules installed is the UPWARD PHP connector module—magento2-upward-connector. This module provides a CLI to help you configure different PWA sites to run from a single Commerce or Open Source server.

Configuring the UPWARD server#

The first step is to configure the UPWARD server to access the different PWA sites you want to deploy. And the CLI provided by the UPWARD module is how you do it.

But before we get to the specifics, here's the overview of what you are actually doing. When you execute the CLI commands, you're actually adding pwa_paths to the env.php file. The commands specify the paths to the upward.yml configuration for each PWA site you want to deploy. The following example shows what an env.php configuration file may look like AFTER using the CLI to add two different PWA sites to the default and website configurations:

Copied to your clipboard
1// ...
2'downloadable_domains' => [
3 // ...
4],
5# New configuration point
6'pwa_path' => [
7 'default' => [
8 'default' => '/var/www/html/my-pwa-site/dist/upward.yml'
9 ],
10 'website' => [
11 '<website_code>' => '/var/www/html/my-awesome-pwa-site/dist/upward.yml'
12 ],
13 'store' => [
14 '<store_code>' => '' # Setting an empty string (or `false` value) will serve the specified default site (my-pwa-site)
15 ]
16]

Using UPWARD CLI commands#

The UPWARD module commands provide a convenient way to configure the server to deploy different PWA sites. The following examples show common usage patterns.

Set UPWARD paths with scopeType and scopeCode:

Copied to your clipboard
bin/magento pwa:upward:set --path /var/www/html/pwa/dist/upward.yml --scopeType store --scopeCode <store_code>

To find the paths of your PWA sites (by scope) as shown above for the store scope, use one of the following commands:

  • bin/magento store:list (for store scope)
  • bin/magento store:website:list (for store and website scopes)

Paths to upward.yml can be relative: pwa/dist/upward.yml or absolute: /var/www/html/pwa/dist/upward.yml.

To serve the default store front (non-PWA), use an empty string:

Copied to your clipboard
bin/magento pwa:upward:set

The UPWARD path configurations work the same as other store configurations: The config settings fall up in scope from store > website > global (default), trying to serve the most specific, available site scope first.

Creating multiple bundles#

You can also generate unique bundles per website within a single scaffolded project.

For example, if you want to deploy both French and German versions of your site, you could use the following commands to configure your UPWARD server:

Copied to your clipboard
1MAGENTO_BACKEND_URL=https://french.mysite.mg yarn build
2mv dist dist-french
3MAGENTO_BACKEND_URL=https://german.mysite.mg yarn build
4mv dist dist-german
5
6# copy these bundles to your Magento root and set configuration variables
7bin/magento pwa:upward:set --path ./dist-french/upward.yml --scopeType website --scopeCode fr
8bin/magento pwa:upward:set --path ./dist-german/upward.yml --scopeType website --scopeCode de

With this configuration, a single UPWARD server can process requests for many different website bundles.

  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.