Swissup 2 UPWARD connector module

The Swissup 2 UPWARD connector extends and fix some functionatity of Magento 2 UPWARD connector. The Magento 2 UPWARD connector is a module for routing requests to UPWARD-PHP. This module replaces the default Magento frontend theme with a PWA Studio storefront application. PWA Studio storefront deployments in the Magento Commerce use this module to keep Magento and storefront code on the same server.

Contents

1. Installation
2. Configuration

Installation

cd <magento_root>
composer config minimum-stability dev
composer config prefer-stable true
composer require swissup/module-upward-connector
composer config minimum-stability stable

bin/magento module:enable $(bin/magento module:status --disabled | grep 'Swissup_Core\|Pwa\|Aux\|Upward' | tr '\r\n' ' ')

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy
bin/magento cache:clean

Configuration

The Magento 2 UPWARD connector has additional settings that can be configured in the admin area under:

Stores > Configuration > General > Web > UPWARD PWA Configuration.

UPWARD Config File

This configuration is the location of the UPWARD configuration file for the UPWARD-PHP server.

This module adds a new directive to the env.php to securely set the path to the upward.yaml file.

    // ...
    'downloadable_domains' => [
        // ...
    ],
    # New configuration point
    'pwa_path' => [
        'default' => [
            'default' => '/var/www/html/pwa/dist/upward.yml'
        ],
        'website' => [
            '<website_code>' => '/var/www/html/anotherpwa/dist/upward.yml' # Can point a website to a different installation
        ],
        'store' => [
            '<store_code>' => '' # Blank string (or false) to serve default Magento storefront
        ]
    ]

For ease of use, this module provides a new command for setting the path

# Set the default scope to an empty string (will serve base Magento store front)
bin/magento pwa:upward:set

# Set the website with code <website_code> to /var/www/html/pwa/dist/upward.yml
bin/magento pwa:upward:set --path /var/www/html/pwa/dist/upward.yml --scopeType website --scopeCode <website_code>

# Set the website with code <website_code> to an empty string (will serve base Magento store front)
bin/magento pwa:upward:set --scopeType website --scopeCode <website_code>

# Set the website with code <store_code> to /var/www/html/pwa/dist/upward.yml
bin/magento pwa:upward:set --path /var/www/html/pwa/dist/upward.yml --scopeType store --scopeCode <store_code>

You can use bin/magento store:list or bin/magento store:website:list to easily get the store/website code for configuration.

You may use a path relative to your web root or an absolute path for the value of this configuration.

• Relative: pwa/dist/upward.yml
• Absolute: /var/www/html/pwa/dist/upward.yml

If you have previously configured the UPWARD yaml path using the config:set command or environment variables, it will continue to work as a fallback, so long as no default has been set as per the example above.

The configuration works the same way normal store configurations work. It falls back from store view > website > global (default), trying to serve the more specific available scope first.

Front Name Allowlist

This configuration allows you to specify a line-separated list of routes to forward to the default Magento theme.

Example:

contact
privacy-policy-cookie-restriction-mode

With this example, when a visitor navigates to either <Magento store URL>/contact or <Magento store URL>/privacy-policy-cookie-restriction-mode, they will land on a page rendered by Magento instead of the storefront application.

Prerender.io Configuration

Prerender.io support in the upward-connector module allows your site to send prerendered static html to search bots.

A middleware layer checks each request to see if it comes from a crawler and if allowed, sends it to the prerender service. These configuration entries let you configure which pages to send to Prerender.io to serve the static HTML versions of that page. If a page is not configured for prerendering, the request continues using the normal server routes.

| Configuration | Description | Example | | -------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------- | | Enable Prerender For Search Bots | This enables prerender functionality for this store view. | | | Prerender URL | Url of the prerender service. | https://service.prerender.io/ | | Prerender.io Token | Token to use for the prenderer.io hosted service | | | Crawler User Agents | Line break separated list of keywords to detect the crawler in the user-agent request header | | | Blocked List | Resources that will not be sent for prerendering. Use * as a wildcard character. | .js */cart | | Allowed List | Explicitly allowed resources to be sent for prerendering. If empty, all resources are allowed. | |

Testing prerendered pages

To see how a crawler sees a prerendered page, set your browser's User Agent to Googlebot and visit your URL. You can also run this on the command line and change the sample URL to your storefront's URL:

curl -A Googlebot https://www.example.com/ > page.html

To configure prerender locally for testing purposes, see https://docs.prerender.io/test-it/.

Troubleshooting partial rendered pages

There is no way to tell when a PWA page fully loads. For prerendering it is possible to force prerender to wait for a predefined timeout before setting the window.prerenderReady flag.

Add the following to the runtime script:

window.prerenderReady = false;
setTimeout(function () {
  window.prerenderReady = true;
}, 1000 * 15);

For more information, see https://docs.prerender.io/test-it/.

Service Worker Note

Avoid sharing the same hostname between your PWA Studio storefront and the Magento 2 admin backend. This causes the storefront Service Worker to intercept backend requests when you have both the storefront and admin tabs open at the same time on your browser. If you cannot avoid sharing the hostname, access one service at a time or use a private browsing session per service.