How to Set Up Multiple Websites for PWA in Magento

In a digital era where user experiences define success, Progressive Web Applications (PWAs) stand at the forefront, offering unparalleled speed, reliability, and engagement. For ambitious Magento users overseeing a spectrum of websites, extending the PWA magic across diverse domains isn’t just a trend – it’s a strategic leap towards a unified, immersive, and uniquely tailored online journey.

This guide delves into the step-by-step process of configuring multiple websites for PWA in Magento. Whether you’re an e-commerce giant or a diverse content provider, setting up PWAs for your distinct websites can elevate user experiences and simplify the process of managing data efficiently.

3 Steps to Set Up Multiple Websites for Magento PWA 

1. Set up multiple websites, stores, and store views in the Admin

Magento allows you to configure multiple websites, stores, and store views through the Admin panel. To do this, follow this guide below or you can access Adobe docs for more detailed information.

Create Root Categories

• Optional but highly recommended for a unique root category per website.
• Log in to the Admin, and navigate to Catalog > Categories.
• Click “Add Root Category,” provide a unique name, enable the category, and save.

Set Up Websites

• In the Admin, go to Stores > Settings > All Stores.
• Click “Create Website,” enter a name, a unique code (e.g., french), and optional sort order.
• Save the website configuration, and repeat for additional websites.

Create Stores

• In the Admin, navigate to Stores > Settings > All Stores.
• Click “Create Store,” associate with the appropriate website, enter a name, and a unique code, and select the root category.
• Save the store configuration, and repeat for additional stores.

Create Store Views

• In the Admin, go to Stores > Settings > All Stores.
• Click “Create Store View,” associate with the corresponding store, provide a name, and a unique code, and enable the view.
• Save the store view configuration, and repeat for additional views.

Change the Website Base URL

• Access Stores > Settings > Configuration > General > Web in the Admin.
• Choose the website from the Store View list, expand Base URLs, and update the URL.
• Save the configuration, and repeat for other websites.

Add the Store Code to the Base URL

• Access Stores > Settings > Configuration > General > Web in the Admin.
• Choose the default config from the Store View list, expand Url Options, and enable adding the store code to URLs.
• Save the configuration.

Change the Default Store View Base URL

• Access Stores > Settings > Configuration > General > Web in the Admin.
• Choose the default config from the Store View list, update the Base URLs, and save the configuration.

2. Configure the Environment

If you’re using Apache as your web server, you must configure the environment to handle multiple websites. Add the following lines to your Apache configuration:

SetEnvIf Host {url host site of you} MAGE_RUN_TYPE=website

SetEnvIf Host {url host site of you} MAGE_RUN_CODE=cmd

Notably, replace {url host site 1} and {url host site 2} with the actual URLs of your websites, and set the respective MAGE_RUN_CODE values.

3. Configuring Multiple Websites with PWA

To build PWA dist for the new website, use SSH and go to the Magento root folder:

cd pwa/
MAGENTO_BACKEND_URL={url website of you} yarn build
mv dist dist-cmd
cd ..
php bin/magento pwa:upward:set --path {directory folder server magento}/pwa/dist-cmd/upward.yml --scopeType website --scopeCode cmd
php bin/magento c:f
cd pwa/
yarn build

* Please replace the red strings with your information

* scopeCode is website code

Here is a code example:

MAGENTO_BACKEND_URL=https://french.mysite.mg yarn buildmv dist dist-frenchMAGENTO_BACKEND_URL=https://german.mysite.mg yarn buildmv dist dist-german # copy these bundles to your Magento root and set configuration variablesbin/magento pwa:upward:set --path ./dist-french/upward.yml --scopeType website --scopeCode frbin/magento pwa:upward:set --path ./dist-german/upward.yml --scopeType website --scopeCode de

Conclusion

Setting up multiple websites for PWA in Magento opens up possibilities for delivering unique and tailored experiences across various domains. By following these steps, you can seamlessly configure and deploy Progressive Web Applications for each of your Magento websites, ensuring a fast, reliable, and engaging online experience for your users.

If you want to save time and effort but still have a completed setup for your business, contact us for more information. We specialize in streamlining the process, making it convenient for you to enhance your online presence and offer an optimized user experience across multiple websites.