Deploy Venia PWA storefront

Yes, it is actually possible to deploy a Venia PWA storefront on your Standard, Shared Plus or Semi Dedi Magentohotel. This article will go through all the steps from scratch to a deployed and working Venia storefront with sample data. venia

Requirements

  • Node.js on your local machine or jumpbox. Just any shell with node.js. The reason for this is that we cannot provide node.js on shared hosting. However we have a dedicated PWA offering for as low as 799 DKK per month excluding taxes. On this offering you can have node.js on your server.
  • A magentohotel or dedicated server with Powerhosting with a Magento 2 installation
  • A little bit of bash shell experince.

On your local machine

Get pwa-studio and build Venia Storefront

Get pwa-studio and install dependencies:

yarn create @magento/pwa
cd pwa-studio-fundamentals
yarn install

Then its time to build the Venia Storefront. Run the following commands:

cd packages/venia-concept
yarn build

Venia Storefront will be built and a "dist" folder will be created containing all the files necessary to run the PWA. After this we copy the dist folder to the server containing the Magento 2:

scp -r -P 15873 dist/ venia_powerhosting@prod46.magentohotel.dk:~/public_html/pub/pwa

On the Magento 2 server

Now it is time to configure the Magento 2 for the PWA, including installing the upward php

Install and configure upward php

For Magento to be able to route the requests to the PWA we need to enable the upward-connector module:

composer require magento/module-upward-connector
composer update
bin/magento setup:upgrade && bin/magento setup:di:compile

Now you will need to add the MAGENTO_BACKEND_URL env variable in in ~/public_html/pub/.htaccess

nano ~/public_html/pub/.htaccess

And add this line to the top where the URL is the base_url of your Magento 2:

SetEnv MAGENTO_BACKEND_URL https://venia.powerhosting.dk

Now we need to change a configuration in Magento to set the path to the upward.yml:

bin/magento config:set web/upward/path pwa/upward.yml
bin/magento cache:flush

You should now be able to visit your newly installed PWA on your Magento base url.

Install sample data (optional)

For testing purposes it is nice to have som sample data so you can test catalog and card etc. Run the following commands from the root of your Magento 2 installation to install venia sample data.

First of all from your local machine where the pwa-studio sources are located, run the following command to copy the sample data deployment script to your Magento 2 installation:

scp -r -P 15873 pwa-studio/packages/venia-concept/deployVeniaSampleData.sh  venia_powerhosting@prod46.magentohotel.dk:~/public_html/.

Then on the Magento 2 server run the script to install sample data:

cd ~/public_html
bash deployVeniaSampleData.sh
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento index:reindex
bin/magento cache:flush

Sample data should now be installed.