[BUG] Environment variables in `hydrogen.config.ts` don't work with `npm run preview`

[ramiroazar]

Describe the bug

The demo store and other examples use a combination of environment variables and hardcoded values in hydrogen.config.ts.

https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/templates/demo-store/hydrogen.config.ts

When installing the Hydrogen sales channel app in Shopify and connecting it to an existing repository, it creates a pull request which replaces these conditionals with just environment variables.

This is fine as long as the environment variables are defined, which works locally during development and with Oxygen after a deployment.

However, this doesn't work when previewing the project locally using yarn run preview, it seems the environment variables are missing.

The pull request causes a bit of confusion while installing the sales channel, it can effectively introduce an issue during development if environment variables have not been previously defined and also forces these values to be hardcoded back in because of preview not working.

I actually prefer these values to be exclusively handled using environment variables, but this isn't currently possible due to previews not working.

To Reproduce

1. Create a Hydrogen storefront with the Demo Store template (e.g. npm init @shopify/hydrogen -- --template demo-store --ts)
2. Create .env file
3. Remove conditionals from hydrogen.config.ts
4. Populate environment variables referenced in hydrogen.config.ts (e.g. PUBLIC_STORE_DOMAIN, PUBLIC_STOREFRONT_API_TOKEN, etc)
5. Run yarn run dev
6. Notice project loads fine
7. Run yarn run preview
8. Notice projects fails because of missing variables

Expected behaviour

Environment variables in hydrogen.config.ts should work with yarn run preview.

• Hydrogen version 1.5.0
• Node version 16.18.0
• Device details iMac (macOS Monterey 12.4)