Multiple Sites

When a PWA Kit project is created with the Retail React App template, it is configured by default for a single locale and a single site. However, it can be extended to run multiple sites with a single code base.

The config/sites.js file contains a definition of the sites that you configured in Business Manager. The following example shows the configuration for the RefArch and RefArchGlobal sites:

In the /config/default.js file, you can set the default site and optionally, map the site IDs with aliases. If no alias is defined for the site, then IDs are used in URLs. The following example sets the default site to RefArchGlobal and defines three aliases for it.

If you set url.showDefault to true in the /config/default.js file, the default locale and site are displayed in your application URLs. In addition to the site alias, you can also configure aliases for your locale in the sites.js file. If you configured an alias for a locale, the URL displays the alias instead of your locale ID.

Application URLs are constructed using canonical site and locale IDs and are still valid URLs even when aliases are used.

With environment-specific configuration files, you can manage multiple B2C sites defined in Business Manager and deploy them over different domains using multiple Managed Runtime environments.

For example, your site can be accessed from customer.ca and customer.uk, or customer-a.com and customer-b.ca. You can also customize the URL patterns further. For example, your URLs can be formatted as customer-1.com/us or customer-2.com/?locale=en_US.

You can deploy bundles to work with multiple domains using different Managed Runtime environments, each configured for a separate domain. The configuration mapping is done by creating a separate configuration file for each Managed Runtime environment.

For example, to deploy customer-1.com to the env-customer-1 environment, and customer-2.com to the env-customer-2 environment, you need to create the following files in place of config/default.js:

  • config/env-customer-1.js
  • config/env-customer-2.js

For more information on environment-specific configurations, see the Configuration Files guide.