Home
%3CLINGO-SUB%20id%3D%22lingo-sub-855111%22%20slang%3D%22en-US%22%3ECreate%20%26amp%3B%20Setup%20a%20bot%20with%20the%20Bot%20Framework%20SDK%20for%20JavaScript%20-%20Azure%20Bot%20Services%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-855111%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20Visual%20Studio%20we%20have%20direct%20option%20to%20publish%20Azure%20Bot%20project%20to%20Azure%20Web%20Service.%3C%2FP%3E%0A%3CP%3EWe%20can%20achieve%20the%20similar%20process%20using%20Visual%20Studio%20Code%2C%20please%20follow%20the%20following%20process.%3C%2FP%3E%0A%3CP%3ECreate%20a%20Node%20JS%20Bot%20on%20Azure%20portal%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F131756i7A5429675E3F0A0F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_6.jpeg%22%20title%3D%22clipboard_image_6.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3Eonce%20you%20have%20the%20bot%20created%20please%20note%20down%20the%20following%20information%2C%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EAppID%20%26amp%3B%20Password%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F131757iE1449F62FCB50196%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_7.png%22%20title%3D%22clipboard_image_7.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSTRIKE%3EOur%20first%20step%20is%20done.%3C%2FSTRIKE%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20install%20and%20setup%20a%20Node%20JS%20Bot%20locally.%3C%2FP%3E%0A%3CP%3EFollow%20this%20article%20to%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fbot-service%2Fjavascript%2Fbot-builder-javascript-quickstart%3Fview%3Dazure-bot-service-4.0%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3ECreate%20a%20bot%20with%20the%20Bot%20Framework%20SDK%20for%20JavaScript%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EOnce%20you%20have%20the%20bot%20locally%20test%20it%20using%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FBotFramework-Emulator%2Freleases%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3EBot%20Framework%20Emulator%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F131755i2FD902871B2C412D%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_8.jpeg%22%20title%3D%22clipboard_image_8.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EYou%20should%20see%20below%20files%20in%20the%20project%20folder.%3C%2FP%3E%0A%3CP%3EIn%20%3CSTRONG%3E.env%3C%2FSTRONG%3E%20file%20update%20the%20%3CSTRONG%3EAppID%20%26amp%3B%20Password%3C%2FSTRONG%3E%20that%20you%20have%20saved%20earlier%20and%20update%20the%20same%20in%20%3CSTRONG%3E.bot%3C%2FSTRONG%3E%20file%3C%2FP%3E%0A%3CP%3EAt%20this%20point%2C%20open%20the%20bot%20folder%20in%20Visual%20Studio%20Code%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20will%20need%20%3CA%20href%3D%22https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dms-azuretools.vscode-azureappservice%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3EAzure%20App%20Service%3C%2FA%3E%20extension%20in%20VS%20code%2C%20follow%20the%20steps%20mentioned%20in%20the%20image.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F131758i349F3DBE91FF7024%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_9.jpeg%22%20title%3D%22clipboard_image_9.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EGo%20to%20Extensions%20(Ctrl%20%2B%20Shift%20%2B%20X)%20%26gt%3B%20Search%20for%20Azure%20App%20Service%20Extension%20and%20install%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F131759i55FF3316C415F7DB%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_10.jpeg%22%20title%3D%22clipboard_image_10.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ENow%2C%20log%20in%20to%20your%20azure%20account%20in%20VS%20Code%20%E2%80%93%20Click%20on%20Azure%20tab%20or%20%3CSTRONG%3ECtrl%20%2B%20Shift%20%2B%20A%3C%2FSTRONG%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F131760i2BEF489AE1553DFF%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_11.jpeg%22%20title%3D%22clipboard_image_11.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ENow%20that%20you%20have%20logged%20in%2C%20select%20the%20app%20service%20to%20which%20you%20want%20to%20deploy%20the%20project%20by%20right%20clicking%20on%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20will%20deploy%20the%20bot%20to%20Azure%20App%20Service%2C%20once%20it%20successfully%20deploys%20the%20project%20please%20test%20it%20again%20on%20the%20Azure%20Portal%3C%2FP%3E%3C%2FLINGO-BODY%3E

In Visual Studio we have direct option to publish Azure Bot project to Azure Web Service.

We can achieve the similar process using Visual Studio Code, please follow the following process.

Create a Node JS Bot on Azure portal

clipboard_image_6.jpeg

once you have the bot created please note down the following information,

AppID & Password

clipboard_image_7.png

Our first step is done.

 

Now install and setup a Node JS Bot locally.

Follow this article to Create a bot with the Bot Framework SDK for JavaScript

Once you have the bot locally test it using Bot Framework Emulator.

clipboard_image_8.jpeg

You should see below files in the project folder.

In .env file update the AppID & Password that you have saved earlier and update the same in .bot file

At this point, open the bot folder in Visual Studio Code

 

You will need Azure App Service extension in VS code, follow the steps mentioned in the image.

clipboard_image_9.jpeg

Go to Extensions (Ctrl + Shift + X) > Search for Azure App Service Extension and install

clipboard_image_10.jpeg

Now, log in to your azure account in VS Code – Click on Azure tab or Ctrl + Shift + A.

 

clipboard_image_11.jpeg

Now that you have logged in, select the app service to which you want to deploy the project by right clicking on 

 

It will deploy the bot to Azure App Service, once it successfully deploys the project please test it again on the Azure Portal