1

I would like to know how to deploy PWA store (With magento pwa-studio) on staging or any other server without passing the PORT number ?

I am working on currently PWA demo instance (Latest Magento version 2.3.1) - as PWA apps running with port number only - URl like - local.pwa.local:2823 (So URL with Port number)

What i want is to run PWA application on my server without port number,directly with the domain name Like - https://mypwa.com

As of now what i have tried as an prerequisite is as below :

  • SSL is already enabled on server
  • PWA is running with PORT Number on server
  • Able to set my custom URL with Port number on server
  • Using nginx reverse proxy i have redirected port number with 443 and store is loading with only domain as well - but issue here is assets are not loading and it gives error.
  • It giving CORS policy error as well.

Can anybody have achieve the same ? is there any standard practice that we need to follow to deploy the pwa-studio ?

Looking forward to here your thoughts/suggestions on the same.

  • what is your issue or error exactly? – MagenX May 20 at 13:56
  • @MagenX - not able to deploy my PWA store without port number - i want to run PWA studio without port number directly on domain name ! – Manthan Dave May 20 at 17:57
  • but you already have nginx proxy?? just add CORS parameters to location/assets – MagenX May 20 at 18:56
  • Access to font at 'mypwaporturl:8009/8544b6b0c55e443658e8863593e2f222.woff2' from origin 'mypwadomainurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. – Manthan Dave May 21 at 6:56
  • @MagenX Above is the error which i am still facing ! – Manthan Dave May 21 at 6:56
0

I know this answer isn't terribly helpful but it's an honest assessment of where we are May 2019. Magento 2 PWA toolkit/theme isn't production ready yet. You will face an uphill battle to get something with a domain name live.

0

look at example for vue-storefront configuration. https://www.vuestorefront.io/

it is much better. https://docs.vuestorefront.io/guide/installation/production-setup.html#nginx

simply run your stack on 127.0.0.1:xxxxbut create proxy_pass for any relative location

location / {
    proxy_pass http://127.0.0.1:3000/;
}

location /assets/ {
    proxy_pass http://127.0.0.1:3000/assets/;
}

location /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
}

location /img/ {
    proxy_pass http://127.0.0.1:8080/img/;
}

so every external request to https://mypwa.com/img/resize/ will be proxied inside your stack, on local host http://127.0.0.1:8080/img/.

for any CORS errors, you can add into location default config:

        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;

        if ($request_method = OPTIONS ) {
        add_header 'Access-Control-Allow-Origin' *;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, HEAD, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Origin,Referer,X-Csrf-Token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
      }

if you post your exact errors, we can fix it much faster.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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