At the start we have our webpart created and deployed on Microsoft Teams. Information on how to do it you can find in Microsoft tutorials<\/a>.<\/p>\n\n\n\n First of all, we need to check the version of SPFx in our project. It needs to be 1.13<\/strong> or higher<\/strong>. So go to package.json and check if every SPFX package is 1.13 or higher, if not you need to upgrade them.<\/p>\n\n\n\n The second step is to add fast-serve<\/strong> to our project to do this we go to the terminal and install it with the command:<\/p>\n\n\n\n Then, we run it in the project folder with spfx-fast-serve which will create a fast-serve folder and patch gulpfile.js<\/p>\n\n\n\n Now, we run npm install to install our project.<\/p>\n\n\n\n Tip:<\/strong> full guide how to migrate your project to fast-serve<\/a> can be found on spblog.<\/p>\n\n\n\n The next step is to add NGROK to our project. So, to do this, we need to run:<\/p>\n\n\n\n Then, we need to register on the ngrok\u2019s page<\/a> and get Authtoken which will be needed in the next step.<\/p>\n\n\n\n After getting your Authtoken go back to the terminal and run.<\/p>\n\n\n\n Then run:<\/p>\n\n\n\n and you will see below window:<\/p>\n\n\n\n Now, you need to update configuration<\/strong>.<\/p>\n\n\n\n Go to config\/serve.json and change hostname to your ngrok address:<\/p>\n\n\n\n “hostname”: \u201d YOUR_NGROK_ADDRESS\u201d,<\/p>\n\n\n\n Whole configuration below:<\/p>\n\n\n Then, go to fast-serve\/webpack.extend.js and add NgrokServePlugin plugin (with the same host as before for the “host” plugin parameter).<\/p>\n\n\n\n Whole configuration below:<\/p>\n\n\n Now, your application is ready to be served so you run:<\/p>\n\n\n\n You are going to receive information needed in later step: query string and ngrok address that your project is running at:<\/p>\n\n\n\n We can move to our mobile device. You need to have your Developer Options turned on and Enabled USB Debugging (here you can find the tutorial how to do it<\/a>).<\/p>\n\n\n\n Then, you go to Microsoft Teams app > Tap on the icon with your photo or initials in the top left corner > Tap Settings > Tap About and Turn Developer preview on:<\/p>\n\n\n\n Now navigate to your app in Microsoft Teams and run to be mobile device screen is displaying it.<\/p>\n\n\n\n Go back to your PC, open Chrome and go to chrome:\/\/inspect\/#devices in the address bar.<\/p>\n\n\n\n Now you should be able to see your device and WebView of your teams app<\/p>\n\n\n\n Click on Inspect and you will see this window:<\/p>\n\n\n\nAdd fast-serve<\/strong><\/h2>\n\n\n\n
![\"npm](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/01.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"spfx-fast-serve\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/02-1024x178.png\")
<\/a><\/figure><\/div>\n\n\n\nAdd Ngrok<\/strong><\/h2>\n\n\n\n
![\"npm](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/03.png\")
<\/a><\/figure><\/div>\n\n\n\n![\".\/ngrok](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/04.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"ngrok](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/05.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"ngrok](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/06.png\")
<\/a><\/figure><\/div>\n\n\n\n\n{\n "$schema": "https:\/\/developer.microsoft.com\/json-schemas\/core-build\/serve.schema.json",\n "port": 443,\n "hostname": "0611-217-153-182-34.eu.ngrok.io",\n "https": true,\n "initialPage": "https:\/\/localhost:5432\/workbench",\n "api": {\n "port": 5432,\n "entryPath": "node_modules\/@microsoft\/sp-webpart-workbench\/lib\/api\/"\n }\n}\n<\/pre><\/div>\n\n\n\nconst { NgrokServePlugin } = require("spfx-fast-serve-helpers");\n\nconst webpackConfig = {\n plugins: [new NgrokServePlugin({ host: "0611-217-153-182-34.eu.ngrok.io " })],\n};\n\nconst transformConfig = function (initialWebpackConfig) {\n\n return initialWebpackConfig;\n};\n\nmodule.exports = {\n webpackConfig,\n transformConfig,\n};\n<\/pre><\/div>\n\n\nAssembly all together<\/strong><\/h2>\n\n\n\n
![\"npm](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/07.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"fast-](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/08-1024x87.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"Microsoft](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/09-485x1024.jpg\")
<\/a><\/figure><\/div>\n\n\n\n![\"Customize](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/10.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"DevTools\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/11-1024x299.png\")
<\/a><\/figure><\/div>\n\n\n\n
![\"Window\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/12-1024x553.png\")
<\/a><\/figure><\/div>\n\n\n\n![\"window\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/04\/13-1024x272.png\")
<\/a><\/figure><\/div>\n\n\n\n