[FEATURE] Proxy configs for multiple environments

[nx-renezwinge]

Is your feature request related to a problem? Please describe.
Currently the proxy config for local development is in package.json, but if we want switch between on-demand sandboxes, then package.json must be changed. Sometimes after working the devs forgot to change the package.json.

Describe the solution you'd like
proxy or complete mobify config in package.json should be moved in separate config file.
Ideally we can make multiple environment configs.

Describe alternatives you've considered

Additional context

[bendvc]

Hi René,

We have actually just merged a feature to the SDK allowing for environment specific configuration files. You can see the PR here. But the gist of it is that we'll resolve which configuration file is used based on your current environment.

If you code is running remotely (on managed runtime) the file used will be determined via the current environments name. So if your code is running on an environment called staging, then the SDK will first look for a configuration file called config/staging.*. If there is no configuration file with that name it will look for one with the name default, and if that isn't found, it will look in the pacakage.json file for the configuration.

Similarly when you are developing locally, each developer can create their own config file called config/local.* this file by default will not be committed to github (if that is what you use) as it is listed in the .gitignore for newly generated projects. That file can have is where the developer can make changes specific to their environment (e.g. connections to their own ODS). Similarly if there is no local config, we'll fallback to looking at the default or config in the package.json.

We're looking to make a release of this feature really soon, so keep your eye out. I'm also happy to answer any other questions you have.

Additionally configuration files written in javascript, yaml, and json are supported.

Ben

[johnboxall]

Today, you can also override the proxy configs using environments variables:

• https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/proxying-requests.html#overriding-proxy-configurations-with-environment-variables

• pwa-kit/packages/pwa-kit-react-sdk/src/utils/ssr-shared.js

  Lines 117 to 133 in 915bf3e

  	// Allow override via environment variable
  	const overrideKey = `SSR_PROXY${index1}`
  	const override = process.env[overrideKey]
  	let overridden = ''
  	if (override) {
  	const match = proxyOverrideRE.exec(override)
  	/* istanbul ignore else */
  	if (match) {
  	config = {
  	protocol: match[1],
  	host: match[3],
  	path: match[5] || (config && config.path)
  	}
  	overridden = ` (overridden by ${overrideKey}="${override}")`
  	}
  	}

As an example, you could use this by re-writing npm start to load a .env file and have it inject SSR_PROXY1=https://my-ods.

[nx-renezwinge]

@bendvc & @johnboxall Thank you very much for this info :) Then we use the next days the env variables and waiting for the next version.
Last question, if the new config handling is released, the mobify config part in the package.json can be deleted? Because in the PR i didn't saw the deletion.

[bendvc]

@bendvc & @johnboxall Thank you very much for this info :) Then we use the next days the env variables and waiting for the next version. Last question, if the new config handling is released, the mobify config part in the package.json can be deleted? Because in the PR i didn't saw the deletion.

If you aren't generating a new project, only upgrading the SDK in an existing retail react app, you can't just delete it as config/default.js will not exist. You can however move the content into a newly created default.js file in the config folder and only then safely remove the mobify section. Put you don't have to do that to take advantage of per environment configs, you can simply create a locale.js developer config, or environment level config (like production.js) and it will use those only defaulting back to the mobify section of the package.json if none are found.

I'll look into a follow up for removing the mobify section in newly create retail react apps 👍