Environment Variables in Hydrogen Development

[braginteractive]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.1.5

What version of Remix are you using?

1.12.0

Steps to Reproduce

I am trying to load data from a third party API. I have added the URLs, Tokens, and Keys to the .env file.

I am trying to access these env variables in a route loader. In remix applications this works, in a hydrogen application I am not having much success.

The Hydrogen documentation, https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables, say to refer to the Remix documentation: https://remix.run/docs/en/1.14.3/guides/envvars#server-environment-variables

export const loader = async () => { console.log(process.env.API_URL); };

Expected Behavior

Return the env variables.

Actual Behavior

"ReferenceError: process is not defined"

[jordan-diffagency]

@braginteractive The env variables can be found on the context object which is accessible in remix loaders and actions.
In the sever.js file, the context gets created and passed down in the response.

const handleRequest = createRequestHandler({
        build: remixBuild,
        mode: process.env.NODE_ENV,
        getLoadContext: () => ({session, storefront, env}),
      });

      const response = await handleRequest(request);

[braginteractive]

@jordan-diffagency thanks for this!

What about outside of loaders/actions though?

For example, an api.js file with all the fetch requests:

export async function getCustomers() {
  const res = await fetch(
    process.env.API_URL +
      "/customers/";
    {
      headers,
    }
  );
  const customer = await res.json();
  return customer;
}

Then in then customers route, the loader would be something like:

import {  getCustomers } from "~/lib/api";

export const loader = async ({ request }) => {
  const customer = await getCustomers()
  return json({ customer });
};

I guess I could pass the env as a parameter, but it would be nice if I just had access to the environmental variables in the api.js file. No?

[jordan-diffagency]

I have been resorting to passing the context as a param though I agree that it would be nice to have access to the env variables directly.