PWA Store Deployment on server - Development

Question

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.

Answer 1

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.

Answer 2

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.