How to use PWA studio on Warden env

[vinayshah]

Hello @davidalger ,

Can you provide some kind of documentation on how we can connect https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/project-setup/ with warden env setup so that we can have a successful running setup.

Thanks,

[mekedron]

@vinayshah just run it on you host machine and disable cors check for warden's nginx container. You can achieve this by adding following files to your .warden directory near your .env:

1. nginx-magento2.conf
2. warden-env.yml

[gitamitgit]

@mekedron, if you can please explain the above with suitable screenshots, that will help a lot, or you can make a small youtube video and share link here, thanks

[bap14]

@gitamitgit Simply follow these steps:

1. Create a folder, if it doesn't already exist, in the root of your project: .warden
2. Download the nginx-magento2.conf file and place it in the .warden directory
3. If it doesn't exist already, create the file .warden/warden-env.yml
4. Edit .warden/warden-env.yml and add the following contents:

version: "3.5"
services:
  nginx:
    volumes:
      - ./.warden/nginx-magento2.conf:/etc/nginx/available.d/magento2.conf

Then just restart your container.

[gitamitgit]

Please try understand my scenario:
1 - I generatd a warden environment, when we do that a .env file is generated.
2 - Now when I am trying to install PWA, it also generate .env file. how to overcome it ?

[mekedron]

@gitamitgit could you confirm you have running PWA studio frontend on your computer?

You can achieve that with the help of this guide:
https://developer.adobe.com/commerce/pwa-studio/tutorials/setup-storefront/

Also could you confirm that you have running Magento 2 installation via Warden? This guide can help you as well:

https://docs.warden.dev/environments/magento2.html

When you have it running, you need to pass your warden's URL to your PWA studio "MAGENTO_BACKEND_URL" environment variable:
https://developer.adobe.com/commerce/pwa-studio/api/buildpack/environment/variables/#magento_backend_url

When you open your frontend in browser you should see that it tells you that it does not have an access to you backend because of CORS issues.

To fix the CORS issues please follow the steps provided by bap14 above.
Also you'll need to makes some edit in nginx-magento2.conf and replace example.com with your own PWA studio frontend domain (most likely it's going to be localhost)

Answering to you question #2 - just install PWA studio to different folder from Warden and it should be fine.

[gitamitgit]

Hi @mekedron ,

Please go through my PWA installation scenario , so that you can understand exact issue coming:

1 - I generated a warden environment for Magento 2 , its working fine and using it - https://app.magento2.test/
2 - Now I need to create a different environement for PWA , so I created another warden environment , for that I use magento2 env-init
3 - I use this magento 2 environemnt to install PWA, and created a separate directory and Place all files in it and place above files mentioned at the root.

Please check above snapshot
Dyanmic URL is generating but nothing happens, showing below error

Need suggestions

[mekedron]

@gitamitgit could you please follow the installation steps described on the official PWA studio documentation website I provided above?

You don't need to run the PWA studio trough warden - it's a clean node js project and it does not require a lot of software to be installed on your machine like Magento does (php, redis, mariadb and rest), you just need to install node.js and I suggest you to do it via NVM.
It just does not make any sense running such a simple node js app inside a docker container. It would be just easier for you just to run it on your host machine. And the hot reloads are going to be faster during development cuz there's no "sync inside a container" delay.

But in your case as I can see you open your 0.0.0.0 in your browser and you get this "this site cant be reached" error message.
You execute the command to start PWA studio inside a warden shell, so it's inside the container. Well, the PWA studio doc assumes you run all the commands on you HOST machine, but not inside the docker container. In a very simple words, the script which starts development server just cannot properly provide you a correct url to you. It's listening to 0.0.0.0:1000 inside the container, but on you host machine you need to connect to your 127.0.0.1:DOCKER_PORT, and then docker forwards your request inside the container to 0.0.0.0:1000 address.

If you use warden, you should probably use traefik domain and subdomain configured in your warden's .env file, but with another port probably. I can't tell you more, cuz I've not ever run pwa studio under docker and warden. Actually try to follow @navarr steps, it seems like he's right and it should solve your issue, or just install and run pwa studio on your host machine outside warden.

[gitamitgit]

Thanks for explaining @mekedron

As you suggest to use a local environment , in that it is working.
its just a use case, which I was trying to manage inside warden environment.
because I was trying to use two different environement - app.pwa.test and app.magento2.test

The backend data supply is given from app.magento2.test , so it needed to be done in this manner.
I understand the explaination you provided. but still think that there should be something to manage it.

thanks once again

[mekedron]

@gitamitgit as I mentioned in the very first comment, then just try to add the following lines to your .warden/warden-env.yml file:

version: "3.5"
services:
  frontend:
    image: node:lts-alpine
    working_dir: /var/www/html/
    volumes:
      - $PWD/pwa-studio:/var/www/html:cached
    command: "yarn start"
    labels:
      - traefik.docker.network=${WARDEN_ENV_NAME}_default
      - traefik.enable=true
      - traefik.http.routers.${WARDEN_ENV_NAME}-pwa.priority=1
      - traefik.http.routers.${WARDEN_ENV_NAME}-pwa.rule=
        HostRegexp(`pwa.${TRAEFIK_DOMAIN}`)
      - traefik.http.routers.${WARDEN_ENV_NAME}-pwa.tls=true
      - traefik.http.services.${WARDEN_ENV_NAME}-pwa.loadbalancer.server.port=3000

But you need to set correct directory, port and command to run it.

Then open "pwa.magento2.test" and it should work.

[sarfaraz2714]

Hi @mekedron

I Open 3000 port as well

Port showing as well in docker ps -a command

yarn watch command also executed succesffuly in terminal

But issue is still I m geting Bad Gateway

My warden-env.yaml

can you please help here team how can I access PWA with warden.

CC: @davidalger @navarr @bap14 @vinayshah

[navarr]

@sarfaraz2714 The number one placed I'd check is the log for your pwa service. Because the error returned is "Bad Gateway", that screams to me that there is some communication issue happening when Traefik tries to talk to PWA.