TeamsFx spfx tab project Env's replicating each other

[SHUBH12147]

Describe the bug Hi, I have created a spfx tab project from teamfx cli. i have created two env's dev & test which i am managing from teams toolkit exstension. when i deploy new update in dev env and approve it at MS teams admin portal it's automatically reflecting me at both dev & test env app. Also, can't use .env file in spfx tab project.

To Reproduce Steps to reproduce the behavior:

1. Create new spfx tab project from teamsfx cli.
2. Create new env's and provision them.
3. Deploy both env's app and approve at MS teams admin
4. Create new update for dev env and deploy it.
5. It reflects at both dev & test env apps.

Expected behavior Dev update should not be reflect at other env if we deploy new update only at dev env.

VS Code Extension Information (please complete the following information):

• Teams Toolkit extension verion: 4.1.3

CLI Information (please complete the following information):

• Teamsfx-cli version: 1.2.4

[ghost]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

[HuihuiWu-Microsoft]

Hi @SHUBH12147, multi-env feature in Teams Toolkit is slightly different for SPFx projects. In SPFx projects, user only need to login with M365 account and Teams app id will be created when provision. All the resources are hosted on SharePoint instead of Azure. So for SPFx projects, multi-env is more about app/webparts under different tenant. If the two envs are in the same tenant, any updates will reflect in the other env after you deploy which is as expected. You can create the two envs under different tenants and deploy updates to one of env will not affect another.

[SHUBH12147]

Teams id are different for each env's app. if with different teams id's they are replicating then i think it's crucial issue. Everything has been done as expected from teams toolkit when deploy app, approval also has been given to only single env's then i can't understand how it's replicating. Also, we can't go with different tenancy option bcs our app will use by same tanancy users and promote app accordingly. Is there any hack or suggestion for now so that we can't bypass this issue?

[SHUBH12147]

Hi Team, Any update or suggestion?

[HuihuiWu-Microsoft]

Hi @SHUBH12147, for the two envs, they have different Teams id but the same deployed resource. So after you deploy the Teams app manifest for two envs, both apps are having the same contents. At this point, when you create new updates and deploy to SharePoint, it takes effect for both envs which is as expected. If you're using two tenants: a product tenant and a test tenant, you can create new updates and first deploy to test tenant. If everything works as expected when you login in with a test account in the test tenant, you can then deploy the new updates to product tenant.

[SHUBH12147]

Ok thanks for updating, is there any plan in upcoming release to cater for multiple envs within one tenant. also, let us know is there any way to use environment variables within code outside config files.

[HuihuiWu-Microsoft]

1. I don't think we have any plan yet to change the behavior. Add PM @summzhan here to confirm.
2. Not sure if I understand correctly. You can certainly set environment variables by yourself and get the value in codes.

[SHUBH12147]

@summzhan can you please confirm. Right, is there any blog or guide for instruct me, i have tried many blog but can't set env variable which works outside config files.

[HuihuiWu-Microsoft]

If your Typescript code runs in Node, you can use the regular Node API process.env to get your environment variables.

[SHUBH12147]

Hi @HuihuiWu-Microsoft, For each env build(which create from teamsFx env's), process.env.NODE_ENV giving 'develoment' which is not correct. i also try for setting up .env file but that didn't work. Is there any example or blog so that i check i am not doing any mistake while setting up .env file for spfx tab project. Or if possible, is there any way to use config variable at code level.

[HuihuiWu-Microsoft]

Hi @SHUBH12147, I'm trying to understand what you're expecting. If you're expecting to set environment variables and get them from codes, you can just use process.env to retrieve the target value. If you're expecting to setup .env file by yourself and TTK will get the values per env, I don't think that works since TTK honors env files under env folder in TeamsFx project. So each env build will not get self-defined variable values.

[SHUBH12147]

Hi @HuihuiWu-Microsoft, the problem is teamfx have there own cli command : teamsfx deploy --env 'env'where we can't add other env veriable which can fill parameter in process.env and process.env.NODE_ENV only give development for every env which we set with --env variable in cli cmd. i am also suffering to setup .env file in spfx Tab project according to env.

[HuihuiWu-Microsoft]

@SHUBH12147, yes, you're right. The env variables added to .env file is designed to be used by TTK to handle different environments. All the related commands like teamsfx <command> --env 'env' will honor the variables by TTK so the builds are different under each environment. I assume process.env.NODE_ENV always returns development because you didn't set it under different .env files. You can add your self-defined env variables in .env file and use it like in other places(e.g. manifest.json file) as exising env variables do. But as I said, multi-env for SPFx project is more about app/webparts under different tenant.

[SHUBH12147]

For other development aspects other than spfx there is blog where mention how to add .env files : https://github.com/OfficeDev/TeamsFx/blob/dev/docs/fx-core/localdebug-help.md#what-to-do-if-i-want-to-add-my-own-environment-variables-for-local-debug. but i can't find any blog where i can find how can i add .env file for spfx tab project. Also, please confirm me, is there any chance of resolve env replicatiion issue wih @summzhan in future releases.

[HuihuiWu-Microsoft]

Hi @SHUBH12147, sorry that the blog you attached doesn't work for SPFx projects. Actually the way to add env variables to .env.teamsfx.local file mentioned in the blog is not for TTK: means TTK will not honor the env variables in .env.teamsfx.local, these variables set in the file are runtime config which is for app and not related to TTK env. So if you want to add environment variables for different envs honored by TTK, you can add to config.{env}.json file as other projects do (You may follow this guide); If you want to add environment variables for local debug honored by app, you can add env field to launch.json configurations as a workaround.

[SHUBH12147]

Same thing i was want to let you know at .fx folder level, we can add code differentialy as per env's but i don't know how can use this at code level. also how can i setup process.env.NODE_ENV as per env's.

[HuihuiWu-Microsoft]

Hi @SHUBH12147, as I mentioned, the env variables added to config.{env}.json file at .fx folder level are for TTK to read instead of code level envs. If you want to run different logic according to process.env.NODE_ENV, you can set the environment variable on your computer and get the value in your codes. But it doesn't have any relationship with TTK built-in env concept.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[ghost]

Due to lack of details for further investigation, we will archive the issue for now. In case you still have following-up questions on this issue, please always feel free to reopen the issue by clicking ‘reopen issue’ button below the comment box. We will get back to you as soon as possible.