Stratus - PWA Configuration
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
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
- 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:
/usr/share/stratus/pwa-example-venia.shPWA 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.shEdit 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.
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:
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:
- Login to your SSH container and check the following:
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:
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:
- 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:
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:
cd /srv/pwa &&
mkdir -p $NVM_DIR
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
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.
"dev": "nuxt --port 10000",
"build": "nuxt build -m",
"build:analyze": "nuxt build -a -m",
"start": "nuxt start --port 10000",
"generate": "nuxt generate",
- 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:
NOTE: This is just an example. These values should be replaced with the actual Magento backend URL and sandbox token
Was this page helpful?
Glad to hear it! Have any more feedback? Please share it here.
Sorry to hear that. Have any more feedback? Please share it here.