Developing and Deploying Multiple SharePoint 2013 Apps to a Single Azure Web Site

Today’s topic is one that came about after I heard some folks kind of unhappy about using Azure web sites as a platform for SharePoint 2013 provider-hosted apps. The unhappiness as was really just about the fact that you only get 10 Azure web sites for free and some folks were thinking that this meant they could only deploy 10 SharePoint Apps for free then. I had hoped for a better story and so I spent some time rooting around this problem until I got the right combination to fall in place to solve this issue. This post is going to ready like one big list of instructions, but don’t just glance at it and decide it’s too complicated – it’s not! There are a number of things that you need to do up front the first time, but after that (and once you get in the rhythm of doing it once or twice) I think you’ll find it’s a pretty manageable thing. Plus, it’s free – that’s gotta be worth a LITTLE investment of time to understand it. Okay, so let’s get started.

 

  1. Go to the Azure Management Portal and click on the Web Sites link in the left navigation.

  2. Click on the name of the web site where you want to deploy your SharePoint App.

  3. Click on the "Download the publishing profile" in the right task menu and save the file to your development server.

  4. Open the publishing file in a text editor like notepad.

  5. Scroll to the right until you see the publishUrl that starts with "ftp://". Copy that Url, open your browser, paste it in and navigate to it.

  6. You will get prompted to enter a username and password. Go back to the publishing profile file and copy the FTP username and password out of it. When you're done, the browser should open an FTP session with the Azure web site.

  7. Follow the instructions in the browser window to open the site in File Explorer: press Alt, click View, and then click Open FTP Site in File Explorer.

  8. Right click in the right pane of File Explorer and select New...Folder. Name the folder whatever your virtual directory is going to be named; for this example I'm naming the folder "azurethree".

  1. Go back to the browser and return to the web site dashboard for the Azure Web site.

  2. Click on the Configure link in the top navigation for the web site.

  3. Scroll to the bottom of the page and enter the values for your new virtual path. The "VIRTUAL DIRECTORY" name should be the name you want at the end of the Url for your website. For example, if your Azure web site is at steveapps.azurewebsites.net and you want to have your application Url to be https://steveapps.azurewebsites.net/azurethree, then you would enter "/azurethree" for the VIRTUAL DIRECTORY NAME. For the "PHYSICAL PATH RELATIVE TO SITE ROOT" you should enter "site\wwwroot\yourDirectoryName". Using our "azurethree" example, you would enter "site\wwwroot\azurethree". Finally, MAKE SURE you check the Application box.

  1. Click the SAVE button on the bottom navigation to save your changes.

  2. Open Visual Studio 2013 and create a new provider hosted App for SharePoint 2013.

  3. Go to a site in your o365 tenant and use /_layouts/15/appregnew.aspx to create a new client ID and secret; use the domain of your Azure web site for the App Domain value.

  4. Copy the client ID and paste it into the AppManifest.xml file in your App project and web.config of your web site project.

  5. Copy the client secret and paste it into the web.config of your web site project.

  6. Right click on your web project and select Publish...

  7. Click the Import... button on the first page of the publishing wizard and import the publishing profile you downloaded.

  8. By default it selects the web deploy option but we want to use the FTP deploy option, so click the Previous button in the wizard. We don't use Web Deploy because no matter what you select it always deploys to the root of the site and we want to deploy to a subdirectory. This is also a good reason to NOT have an application in the root site, because someone could accidentally overwrite it.

  9. Use the drop down list of deployment profiles and select the one with "FTP" in the profile name then click Next.

  10. In the Site path field add "/yourFolder" name at the end. For example, we're using "azurethree", so the Site path is "site/wwwroot/azurethree". In the Destination Url at the bottom of the wizard add your virtual directory to the end, i.e. "azurethree", so it looks like https://steveapps.azurewebsites.net/azurethree.

  1. Make whatever other configuration changes you'd like to the publishing job and click the Publish button when finished. Your web app should now deploy successfully. The browser window should open up and if you get a 403 Forbidden error, don't worry, things should be okay. You can always verify by going back to your open FTP window. Double-click on the folder you created ("azurethree" in the example I've been doing). Don't panic if you don't see any files; just right click and select Refresh. You should see all of the files for your app in there. 

 

  1. Go back to Visual Studio and right click on your App Project and select Publish...

  2. Click the Package the app button.

  3. Make sure the Url for the website points to your site with the virtual directory in the Url, i.e. https://steveapps.azurewebsites.net/azurethree, paste in the client ID, then click the Finish button.

  4. Copy the published .app file to your app catalog

  5. Add the app to your SharePoint site and try it out.

Here's a collage of three different SharePoint Apps running in a single Azure web site; you can validate that by looking at the Url in the browser window.

Developing and Deploying Multiple SharePoint 2103 Apps to a Single Azure Web Site.docx