Unable to use process.env in development mode in web/frontend

ZeMiguel
Shopify Partner
1 0 0

ISSUE:

I created a Shopify APP and I can't use environment variables in development environment.

Expected behavior

Variables written in the .env file can be used inside web/frontend directory

 

Actual behavior

process.env.VARIABLE_NAME is undefined

 

Steps to reproduce the problem

  1. Create a node app via CLI command (npm init @Shopify/app@latest)
  2. Create a .env file in the root folder.
  3. Add a custom variable to the .env file (YOUR_NEW_ENV='TEST')
  4. Add the variable in the web/frontend/index.js file (console.log(process.env.YOUR_NEW_ENV))
  5. Start development mode (npm run dev)

Console shows undefined instead of the expected value (TEST)

Note: I tried this in web/index.js where I put a new .env file and then did the same things above and it worked:

  1. Added the import at the beginning of the page: import "dotenv/config"
  2. console.log(process.env.YOUR_NEW_ENV, "@BACKEND_HERE") -> Returns TEST (as it should)

Then I did the same thing but now for the folder web/frontend where:

1. Install the package dotenv for web/frontend folder

2. import "dotenv/config" in web/frontend/index.jsx

3. Error: Uncaught TypeError: Cannot read properties of undefined (reading 'reduce')

 

And now I still cannot use env variables in web/frontend directory of my Shopify App.

 

Reply 1 (1)

sniper2804
Shopify Partner
400 25 68

How can you use env variables in any frontend?


Frontend code runs in the browser of the client. Not on any server. By fundamental definition, there is no concept of env variables for frontend tech.

Automate & bulk assign products to shipping profile: Auto Shipping Profiles: Shipr
Calculate accurate shipping rates: Shipping Calculator: ShipMagic
Hide, rename, reorder payment methods at checkout: Payment Customization: PayMix