App runs inside Teams, but not on localhost - microsoft-teams

I've been trying to figure this out for a while and docs are unclear. I have used the MS Teams Toolkit for VSCode to generate the project. My ngrok tunnels are up and I can run my tabs and bot inside the Teams Client after adding the Development.zip file.
I have simple tabs, but now I need to call APIs, debug stuff, log info and actually see it, etc.
I've put a simple console.log() in my code to test it out...
The terminal for the tabs, launching react, gives me this:
but when I go to localhost:3000/search (search is my tab name), I get this...
I did go back to the client, opened the DevTools, looked at the console... no console.log
I've also tried to add a certificate as mentionned in the docs, but when I go to https//localhost:3000 the Certificate options they mentionned arent visible.
You'd think an extension by Microsoft for Microsoft would work out of the box and be well documented... Oh man. I need to be able to debug this, interact with the bot, etc. just as you'd do with a standard React app...
Any tips? Thank you!

Use the Web Client instead. Easy access to your console from there and opens just fine.

Related

Microsoft Teams | Expand Tab using JS

Hi my organisation has been creating an app on microsoft teams that allows users to view glpi website inside of a teams tab. The app in itself is just a shortcut to make it easier for the users to navigate through teams.
We need to use an html file with java script in it so that the app redirects to the website in a tab as microsoft teams doesn't allow us to show external website inside of a teams app.
My question is the following : Is it possible that when as a user i click the app button and the redirection to the website tab happens, that this tab automatically expands so that it take all the space inside the teams client. I want it to trigger the "expand the tab" option. (I accept whatever solution you may find because i haven't been able to find something relevant)
This was my first post i thank you for you time and effort and for reading me, have a nice one.
(I tried my best to review this before posting but i'm not sure that i haven't made any mistakes).
I have tried a bunch of useless edits...
There doesn't seem to be any graph API available for pin an App.
We have app related graph API available for add app to team and install app to user.
Ref Doc: https://learn.microsoft.com/en-us/graph/api/team-post-installedapps?view=graph-rest-1.0&tabs=http
https://learn.microsoft.com/en-us/graph/api/userteamwork-post-installedapps?view=graph-rest-1.0&tabs=http
To redirecting your Tab in application you can use deeplink to Tab of an application.
Reference Document: https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-link-application?tabs=teamsjs-v2#generate-a-deep-link-to-your-tab

Can't debug my microsoft teams tab using DevTools

I'm trying to get console logs from my tab using DevTools in Microsoft Teams. I can open the console, but my logs are not showed and I'm getting the following error instead:
The Content-Security-Policy directive 'prefetch-src' is implemented behind a flag which is currently disabled.
I tested my application in Chrome and I can see the logs properly.
If you mean in the desktop version of Teams, then when you access via DevTools (sounds like this is what you're doing), try choosing All WebContents. Remember, Teams is an electron app historically, so everything is a "web" content - you'll get multiple DevTools windows and you need to find which is the right one for your tab. Screenshot below shows this option.
But, a better tip, if you're actively developing your tab, is just to run Teams in a browser directly (browse to teams.microsoft.com) - then it's just a single DevTools option and easier to manage.

Paste messaging endpoint in Teams Toolkit

I'm trying to make my first Teams App and having a hard time following this tutorial. One issue is I can't paste anything into the bot endpoint address field. Cmd+V does nothing, and right-click doesn't work either. Is there a way around this? It's really annoying having to paste the long alphanumeric string from ngrok, especially since it changes every time. I'm using VS Code 1.55.1 with Teams Toolkit extension 1.2.2.
This is an issue with VS code itself and waiting for a fix from them. As a workaround use App Studio in Teams where you can copy/paste.
#Elliott B, In Bot endpoint address field right-Click action won't work,but ctrl+v is working absolutely fine.

Cannot start web-simulator on google actions for API.AI project

I am working on Google Cloud Platform to develop a project in API.AI, I have an integration (in API.AI) with Google Actions (for Google Home or Google Assistant), they provide me to see my progress as real time in web-simulator, that you can find here:
https://developers.google.com/actions/tools/web-simulator
I am trying to START the web-simulator clicking on START button, then I get a window pop-up but after open, it closes, I try and try again but I obtain the same result, I cannot open the web-simulator. I have allowed the popup windows in my browser.
Of course I have completed all steps to start web-simulator...
I don't know what is happening. Someone can help me? Thank you, have a good day.
First, are you using a compatible browser? Try it in Chrome if you're
not already using it, as Chrome is a Google product, and so is the
web simulator.
Next, are you using any Ad-Blockers or
Script-Blockers like NoScript? If so, try disabling them, as they
could interfere with the operation of the tool.
If it still doesn't work, try going to an Incognito Windows by pressing the
three dots button and opening a New Incognito Window. Go to the page, and log
in. This will ensure that no cookies are interfering.
At this point, if you're still having issues, try a different browser.
(Either Firefox or Opera)

Firefox extension app hosted on server

I managed to create a Chrome extension pretty easy and the main application is hosted on my server allowing me to provide updates to the app itself without having to update the whole extension. I like the idea and I just want to know if it's possible to create a similar extension for Firefox where the main application is hosted on a live server.
In creating my Chrome extension, I followed a tutorial. The code for Chrome is included on the linked page.
It's possible to create a simple extension that loads a web app either in a panel or a tab. You should read up on the Addon SDK documentation, including the panel, tabs and getting started docs.
There is nothing wrong with this, as the web app would not have direct access to internal Firefox APIs. If you read the Addon guidelines closely that #makyen links to above, none of it covers this implementation detail. In their defence, they seem to have misinterpreted what you want to do. It looks to me like you just want to integrate / launch your web app from the browser UI?
Web application:
After finding the tutorial (please provide a link next time) I surmise you are referring to in your question, I suspect that what you are actually attempting to convey is different than how I initially interpreted your question. I have edited the question to make this more clear to people reading it in the future.
That tutorial is explaining how to place a link to a web application into the Chrome user interface. Such is, to a large extent, just a bookmark that is able to be placed within other areas of the user interface than the bookmarks bar.
If that is what you are wanting to do, then, yes, you can easily do so in Firefox. Given that the extension is not running external content in the security context of an extension (you are effectively just navigating to and displaying a website), then that should be fine as a Firefox extension. Note that you need to be sure that you are not granting elevated permissions when you launch the web application.
If running a web application is what you are wanting to do, then I suggest you might want to use different semantics to refer to what you are doing. The above is not a "Firefox extension app hosted on server". Saying it that way strongly implies that you are hosting the actual extension code on your own server. The rest of your question implies that the extension dynamically loads external code and runs it. I would suggest that you refer to it as something like: a web application that is launched (navigated to) by a Firefox extension allowing the web application to be started from an icon in the toolbar.
Extension running web sourced code:
However, if what you are wanting to do is have external content running as a Firefox extension, then implementing that functionality is a large security hole for anyone installing the extension. Even assuming that your intentions are totally benign, there is a huge security hole for anyone who is intercepting your traffic, or gains control of your server to inject code into Firefox that runs at the level of an extension (i.e. the malware can have full control of the browser and then of the computer).
Yes, it is currently possible for you to write this for Firefox.
However, given that the extension pulls code from something not packaged within the extension, the extension will never be permitted to be hosted on AMO.
In addition, the plan is that later this year there will be mandatory signing of Firefox extensions through Mozilla. I doubt that an extension like this will be permitted at that time.
You can read a set of Add-on guidelines on MDN.

Resources