Why add UPWARD to a live Magento PWA site?

Question

I've been hacking my way through PWA Studio and UPWARD, mostly trying to build React PWAs (connected to Magento) without using the tools provided by PWA Studio, so using generic technology like Redux, Apollo Client and Apollo Server (with Express).

Now, when playing around with UPWARD, I understand that it is handy to have UPWARD running together with Venia in development: You'll get a nice hostname and SSL to play with service worker and to skip CORS issues. But other than that, there doesn't seem much added value in using UPWARD, because it doesn't have state (so no middleware-based caching). And out of the box, the Venia setup doesn't require other services except for Magento (so that the proxy-feature of UPWARD isn't needed). Also note that even in development, CORS-issues could be avoided with simple modules like mine (https://github.com/yireo-training/magento2-corshack).

What would be the added value of keeping UPWARD in the Venia configuration when pushing the PWA to production? I've seen some other StackExchange mentions around how to push Venia to a live environment, but they seem to be repeating the assumption that UPWARD is needed. Am I overseeing some additional benefit of UPWARD?

To put it differently, I've been playing with modifying the apiBase constant in Venia's index.js and replacing it with a regular Magento instance and this seems to run fine. But why wouldn't I make this adjustment?

Answer 1

What would be the added value of keeping UPWARD in the Venia configuration when pushing the PWA to production

The below links won't explain it specifically for Venia Config, but I feel it can provide a good insight in a generic sense.

RATIONALE.md will give you a detailed explanation of the context that led to the introduction of UPWARD, and the problems it intends to solve.

UPWARD_MAGENTO.md will give you context on how UPWARD fills a need in Magento PWA Studio and Magento 2 frontend development.

Answer 2

I'll answer my own question, because since last summer, I learned quite a bit on PWA Studio.

When a request is sent from the React app (or browser) to UPWARD, it could be a GraphQL call, a static request (image, CSS, JS) or the HTML document. For the GraphQL calls, I would argue to skip the usage of UPWARD in production, by simply redirecting incoming calls on /graphql to the Magento application directly by adding a simple webserver configuration. And you don't need UPWARD for this.

Likewise, for static files, it would be better to use a webserver configuration as well. To use UPWARD as a proxy for these static files would be slow and completely unnecessary (unless you really really want to use the image convertors, but I would advice you to use a CDN for that instead).

But for the HTML calls, UPWARD is still useful. Not as a proxy, not as a means to solve CORS issues, but for SSR (Server Side Rendering). However, even then, it might be a better idea to use an alternative like Rendertron for the SSR part. And if that's the case, you don't need UPWARD at all.