Piyush Dankhra

About me
moon indicating dark mode
sun indicating light mode

Last updated: January 12, 2021

How to deploy the PWA Studio project to the server using the UPWARD connector?

I would like to share a simple flow of deploy the PWA Studio project on the same server and domain without nodejs.

I assume you already have the following setup on hand

  1. Magento 2 project
  2. PWA Studio project
  3. Nginx configuration

Here, we will go into the following steps

  1. Build the PWA Studio project
  2. Magento 2 UPWARD connector module
  3. Nginx configuration

This technique is basically using in the Magento Commerce Cloud.

1. Build the PWA Studio project

Build the PWA Studio project using the below CLI command that will generate the dist/upward.yml file that we need to set in the Magento 2 UPWARD connector module.

yarn run build

2. Magento 2 UPWARD connector module

  1. Install this Magento 2 UPWARD connector module https://github.com/magento/magento2-upward-connector using the following CLI commands.
composer require magento/module-upward-connector
bin/magento s:up
bin/magento s:d:c
bin/magento s:s:d
  1. Configure the module

There are two fields to configure under Store > Configuration > General > Web > UPWARD PWA Configuration. upward magento

  • UPWARD Config File
    • Add the absolute path of the dist/upward.yml file that is generated on step 1
  • Front Name Whitelist
    • List of frontend URLs that need to forward to the Magento
      • Here, contact and privacy-policy-cookie-restriction-mode URLs will be bypassed to the Magento frontend instead of PWA Studio

3. Nginx configuration

Add fastcgi_param MAGENTO_BACKEND_URL <magento-backend-url> param in the nginx configuration.

# PHP entry point for main application
location ~ ^/(index|get|static|errors/report|errors/404|errors/503|health_check)\.php$ {
try_files $uri =404;
fastcgi_pass fastcgi_backend;
fastcgi_buffers 1024 4k;
fastcgi_param PHP_FLAG "session.auto_start=off \n suhosin.session.cryptua=off";
fastcgi_param PHP_VALUE "memory_limit=756M \n max_execution_time=18000";
fastcgi_param MAGENTO_BACKEND_URL "https://magento-domain.com/";
fastcgi_read_timeout 600s;
fastcgi_connect_timeout 600s;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}

Credit: https://github.com/magento/pwa-studio/issues/2328#issuecomment-626975996

Now validate the nginx configuration using the nginx -t CLI command and if all good, then restart the nginx service.

Note: Access the Magento backend in the private browser window otherwise you may face some UI problems.

That’s it! If all is set correctly, then you should see the PWA Studio frontend and Magento admin on the same domain.


About me.
Adobe Certified Expert - Adobe Commerce Developer / Front-End Developer / Business Practitioner
Adobe Subject Matter Expert - Adobe Commerce Front End Developer / Business Practitioner
Working on Magento 2 / Hyvä