1

Teams App not picking up env variables from .env.teamsfx.local (files generated automatically by toolkit) while running locally, process.env is an empty object. Below are the scripts from package.json:

"start": "env-cmd --silent -f .env.teamsfx.local react-scripts start",
"build": "env-cmd --silent -f .env.teamsfx.local react-scripts build",

This works when I create a new .env file but does not pickup env variables from .env.teamsfx.local file.

Note: package.json and env files are in the same directory i.e root directory

Nicholas Obert
  • 1,235
  • 1
  • 13
  • 29
Naina
  • 63
  • 6
  • Could you please share the document you have followed or the repro steps? – Meghana-MSFT Aug 23 '22 at 06:39
  • @Meghana-MSFT - I have teams react app on the azure. I use teams toolkit for configuring and getting env variables. When I am running the application via debug & run command of vscode editor, the app is running on local host but it is not interactive, unable to edit any information Because I don't get env while running app locally I'm doing a console log with "process.env", it's an empty object. This is the script which I am using to start: "start": "env-cmd --silent -f .env.teamsfx.local react-scripts start" If I create an .env file & manually add all variables, then its working fine – Naina Aug 23 '22 at 07:49

1 Answers1

0

How did you start your react app? Just run npm run start and I believe the env variables from .env.teamsfx.local will be injected into the process.

Kuojian Lu
  • 66
  • 1
  • We are using debug and run option (Chrome) from Vs studio code to run the react app. This is the script which is written in package.json "start": "env-cmd --silent -f .env.teamsfx.local react-scripts start", – Naina Aug 23 '22 at 07:24
  • If there is a `dev:teamsfx` script in your `package.json` and how it looks like? – Kuojian Lu Aug 23 '22 at 07:35
  • Yes these are the scripts from package.json: "start": "env-cmd --verbose -f .env.teamsfx.local react-scripts start", "build": "env-cmd --silent -f .env.teamsfx.local react-scripts build", "build:teamsfx": "cross-env-shell \"env-cmd -f .env.teamsfx.${TEAMS_FX_ENV} npm run build\"", "build:teamsfx:dev": "cross-env TEAMS_FX_ENV=dev npm run build:teamsfx", – Naina Aug 23 '22 at 07:52
  • Seems no `dev:teamsfx`? And how the command of "Start Frontend" task in `.vscode/tasks.json`? – Kuojian Lu Aug 23 '22 at 08:02
  • This is the command for Start Frontend vscode/tasks.json: ` { "label": "Start Frontend", "dependsOn": [ "teamsfx: frontend start" ], "dependsOrder": "parallel" }, ` – Naina Aug 23 '22 at 08:15
  • For dev:teamsfx should I try adding this: `"dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run dev"` – Naina Aug 23 '22 at 08:27
  • Oh, I see. Your project is not up-to-date. You can follow the steps to solve your problem: 1. Add a script `"dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start"` in `package.json`. 2. Update the "Start Frontend" task like this: https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/hello-world-tab/.vscode/tasks.json#L35-L44. – Kuojian Lu Aug 23 '22 at 08:55
  • Thanks for the solution Kuojian, Should I just copy `Start Frontend task` or any other tasks as well? When I just copied `start frontend task` and the added the script for `dev:teamsfx` and did a debug and run, start frontend task kept running and the browser never came up with the application – Naina Aug 23 '22 at 09:34
  • You are welcome. I recommend you copy all contents from `.vscode/tasks.json` and `.vscode/launch.json`, then try debugging again. Remember to backup your original files in case any error happens. – Kuojian Lu Aug 23 '22 at 09:41