I managed to run Venia frontend however facing the same issue. I have installed PWA venia in frontend magento 2.3.1 but images are not loading. Here are the comments to your questions. Please Help with your suggestions

Magento version : 2.3.1

Operating System + version: Ubuntu Linux 16.04

node.js version (node -v): v10.15.3

Yarn Version: 1.15.2

Note: Yes, Images are loading in local instance.

file / folder permissions yes

My instance is running on HTTPS

Please check the screenshot.

enter image description here

enter image description here

3 Answers 3


1)First, create a virtual host for your Magento root directory. If you don't know how to set up virtual host please follow the link: https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-14-04-lts

Next, you need to edit the file named makeMediaPath.js which is placed in the path


Now change the following line

const mediaPath = 'http://magento23.com/pub/media/catalog';

In the above line please replace magento23.com with your virtual host


2) And also you can change the /pwa-studio/packages/venia-concept/.env file with


In the above line please replace magento23.com with your virtual host

then run yarn run build

and yarn run watch:venia

  • not find makeMediaPath.js in pwa-studio/packages/venia-concept/src/util/makeMediaPath.js Apr 29, 2019 at 9:57
  • Savan Patel go with the option 2 that works fine for me Apr 29, 2019 at 10:05
  • yarn run build get error ⚠ GraphQL Error (Code: 404): {"response":{"error":"<!DOCTYPE HTML PUBLIC Apr 29, 2019 at 10:06
  • Have you updated you magento_root_directory name instead of magento_folder Apr 29, 2019 at 10:09
  • yes updated already Apr 29, 2019 at 10:19

For local development in venia-concept/.env set:



Had the same problem on magento 2.4.4
The media url printed as app.backend.test because @magento/peregrine/lib/util7makeUrl.js
was fetching store.store_code (inexistent) instead of store.code

AVAILABLE_STORE_VIEWS.forEach(store => {
    storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;

The solution was to modify webpack.config.js in the project root adding store_code to the array and assigning to it store.code

  1. around line 74, before global.AVAILABLE_STORE_VIEWS = availableStores

    const availableStores2 = {};

    availableStores.forEach((store, index) => {
        availableStores2[index] = store;
        availableStores2[index]['store_code'] = store.code;
  2. and modify
    global.AVAILABLE_STORE_VIEWS = availableStores
    global.AVAILABLE_STORE_VIEWS = availableStores2

    To assign it our new value containing store_code.

Relaunch the app to see the changes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.