Open thorsten opened 2 years ago
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.
@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:
dev:teamsfx
script in package.json, like
"scripts": {
"dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start",
"start": "react-scripts start",
},
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 :)
@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!
@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 :)
@kuojianlu Thanks for the release, we'll test the next days.
@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!!
@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...
@knoefel our Teams config is under apps/teams-web-app
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 :)
@MuyangAmigo wow, awesome news, looking forward for the April release!
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.
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:
The problem of course, is that each toolchain (CRA, Vite, etc) might set these settings differently.
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!
Hey folks, thanks a lot for providing these great feedbacks to us. We have added those into our backlog and will come back for updates!
@MuyangAmigo Is there any update on this issue? I was looking forward to use vite
for building my app, but I am facing the problem of Browser not opening after the build is ready on dev mode. Would be nice if there currently any work around to get around this issue.
@sylvesteraswin Have you had any chance to give the latest Teams Toolkit (V4.1.1) a try? We have added the support to customize the behavior of local debug. For example you could change the Start frontend
section with the command you want to use with vite
and make sure to update the endsPattern
so VS Code knows when commands execution is done and will open the browser.
Let us know if you face further challenges. CC: @swatDong @jidddddd
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
@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_PAGEURL 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.
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
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, :)
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 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.
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
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
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?
@ludes2 Please verify:
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
.
@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.
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!