Venia PWA Configuration

Magento (Venia) PWA configuration

Change to your VHost directory, in this example we use example.com that is part of the example domain-group:

cd /microcloud/domains/example/domains/example.com/

Clone the PWA studio git repo:

git clone https://github.com/magento-research/pwa-studio.git pwa

Change to the pwa directory and run the install:

cd ___pwa
npm install

Edit the MAGENTO_BACKEND_URL variable in the .env configuration file to point to your site:

vim packages/venia-concept/.env

Run the build and start the service:

! The PORT variable needs to be passed through, otherwise a random port will be chosen when the app is restarted. You should also ensure this is unique if you are hosting multiple PWA instances.

npm run build
PORT=3000 pm2 start --name=venia npm -- run start

Save the pm2 processlist so it's restored on restart:

pm2 save

Nginx/VHost configuration (Magento on different domain)

The below configuration should be implemented on the VHost that is hosting your frontend - not the VHost hosting Magento.

# Passthrough Requests to NodeJS
location ~* ^/ {
include sites-config/magestack-headers.conf;
proxy_pass https://acc1.i:3000;
}

After implementing the nginx rules, you should ensure you test and reload the nginx configuration.

Potential dependency issues with later versions of NPM (7+)

Please note that with NPM 7+, you may see dependency related issues like the following when attempting to run npm install

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving:
...
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is due to a recent change in later versions of NPM which blocks installations if peer dependencies are potentially incompatible.

This is a known issue with pwa-studio - to resolve this, run npm install --legacy-peer-deps instead.

This extra command line argument mimics the behaviour of older versions of NPM, which will allow it to install successfully.