Deploy the app in SharePoint Online
The last step to actually using our chat room in a full scale environment is to deploy the SharePoint app itself. Start by right clicking the SharePoint app project in Visual Studio and selecting ‘Publish…”
In the window that opens, click the “Edit” button next to the “Current profile:” drop down:
In the next window that opens, add the Client ID and Client Secret from our web.config:
Click Finish. Selecting the profile and adding our Client ID and Secret gives our app permissions within our SharePoint tenant. Next, click the “Package the app” button:
In the window that opens, verify that the URL and Client ID are correct (we may need to change the URL from http:// to https://), and click Finish:
After clicking Finish, Visual Studio will package our app in a .app file. Visual Studio will also automatically open Windows Explorer in the folder where the app resides:
Now, we need to head over to the App Catalog in SharePoint. If you don’t have an App Catalog in your tenant, you can create one from the SharePoint Admin portal.
From the App Catalog, click the “Apps for SharePoint” link on the left:
We need to upload our .app file to the catalog. We can either do that using the ‘upload’ link on the Apps for SharePoint page, or we can just drag and drop the file from Windows Explorer:
If everything went according to plan, we should now see our new chat room app in the Apps for SharePoint catalog:
And finally, the last step: adding the chat room to our favorite SharePoint site. We’ll make our way to the site that we’d like to use to host our app:
Next, click the Site Contents link under the little gear icon in the top right corner:
In the Site Contents window, select “add an app”:
From the ‘Apps You Can Add’ window, click the chat room app:
Again, trust the app if necessary:
The app should now be in the Lists, Libraries, and other Apps section:
Go back to the page where we’d like to add the chat room web part and put the page into Edit mode and add the chat room app, just as we did before.
Finally, save the page and we’re all done!