Undefined cli_three process.env.{ADDITIONAL_VARIABLE_NAME} when developing on local

Open brandonpardede opened this issue 2 years ago • 3 comments

Issue summary

Undefined process.env.{ADDITIONAL_VARIABLE_NAME} file when developing on local. On production it works fine because i passed the env variable to build args

Expected behavior

process.env should reflect the updated .env on local

Actual behavior

Got undefined process.env variables on local

What actually happens?

Log shows undefined on both process.env frontend or backend (local)

Steps to reproduce the problem

Follow instructions to setup shopify template on local here: https://github.com/Shopify/shopify-app-template-node/tree/cli_three
Run npm run shopify app env show. It should show 3 environment that generated by cli: SHOPIFY_API_KEY, SHOPIFY_API_SECRET, and SCOPES
Add .env file on root directory and add key-value pair of additional environment that will be used on either frontend or backend. As an example, i added TEST_URL=http://test.com
Run npm run shopify app env pull to update the .env file with required 3 environment variables before. The .env file should be updated right now.
on web/index.js , try to add console.log(process.env.TEST_URL, '@BACKEND_HERE') on any line to debug
on web/frontend/index.jsx, try to add console.log(process.env.TEST_URL, '@FRONTEND_HERE') on any line to debug
Run yarn dev. Follow the prompt instructions to sync with the shopify app
See the backend output, it shows 'undefined, @BACKEND_HERE'.
See the frontend browser console on shopify app bridge, should output 'undefined, @FRONTEND_HERE'. Can't seem find any way to update the .env file unless i build it into production

Reduced test case

Specifications

Browser: Google Chrome
Device: MacBook Pro (13-inch, 2019, Four Thunderbolt 3 ports)
Operating System: macOS Monterey Version 12.0.1

Oct 20 '22 06:10 brandonpardede

Hey @87brandonn, I'm not sure if this helps at all but make sure you run "npm run dev | yarn dev" from the root directory of your project and not inside the root/web folder. If that doesn't work, maybe try installing dotenv and running dotenv.config() at the top of your backend & frontend files.