Make running test app easier

[johnboxall]

commerce-sdk-isomorphic ships with a neat little test app based on create-react-app@4.3.0

It is challenging to get the app working.

• The app is served over HTTPS, but certificate used with it is self signed and not trusted by browsers. I think it comes from an older version of webpack dev server. To get past browser warnings about this, in Chrome you can type thisisunsafe.
• The default proxy configuration needs to be modified in package.json, providing a valid shortcode.
• The default config in src/config.js needs to be updated with valid values.
• The SLAS client you're using needs to be updated to have https://localhost:3000/callback be a valid redirect URI.
• Next you'll hit an issue with 404s, because in a browser, the redirect from authorize will be followed, and CRA doesn't know how to render /callback: https://github.com/SalesforceCommerceCloud/commerce-sdk-isomorphic/blob/414ff5850715d624df5f2193371a1638708760ed/src/static/helpers/slasHelper.ts#L140-L145
• Finally, you'll need to make sure the default search query actually load a product, because there seems to be some subtle bug with the text input if no search results are returned.

It is possible to jump through these hoops, but challenging:

A few ideas:

1. Consider not running the test app using HTTPS: https://github.com/SalesforceCommerceCloud/commerce-sdk-isomorphic/blob/414ff5850715d624df5f2193371a1638708760ed/package.json#L39
2. Consider updating the authorize helper to be more forgiving. We do care if the initial call to authorizeCustomer failed, but in the event that we're running in a browser, we actually do not care if we followed a redirect and the redirect failed to load, as we can still get the usid/code out of the URL, regardless of the status code of loading redirect_uri.
3. Commit valid configuration for the test app to this repo. We have public settings that we can use.
4. Chase down whatever the zero results bug in the app is!

[joeluong-sfcc]

Thanks @johnboxall for raising this issue, we've created a work item in our backlog to track this work

[johnboxall]

I tried the steps above again but it appears no longer possible to get the test app to successfully run.

First I build the lib:

nvm use 18
corepack enable
yarn install
yarn run renderTemplates
yarn build:lib 

Second I tried to run the app:

NODE_OPTIONS=--openssl-legacy-provider HTTPS=true react-scripts start

The cert that shipped with the older version of CRA we use appears to not be compatible with modern Node versions so I introduced a new flag. Though I was able to get it to start (and bypass the TLS warning with thisisunsafe) I still had TLS errors in browser when trying to connect via the proxy to Commerce API.

In addition I needed to make the following changes:

1. Update package.json::proxy to use a real shortcode.
2. Update the default searchText in src/environment/App/App.jsx to refer to something that returns results (eg. dress)
3. Update src/environment/config.js with real settings
4. Update src/static/helpers/slasHelper.ts to skip handling errors from following the callback

Going forward, I think we have a few options:

1. Seek to update to a later version of CRA, hopefully removing the TLS issues. However, I believe later versions of CRA don't include the proxy feature which we use.
2. Create a standalone little app

All of this might be easier when SCAPI ships support for CORS (removing the need for a proxy) which should come up in B2C Commerce ~24.10-ish.

Until then, an easy-ish way to test this library is to use pwa-kit-create-app@2 to generate a project where you can then edit calls to the PWA Kit:

npx pwa-kit-create-app --outputDir pwa-kit-2

Now edit this file:

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/5af2acf055beb6259b30c434891f502bdf164c7e/packages/template-retail-react-app/app/commerce-api/index.js#L48