[FEATURE] Add build process for CSR only for use in hybrid apps

[nx-andreashabermann]

Is your feature request related to a problem? Please describe. PWA kit is currently designed to be used with SRR, which is good for website scenarios, but leads to some problems when you want to use it in hybrid app as with Cordova.

Describe the solution you'd like A second way to build pwa kit so both client and server js get complied for CSR only use (with an index.html file that can be used as starting point for hybrid app). Main problem is the reliance on server side rendered data to be always present in the current setup. Best would be to have the basic implementation for CSR in SDK and based on this a working example in PWA. It should be possible to switch between SSR and CSR builds by configuration. The solution should not be a complete hybrid app setup, including the example pwa into a wrapper like cordova could be a readme example.

Describe alternatives you've considered Create native app version using ReactNative

Additional context I created a prove of concept that PWA kit can be adjusted to render on client side only using an index.html file as starting point. This POC uses PWA as base without adjusting the SDK, calls to SDK code sometimes need to overriden by custom code. Problems faced during implementation of the POC:

• Reliance on server side rendered data > most data can be omitted if App Component loads data on the first access > _app needs adjustments to load data
• window.Progressive needs to be present as well as default locale
• Icons > need to have different webpack setup to include icons on clientside
• Server needs to send index.html on all requests

[drewzboto]

I wanted to confirm your approach here, as we have done some similar work in the past, but didn't carry that forward into PWA Kit.

Are you looking to take your PWA Kit code and bundle it directly in a hybrid cordova-based native app, which doesn't require any additional downloading of files/assets from PWA Kit and Managed Runtime>? Or are you trying to embed a PWA kit site into a cordova-based webview (say use the existing cart/checkout pages from PWA Kit within a hybrid native app webvview)?

We've done the 2nd approach in the past, but we haven't focused on the 1st approach at all, and that does reflect in the SSR setup and build setup

[drewzboto]

@nx-andreashabermann tagging you here to make sure you saw my clarification questions. Thank you!

[johnboxall]

Making assumptions about what you're asking for, if you'd like to use Managed Runtime to host a "vanilla" React client side rendered app, you can use "Hello World" template as a starting point:

https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/hello-world

There is also a experimental version of this template in our upcoming major version:

https://github.com/SalesforceCommerceCloud/pwa-kit/tree/black-friday-hackathon/packages/hello-world

[nx-andreashabermann]

Basically the final goal should be the 1st approach. Using hello-world would mean to start at 0, at least it should be possible to set up nearly anything from that starting point, but the development time will much higher that way.

Here are the problems I got to when trying to use pwa-kit as base implementation with client side code in the hybrid app bundle:

1. Routing: would be easier to have hash based routing for this approach
2. Proxying/Development setup: The setup for development especially proxying the requests to the apis can make different problems, e.g. CORS and building the proxy server URLs.
3. Some Commerce API endpoints do not support OPTIONS requests, so CORS preflight requests will cause errors if they get proxied to these APIs

Clientside rendering itself works as expected, as PWA is a react app.

[johnboxall]

Quick update, we're continuing to evaluate SSG/CSR on Managed Runtime but at this time it is not on the committed roadmap.

[git2gus[bot]]

This issue has been linked to a new work item: W-14515712