SPFX with DevOps using SharePoint ALM & Blob Storage

Implement SPFx (SharePoint Framework) deployment with DevOps using SharePoint ALM Commands & Blob Storage

Azure DevOps (Visual Studio Team Services / Team Foundation Server) consists of a set of tools and services that help developers implement DevOps, Continuous Integration, and Continuous Deployment processes for their development projects.

This article explains the steps involved in setting up your Azure DevOps environment with Continuous Integration and Continuous Deployment to automate your SharePoint Framework builds, unit tests, and deployment.

SharePoint ALM (Application Life Cycle Management) APIs provide simple APIs to manage deployment of your SharePoint Framework solutions and add-ins across your tenant or Site Collection level.

ALM APIs can be used to perform exactly the same operations that are available from a UI perspective

Continuous Integration

Continuous Integration (CI) helps developers integrate code into a shared repository by automatically build  and packaging the solution each time new code changes are submitted.

Setting up Azure DevOps for Continuous Integration with a SharePoint Framework solution requires the following steps:

Office Azure & SharePoint ALM - Build Pipeline

• Node 10.x
• Gulp Clean
• Gulp Build
• Gulp Bundle --ship
• Gulp Package-Solution --ship
• Publish Build Artifacts  (Task Version 1)
• "Display Name" -> Publish Artifact: CDN
• "Path to Publish" -> temp/deploy
• "Artifact Name" -> CDN
• "Artifact Publish Location" -> Azure Pipeline
• Publish Build  Artifact
• "Display Name" -> Publish Artifact: App
• "Path to Publish" -> sharepoint/solution
• "Artifact Name" -> App
• "Artifact Publish Location" -> Azure Pipeline

Continuous Deployment

Continuous Deployment (CD) takes validated code packages from build process and deploys them into a staging or production environment. Developers can track which deployments were successful or not and narrow down issues to specific package versions.

Setting up Azure DevOps for Continuous Deployments with a SharePoint Framework solution requires the following steps:

• Office Azure & SharePoint ALM - Build Pipeline
• Azure file copy (Task Version 2)
• "Display name"-> AzureBlobFileCopy
• "Source"->  $(System.DefaultWorkingDirectory)/_AzureDevOpsCI/CDN
• "AzureConnectionType"-> Azure Resource Manager
• "Azure Subscription"
• "Destination Type"-> Azure Blob
• "RM Storage Account"- > 
• "Container Name"->
• SharePoint ALM: Catalog Scoped Actions
• "Display name"->SharePoint ALM: Add Solution Package
• "Connection to SharePoint" -> commsite01
• "Action"-> Add Solution  Package
• "Path to SharePoint Solution Package"-> $(System.DefaultWorkingDirectory)/_AzureDevOpsCI/App/devops-01.sppkg
• "
• "PackageId output variable"-> AppPackageId
• SharePoint ALM: Catalog Scoped Actions
• "Display name"->SharePoint ALM: Deploy Solution Package
• "Connection to SharePoint" -> commsite01
• "Action"-> Deploy Solution Package
• "Id of the package in the SharePoint App Catalog"  -> $(AppPackageId)

End to End implementation SPFx deployment using Azure DevOps with SharePoint (Application Life Cycle Management) & Blob Storage for Static files.

Build SPFX (SharePoint Framework) Bot Using Azure Bot Framework SDKV4 With Luis And QnA Maker

The zure Bot Framework SDKV4 can be used with LUIS models and QnA Maker knowledge bases. It helps to determine which LUIS model or QnA Maker knowledge base best matches the user input.

 

SPFX (SharePoint Framework) is the recommended and only option to deploy Azure bots into SharePoint Online Modern Sites.

 

In this article, I am going to extend my previous article with SPFX (SharePoint Framework).

https://manojmittalblogs.blogspot.com/2020/04/conversation-bot-using-luis-and-qna.html

SPFX (SharePoint Framework) interacts with Azure Bot Services via directline.

 

Let's get started with implementation steps. 

 

Step 1

 

Navigate to Deployed Azure Bot and Add Direct Line as Channel & get Secret Key

1. Select Channel and add a featured channel option; i.e. Direct Line, Ms Teams and Cortona. Select Direct Line to add.
2. As you select direct line as channel, it will be added.
3. Click edit to get the secret key. This key will be used in SPFX webpart to post requests to bot via direct line api & secret key. 

Step 2 - Create SFPX Project

1. Open Command Prompt or Visual Studio Code and Navigate or create a blank folder; i.e. ChatBot, and use CD command to navigate into folder.
2. Type yo@Microsoft/SharePoint generator to create a framework.
3. Type Solution Name: spfx-chat-bot
4. Select SharePoint Online
5. Select option to place a file as "Current Folder"
6. Place the WebPart Name & Description as ChatBot
7. Select framework as React to start.

Step 2 - Install NPM Package

 

Install the below defined npm packages to SPFX solution. 

1. npm install botframework-directlinejs  
2. npm install botframework-webchat  

Step 3

 

Create State Class for Modal Dialog

 

State will hold variable to switch the modal dialog box.

1. export interface IChatBotState {    
2.     showModal: boolean;    
3.     isDraggable: boolean;    
4.     directline: any;    
5.     styleSetOptions: any;    
6. }     

Step 4 - Update Properties Interface

 

Properties have variables which help to set background color, font etc. 

1. import { IWebPartContext } from '@microsoft/sp-webpart-base';  
2. export interface IChatbotProps {  
3.   description: string;  
4.   directLineToken: string;  
5.   bubbleBackground: string;  
6.   bubbleTextColor: string;  
7.   bubbleFromUserBackground: string;  
8.   bubbleFromUserTextColor: string;  
9.   backgroundColor: string;  
10.   botAvatarImage: string;  
11.   botAvatarInitials: string;  
12.   userAvatarImage: string;  
13.   userAvatarInitials: string;  
14.   hideUploadButton: boolean;  
15.   sendBoxBackground: string;  
16.   sendBoxTextColor: string;  
17.   context: IWebPartContext;  
18. }  

Step 5 - React Component Implementation

 

Define construcutor, which will help to initilaize the defined properties and set the state variable.

1. constructor(props) {  
2.   super(props);  
3.    
4.   this.state = {  
5.     showModal: false,  
6.     isDraggable: true,  
7.     directline: null,  
8.     styleSetOptions: styleOptions  
9.   };  
10.   this._showModal = this._showModal.bind(this);  
11.   this._closeModal = this._closeModal.bind(this);  
12. }  

Show Modal and Close Modal used to set toggle variable.

1. private _showModal = (): void => {  
2.    this.setState({ showModal: true });  
3.    this.fetchToken();  
4.  };  
5.   
6.  private _closeModal = (): void => {  
7.    this.setState({ showModal: false });  
8.  };  

Initiate the post request to directline .

1. async fetchToken() {  
2.    var myToken ='<<--Secret Key-->>';  
3.    const myHeaders = new Headers()  
4.    myHeaders.append('Authorization', 'Bearer ' + myToken)  
5.    const res = await fetch(  
6.      'https://directline.botframework.com/v3/directline/tokens/generate',  
7.      {  
8.        method: 'POST',  
9.        headers: myHeaders  
10.      }  
11.    )  
12.    const { token } = await res.json();  
13.    console.log(token);  
14.    this.setState({  
15.      directline: createDirectLine({ token })  
16.    });  
17.    this.state.directline.postActivity({  
18.      from: { id: "serId", name: "USER_NAME" },  
19.      name: "requestWelcomeDialog",  
20.      type: "event",  
21.      value: "token"  
22.    }).subscribe(  
23.      id => console.log(`Posted activity, assigned ID ${id}`),  
24.      error => console.log(`Error posting activity ${error}`)  
25.    );  
26.   
27.  }  

Use component did mount to call this method.

1. async componentDidMount() {  
2.     this.fetchToken();  
3.   }  

Render Method

 

On Icon Click call Modal Dialog and which will invoke ReactWebChat Tag with direct line state variable,

1. <div className={ styles.chatbot }>  
2.         <DefaultButton style={{ border: 'none', textDecoration: 'none', background: 'none', outline: 'none' }} onClick={this._showModal}>  
3.        <img src="https://data.blob.core.windows.net/boticon/ChatBotIcon.JPG" alt="Chatbot" height="100px" width="100px" />  
4.      </DefaultButton>  
5.      <Modal  
6.        titleAriaId={this._titleId}  
7.        subtitleAriaId={this._subtitleId}  
8.        isOpen={this.state.showModal}  
9.        onDismiss={this._closeModal}  
10.        isBlocking={true}  
11.        containerClassName={contentStyles.container}  
12.        dragOptions={this.state.isDraggable ? this._dragOptions : undefined}  
13.      >  
14.        <div className={contentStyles.header}>  
15.          <span id={this._titleId}>Virtual Assistant</span>  
16.          <IconButton  
17.            styles={iconButtonStyles}  
18.            iconProps={{ iconName: 'Cancel' }}  
19.            ariaLabel="Close popup modal"  
20.            onClick={this._closeModal as any}  
21.          />  
22.        </div>  
23.        <div id={this._subtitleId} className={contentStyles.body}>  
24.          <ReactWebChat directLine={this.state.directline} styleOptions={this.state.styleSetOptions} />  
25.        </div>  
26.      </Modal>  
27.      </div>  

Step 6 - Test locally

 

To run your solution type "Gulp Serve" in the terminal window. It will prompt the new window with local host workbench url " https://localhost:4321/temp/workbench.html"

Click icon to get pop up. Start typing the question as defined into Luis and QnA Maker and results start appearing without any delay.

The previous article can be found from these links.

• Learn and Build Azure Bot With Bot Framework SDK V4
• Build QnAMaker Azure Bot with Bot Framework SDK V4
• Design Rich Card with Bot Framework SDK V4
• State Management with Bot Framework SDK V4
• Store Conversation to CosmosDB with Bot Framework SDK V4
• Build Conversation Bot using Luis and QnA Maker

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.