Stratus - PWA Configuration

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and stability while reaching anyone, anywhere, on any device with a single codebase.

Currently, Stratus supports PWA Studios and Vue Storefront. Other popular PWA frameworks are available such as Simicart, ScandiPWA, Tigren, BSSCommerce, CedCommerce, and MageDelight. To read more about the benefits of PWA, please read PWA and Headless Commerce

PWA Setup

Stratus supports hosting your frontend through PWA Studio

Before enabling PWA services via your Stratus panel, you should prepare your PWA installation. This requires knowledge of NVM, NodeJS and PWA Studio. Follow the steps below to install and configure the sample PWA Studio frontend provied by Adobe.

Log into your Stratus instance via SSH
cd to your Magento root directory. Example cd /srv/public_html
Retrieve the PWA Metapackage for Magento Open Source Extensions: git clone https://github.com/magento/magento2-pwa.git ext/magento/magento2-pwa;
composer config minimum-stability dev;
composer config repositories.ext path "./ext///*";
composer require magento/pwa;
php bin/magento module:status | grep Pwa | xargs php bin/magento module:enable
php bin/magento module:status | grep Aux | xargs php bin/magento module:enable
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
Export your stores UUID as an environment variable export UUID=(your UUID here)
For Magento versions higher than 2.4.3: Run /usr/share/stratus/pwa-example-venia.sh PWA Studio and the local NVM install will be automatically copied into /srv/pwa for you. For Magento 2.4.3 version or older: cp /usr/share/stratus/pwa-example-venia.sh /srv/pwa-example-venia.sh Edit the following section of /srv/pwa-example-venia.sh to utilize the correct version Run it and PWA Studio with the local NVM install will be automatically copied into /srv/pwa for you.

cd /srv/pwa
git clone --branch v12.1.0 https://github.com/magento/pwa-studio.git; cd /srv/pwa/pwa-studio; cp -avr .* /srv/pwa; cd /srv/pwa; rm -r -f pwa-studio;

Open your Stratus Control Panel and enable NodeJS in the NodeJS -> Info section. Click the Enable button. Turning on NodeJS will redeploy all store services and cause several minutes of downtime. Do not enable NodeJS if you have not added the PWA app into /srv/pwa
In the same NodeJS section of the Stratus Control Panel, open the PWA section. Here you will see all the domains applied to your instance. You can choose to set them to PHP or NodeJS. Selecting either changes the fastcgi backend proxy in the Nginx configuration. If a domain is set to PHP, it will forward to PHP-FPM. If NodeJS is selected, the requests will be routed to NodeJS, instead. This way you can host normal Magento 2 views alongside separate PWA applications for your store. Select and configure each domain as needed for your application.
Click Update to confirm the configuration
Visit one of your domains set to NodeJS, you should see your PWA frontend loading instead of the Magento 2 default for your store.

For development, you can use this start.sh file within /srv/pwa directory with following lines:

#!/bin/bash
export NVM_DIR=/srv/pwa/nvm
. "$NVM_DIR/nvm.sh"
cd /srv/pwa
yarn run stage:venia

NVM is localized with PWA on Stratus, as well as in /srv/.nvm. Keeping a separate install allows you to maintain separate Node versions for different applications between Magento compilation and PWA.

Additional commands you can run within the SSH container for testing via yarn:

yarn run watch:venia Starts the Venia storefront development environment.
yarn run watch:all Runs the full PWA Studio developer experience, which include Venia hot-reloading and concurrent Buildpack/Peregrine rebuilds.
yarn run build && yarn run stage:venia Generates build artifacts and runs the staging environment, which uses more compressed assets and more closely reflects production.

Vue Storefront Setup

Stratus supports hosting your frontend through Vue Storefront

Vue Storefront is a headless and backend-agnostic eCommerce Progressive Web App written in Vue. The fact that it uses headless architecture allows Vue Storefront to be connected with any eCommerce platform, so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce, etc.

To host VueStorefront (Demo) on MageMojo Stratus:

node -v

This will output the NodeJS version used. You may need to adjust this for compatibility with the version of Vue Storefront chosen. For the purpose of this article, we are using NodeJS 12.22.7 which requires the following commands as described in Node.js Node Version Manager.

nvm install 12.22.7
nvm use 12.22.7
npm install yarn -g

At the time of this article, the latest Vue Storefront version was 1.12.2

Within the same session, run the following:

cd /srv/;
git clone --single-branch --branch master https://github.com/vuestorefront/vue-storefront-1.git pwa

If you would like a different version instead, replace master with the appropriate branch name.

Navigate to /srv/pwa, and then execute:

yarn

Since the NodeJS container runs on port 10000 by default, we will need to run the following command before going further. Note: See Shopify section below if this is not for Magento

sed -i 's/3000/10000/g' ./config/default.json
sed -i 's/3000/10000/g' ./config/test.json

Next, we can run the installer:

yarn installler

If you answer Yes, you will have a remote backend at https://demo.vuestorefront.io. Otherwise, you will need to install vue-storefront-api.

Configuration is ready, and we can now create the start.sh file under the /srv/pwa directory.

Navigate back to the /srv/pwa folder. For development, you can use this start.sh file within /srv/pwa directory with the following lines:

#!/bin/bash
set -e
cd /srv/pwa &&
export NVM_DIR=/srv/pwa/nvm
mkdir -p $NVM_DIR

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
. "$NVM_DIR/nvm.sh"
nvm install 12.22.7
nvm use 12.22.7
npm install yarn -g
yarn install || exit $?
cd /srv/pwa; yarn dev

Make you adjust for your version of node used in the first step.

Once you have saved the file, make it executable:

chmod u+x start.sh

The next step is to Open your Stratus Control Panel and enable NodeJS. Turning on NodeJS will redeploy all store services and cause several minutes of downtime.
Once the environment is back online, you may select which domain will be using NodeJS.

NOTE: For the shopify headless version, the process is similar to above except for the port change needs to be done in /srv/pwa/package.json as follows.

package.json
    "scripts": {
      "dev": "nuxt --port 10000",
      "build": "nuxt build -m",
      "build:analyze": "nuxt build -a -m",
      "start": "nuxt start --port 10000",
      "generate": "nuxt generate",
    "test": "jest"

Troubleshooting

NodeJS not starting? Is start.sh located in /srv/pwa/ ? Does start.sh have executable permissions? (chmod u+x start.sh)
Errors about missing environment variables? try adding these to start.sh like so:

export MAGENTO_BACKEND_URL=https://mymagentourl.com/
export CHECKOUT_BRAINTREE_TOKEN=sandbox_11111110000001111111

NOTE: This is just an example. These values should be replaced with the actual Magento backend URL and sandbox token

Table of Contents

Stratus - PWA Configuration

PWA Setup

Vue Storefront Setup

Troubleshooting

Feedback