Reading environment variable from .env in React Custom MC app

[bengalley-e2x]

Hi there,

I'm trying to use an environment variable to read a public key from a .env file in my Merchant Center Custom App.

For example:

In the .env (in the project root):

REACT_APP_PUBLIC_KEY_TEST=foo

In the component code:

process.env.REACT_APP_PUBLIC_KEY_TEST

returns undefined no matter what I do.

Usually the REACT_APP_ prefix is required for using environment variables in this way, but I also tried with MC_APP_ prefix as well as no prefix.

Is it possible to read environment variables in this way with the Custom MC App?

Help much appreciated 🙏

Thanks!

[emmenko]

Hi, sorry for the late reply.

We don't support using environment variables like in CRA.

However, you can define this kind of information in the Custom Application config file, using the additionalEnv object.

https://docs.commercetools.com/custom-applications/development/application-config#additionalenv

{
  "additionalEnv": {
    "publicKeyTest": "something"
  }
}

These "injected" values can be accessed in the client code using the useApplicationContext hook.

import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';

const MyComponent = () => {
  const publicKeyTest = useApplicationContext(
    context => context.environment.publicKeyTest
  );
  // ...
};

https://docs.commercetools.com/custom-applications/development/application-config#runtime-application-environment

[kaluginserg]

@emmenko I have connected question:
We have several Commerce tools MC instances (projects), example:
poland-project
japan-project
italy-project

And we have one custom extension.

Question:
How to pass countryCode from MC to Custom extension (JP/IT/PL), to implement different internal logic inside custom extension?
The CountryCode - is something project specific, and we have to setup:
for "poland-project" pass "PL" into extension.
for "japan-project" pass "JP" into extension.
for "italy-project" pass "IT" into extension.

For now we are solving this issue with parsing "activeProjectKey" (using name convention) from the localstorage.

We don't want to set up different CI for each new country, it is overhead for our features. So we don't consider building and deployment to different folders.

[tdeekens]

Thanks for getting back and specifying what you're aiming to solve. Would it be possible for you to use other data from the project maybe? For example the languages, currencies or countries?

 const { language } = useApplicationContext((applicationContext) => ({
    languages: applicationContext.languages,
  }));

Would that be enough to provide the context needed to your application?