Hydrogen v1 - How to access env variables in client component using Oxygen?

[sebszocinski]

Hi, We need to access some ENV vars in client components which worked fine using VITE and deploying to Vercel, but once migrating to Oxygen I can no longer work out how to access env vars in a client component once deployed. It works locally if I use import.meta.env but that doesn't work once deployed to Oxygen, and Oxygen.env only works in server components.

Can anyone help?

[davidhousedev]

Yeah, we ran into this too.

VITE_ env cars are made available to the bundle at build time, not at runtime. We made the environment variables available via GitHub actions, then it worked great.

[davidhousedev]

You need to set the environment variables in GitHub, yes, but you also need to ensure that they are present in the environment when you build your frontend. This required modification of the GitHub action that builds for production.

I can share more details later 👍🏻

[davidhousedev]

Here's the point in our GitHub action where we supply the environment variables to the command, but I bet you could also do this a different way:

    - name: Build and Publish to Oxygen
      id: deploy
      uses: shopify/oxygenctl-action@v4
      with:
        oxygen_deployment_token: ${{ inputs.oxygenDeploymentToken }}
        build_command: 'VITE_ENVIRONMENT=${{ inputs.environment }} VITE_VERSION=${{ inputs.version }} HYDROGEN_ASSET_BASE_URL=$OXYGEN_ASSET_BASE_URL yarn build'

[Mminner-FortyAU]

Hey @davidhousedev, appreciate the help on all this. I've hardcoded the variable in, and it still doesn't seem to be getting access to that environment variable. I'm trying to set a string env variable for a branch deployment with import.meta.env.VITE_SANITY_STUDIO_API_DATASET (which is either the string production, staging, development) based on which branch it was deployed too. It references the .env file locally and runs fine there, but setting that env variable in Github with vars and referencing that just produces an empty variable as well.

So build_command: 'VITE_SANITY_STUDIO_API_DATASET=${{ vars.SANITY_STUDIO_API_DATASET }} HYDROGEN_ASSET_BASE_URL=$OXYGEN_ASSET_BASE_URL yarn build' returns empty in the workflow`

AND

build_command: 'VITE_SANITY_STUDIO_API_DATASET=development HYDROGEN_ASSET_BASE_URL=$OXYGEN_ASSET_BASE_URL yarn build' hardcoded returns undefined once Oxygen deploys.

Any advice on this?

[davidhousedev]

Hmm.. that seems like it'd work to me 😅

[Mminner-FortyAU]

Bummer! I'll keep poking at this.

[mhuretski]

You can proxy desired ones from server to client using react context

[Mminner-FortyAU]

Can you go into a bit more detail on this? Trying to leverage branch based environment variables in GitHub actions to define my Sanity datasets in sanity.config. But it seems like Hydrogen doesn't really provide a solid way to pass in Env vars to client side.

[duncan-fairley]

env variables should be available inside of loader context inside of routes on H2 which you could return from the loader if you really wanted it client-side:

export async function loader({ context }: LoaderArgs) {
  const { env } = context
  return { storefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN }
}

[Mminner-FortyAU]

I'm not sure why we can't use VITE modes in the Oxygen build pipeline. Would make this a lot easier.

[sebszocinski]

Oxygen and Hydrogen v1 are an absolute nightmare I lost about 4-5 days trying to get it to work, i've since reverted back to VITE / import.meta and deploying to Vercel - works a dream... it's a shame as It would be nice to use Hydrogen with Oxygen inside of Shopify but it's just too much of a pain.

[graygilmore]

Hey Seb! Could you help us understand the trouble that you ran into? Were you having trouble loading variables from .env locally? Were you unable to pass variables from a server component to a client component?

[sebszocinski]

@graygilmore since running the migration to switch our project to use Oxygen everything just stopped working. We are using an external hosted CMS for additional product content as well as other website content outside of Shopify/eCommerce.
We couldn't get both Oxygen env vars and import.meta vars to work alongside each other in local dev which just made it a pain, I think we found some kind of work around but but then using npm run preview to try and debug a deployment issue it again failed to read vars - it was just a constant battle that was infuriating. The initial Hydrogen v1 setup worked flawlessly when deployed to Vercel which just seems hilarious to think that Shopify's own Oxygen platform couldn't even get it's own product to work, but Vercel could....

[graygilmore]

Thanks! Do you have a specific example of where this fell down? As a simplified example you can pass environment variables to client components via server components:

// .env
SPECIAL_TOKEN="abc123"

// src/components/Example.client.tsx
export const Example = ({token}: {token: string}) => {
  return (
    <div>
      <p>{token}</p>
    </div>
  );
};

// src/routes/index.server.tsx
import {Example} from '~/components';

function HomepageContent() {
  return (
    <Example token={Oxygen.env.SPECIAL_TOKEN} />
  )
}

Would that kind of pattern work for you? It's important from a security perspective that runtime variables aren't exposed to the client automatically because that could give bad actors access to data that they shouldn't have (e.g. private/secret tokens).

My recollection for v1 was that import.meta.env was only available during build, not something available in the runtime, which definitely caused some confusion.

[AndreyShevel]

Guys, have you resolved it?