Data Fetch Error And Images are not Loading (Display) in PWA Magento 2.3

Question

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.

Answer 1

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

pwa-studio-release/packages/venia-concept/src/util/makeMediaPath.js

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

OR

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

MAGENTO_BACKEND_URL="http://magento23.com/magento_folder/pub"

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

then run yarn run build

and yarn run watch:venia

Answer 2

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

IMAGE_OPTIMIZING_ORIGIN=backend

Answer 3

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
   to
   global.AVAILABLE_STORE_VIEWS = availableStores2

   To assign it our new value containing store_code.

Relaunch the app to see the changes.