Venia PWA Configuration

By 5th February 2019December 23rd, 2021No Comments

Magento (Venia) PWA configuration

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

cd /microcloud/domains/example/domains/

Clone the PWA studio git repo:

git clone 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.