Create configurable frontend start task

[thorsten]

Is your feature request related to a problem? Please describe.
Our Teams App project is using a based Nx mono repo and we want to use all Nx commands. Currently this is not possible as TeamsFX relies on the hard coded react-scripts execution:

https://github.com/OfficeDev/TeamsFx/blob/483a4e129b9ec7c34f3b93f7d593ac2b363fd697/packages/fx-core/src/common/local/taskDefinition.ts#L26

Using a custom command in Nx does not solve the issue as depending on "react-scripts" avoids using alias imports. We need alias imports in tsconfig.json for the usage of shared Nx libraries to avoid duplicate code.

Therefore we want to remove the whole "react-scripts" dependency.

Describe the solution you'd like
A configurable frontend start command in localSettings.json file would be awesome to avoid the hard dependency of the "npx react-scripts" call in the frontend start task.

Describe alternatives you've considered
Overwriting the local "npx react-scripts" command via bash function didn't work and is not a suitable solution for the future as it needs to be configured outside of the project.

Thank you very much!

[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.

[kuojianlu]

@thorsten Thanks for your feature request. The start scripts customization is under our consideration and we released this feature in Teams Toolkit 3.4.0. You can use the latest version to create a new project and it will meet your requirement. The changes in the new version are:

1. Add a dev:teamsfx script in package.json, like

    "scripts": {
        "dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start",
        "start": "react-scripts start",
    },

2. Instead of hard coding the command as npx react-scripts start in code, use npm run dev:teamsfx in tasks.json to start the task. So you can update the start script as your needs.

A whole latest sample can be seen here. Let me know if you have any questions :)

[thorsten]

@kuojianlu Thank you very much!

Yes, it works via VS Code. In our case we're using it via teamsfx-cli and not via VS Code. (Background info: we're running E2E tests for our Teams app via Playwright on Azure DevOps.

How is it possible to use the commands above from the teamsfx-cli? There it seems to be hardcoded as it always uses "npx react-script start".

Thank you very much in advance!

[kuojianlu]

@thorsten Excited to know that you use teamsfx-cli and Playwright to run E2E test for a Teams app! We considered the same thing. What we did is using vscode-extension-tester to start debugging then using Playwright to test.

For teamsfx-cli we just released v0.11.1, which also supports the start scripts customization. Please try it and let me know if you have any questions :)

[thorsten]

@kuojianlu Thanks for the release, we'll test the next days.

[knoefel]

@thorsten Thx for opening this thread!

I'm facing the same problem right now as i'm trying to integrate teams into an existing react nx repo. I'm a little bit lost right now where to put the teams config files, did you put everything at the root folder, or within the apps/{app-name} directory?

Is there maybe any resource on how to integrate nx with teams? Unfortunately i didn't find anything related.

Thx in advance for any feedback or tip!!

[zamarawka]

@knoefel faced with this problem too.
I placed all fx files in separate directory and use this feature to link cli with my main app
To link npm scripts without duplications I use

npm run --prefix <path/to/directory/with/package.json/file> start

But anyway, at now add fx to existing app is really painful...

[thorsten]

@knoefel our Teams config is under apps/teams-web-app

[MuyangAmigo]

Hey @thorsten and @zamarawka , thanks for reaching out! Our team has feature planned to help add "fx" (meaning TeamsFx required configurations and manifest template) into existing applications/directory via teamsfx init, we will ship a preview feature in early April and would love to see your feedback. Please stay tuned with us :)

[thorsten]

@MuyangAmigo wow, awesome news, looking forward for the April release!

[AndrewCraswell]

Something I've encountered on our app is that the added time to start the Teams app in debug, which happens after Create React App builds the app -- takes a very long time. As our app has grown, CRA build times became very very long. One of my goals after switching to Teams Toolkit was to also swap out the CRA toolchain for Vite. After trying this, the build times indeed came down dramatically, and the developer experience was great. However, I couldn't get Teams Toolkit to integrate with Vite. There seems to be too many hardcoded assumptions made in the Teams Toolkit code.

1. The PORT being set to 53000 was the first hurdle. Luckily with some tweaking in the Vite config, I was able to overcome this. But I'm looking forward to a future update where Teams Toolkit doesn't assume port 53000.
2. The second issue is that internally, the Toolkit assumes important environment variables begin with "REACT_". However, Vite uses a different prefix: "VITE_". The toolkit automatically generates variables with the "REACT_" prefix, which won't be discovered when Vite loads the environment variables.
3. Third issue I hit was related to the start task. Based on the discussion above, I was able to configure it to run the Vite start task instead of the CRA task. However, when the build completes and initiates watch mode, the Toolkit never launches the browser window to view the app. But when I terminate the Vite start process on the command line, only then will the Toolkit launch the browser window.

It seems like there's enough things that need to be configurable, that the Teams Toolkit extension should get a VS Code extension settings page where these values can get configured:

• Environment variable prefix (default: "REACT_")
• Start task (default: "react-scripts start")
• Port (default: 3000)
• Https (default: Yes)
• Hostname (default: "localhost")

The problem of course, is that each toolchain (CRA, Vite, etc) might set these settings differently.

[richw-kai]

We're looking at using Vite for our setup, and actually hoping to move away from using React and use Vue.js for our frontend. I'm facing the same problem where the startup using vs code toolkit will pause until I terminate the terminal session that Vite has run in - and at this point it will open up the Teams app in a browser - of course it is too late here - I'm wondering if there is a specific signal in the CRA series of commands you listen for that Vite watch mode isn't firing?

When using the fx cli I face the same issue but of course the Vite command is backgrounded so I have no way of starting it.

Any thoughts would be appreciated for getting the teamsfx working with Vite as I think it will increase developer productivity greatly!

[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. As it is labeled with feature-request, it will be manually handled

[cleferman]

@AndrewCraswell I was able to make vite work with teamsfx as follows:

1. is easily fixable by changing the PORT in vite-config.ts as you mentioned.
2. the TeamsFX constructor expects to have REACT_APP_CLIENTID and REACT_APP_START_LOGIN_PAGE_URL but VITE only loads variable with starting with VITE_. We can change that with VITE's envPrefix prop:

import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';
import svgr from 'vite-plugin-svgr';
import react from 'vite-preset-react';

export default defineConfig({
  server: {
    https: true,
    port: 53000,
  },
  envPrefix: ['VITE', 'REACT_APP'],
  plugins: [mkcert(), react(), svgr()],
});

Now that we manage to load REACT_APP variables into import.meta.env we also have to pass them to the TeamsFX constructor:

const teamsFx = new TeamsFx(IdentityType.User, {
  clientId: import.meta.env.REACT_APP_CLIENT_ID,
  initiateLoginEndpoint: import.meta.env.REACT_APP_START_LOGIN_PAGE_URL,
});

await teamsFx.login();

Couldn't find any docs on what those custom settings are but peaking at TeamsFX source code gave me what I needed.

3. @MuyangAmigo thx for your reply it was of much help.
   To announce that vite finished its build we have to modify the tasks.json file as follows. Look for the Start Frontend task

{
  "label": "Start Frontend",
  "type": "shell",
  "command": "npm run dev:teamsfx",
  "isBackground": true,
  "problemMatcher": {
    "pattern": {
      "regexp": "^.*$",
      "file": 0,
      "location": 1,
      "message": 2
    },
    "background": {
      "activeOnStart": true,
      "beginsPattern": ".*",
      "endsPattern": "  ➜  Network: use --host to expose"
    }
  },
  "options": {
    "cwd": "${workspaceFolder}/tabs"
  }
}

Inside the endsPattern prop just put whatever VITE's terminal ends in. I just copy-pasted the ➜ Network: use --host to expose line. And now it works.

[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. As it is labeled with feature-request, it will be manually handled

[Ratomir]

Hi all,

We have the mono repo with the nx too. The example with the hello-tab and react hello world made with the nx cli is published on my repository, https://github.com/Ratomir/teams-toolkit-with-nx
The teams application is under the apps/rvsteams folder. I moved the fx files to the root of the repository so that the teams toolkit can understand that there is the teams project.
Also, I modified the Start frontend task to run the teams app with the nx, maybe I am doing it wrong, but I am not sure.
@kuojianlu I couldn't find your example with the nx, sorry.
Not sure, but I believe that the hello-tab example with the nx would be much more than beneficial for the community, I am willing to help. Not sure in which direction to go to not miss something crucial in the beginning and finish it with the wrong concept. I am sure that your help will be welcome with a good foundation.

Kind regards, :)

[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. As it is labeled with feature-request, it will be manually handled

[kuojianlu]

@Ratomir Sorry for the late reply. I think your example is not completely compatible with Teams Toolkit. When debugging (F5), Teams Toolkit will generate tabs/.env.teamsfx.local and write the environment variables for tab app to this file. The command of your "Start frontend" task is npx nx run rvsteams:serve --verbose, will it consume the environment variables in tabs/.env.teamsfx.local?

We are refactoring Teams Toolkit, making it more transparent and customizable. I believe it will be easier to develop a mono repo with Teams Toolkit then.

[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. As it is labeled with feature-request, it will be manually handled

[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. As it is labeled with feature-request, it will be manually handled

[ludes2]

Hello everyone, has anyone found a solution to the problem? I have a TeamsFx application that was created with the Teamstoolkit v5 and I have implemented everything as described by @cleferman . The browser opens in Teams, but apparently there is a problem with the index.html.

Does somebody has any idea?

[kuojianlu]

@ludes2 Please verify:

1. Did the tab app start successfully?
2. Did you use the SSL certificate in your tab app?

Please note that Teams Toolkit provides the ability to generate and set the SSL certificate for tab app, i.e., the devTool/install action in teamsapp.local.yml.

[ludes2]

@kuojianlu thank you for your response. I was able to fix the problem by installing a vite plugin mkcert as mentioned by @cleferman. After that, i had problems with the react preamble. I could manage it by adding the following configuration in the react plugin in the vite.config.ts file
...
plugins: [mkcert(), react({
include: /\.jsx?$/
})]
...
The solution is fully working now. thank you.

[MuyangAmigo]

Addressed in the latest Teams Toolkit.