Making it easy to develop and debug SharePoint 2013 hosted apps

Technorati Tags: SP2013,Apps,Dev,VS2012

One of the hardest things to do when developing SharePoint 2013 hosted apps is making changes and re-deploying the application. This was difficult also when doing solutions in SP2010. Making small changes and having to re-deploy basically tears down whatever list data or client web parts you have already deployed. This forces you into defining your list data in the elements.xml for your list. The problem is even more acute when developing a client web part. Making a change requires you to re-deploy and add the client web part  to the web part page before you can start debugging. The “Fast Update” capability in VS2012 Office Dev Tools helped this situation a little. This feature allows you to make changes to single files like html, aspx and javascript while debugging and have the changes automatically deployed. So all you have to do is refresh the browser and your changes are there. Unfortunately, this only works when you have done an “F5” deployment and are currently attached. It would be nice to have the ability to make a change to some java script, right click and deploy the change without having to re-deploy the whole application.

Fast Deploy Visual Studio Extension for SharePoint 2013 App Model

To increase my productivity and to keep me from going crazy I decided to create a VS2012 command extension to deploy single files to an existing SharePoint 2013 hosted app. This enables me to make quick changes without having to set everything back up and/or run in debug mode. You can get the extension here SPFastDeploy in the Visual Studio Gallery or just search for it under SharePoint 2013 in Visual Studio from the start page  and “Discover extensions, add-ons, and samples”. After downloading it just click on the VSIX file and it will install itself. You can see it under Tools –> Extensions and Updates

Initially the Fast Deploy extension will show up in the tools menu. You can click on it and it will deploy the file that is in the current code window.

 

You can make it easier to use the extension by adding it to the project item context menu, so it will be visible when you right click on a file in your solution explorer. Do this by clicking on the VS tool bar drop down menu and selecting “Customize…”. Here select the “Context Menu” option and select the “Project and Solution Context Menus|Item”. Select the “Add Command” button, then select the “Tools” category and find the “Fast deploy to SP App” command and click OK.

Once you have done this you can use the extension from the context menu. Right clicking on any file will execute the code and deploy the file to the appropriate folder in your hosted app. A status message is displayed during and after the deployment.  The code constructs a non-host header URL to the site where your application is hosted. It then uses the client object model to obtain the actual host header URL to the application. The host header URL is required when using the System.Net.WebClient to upload the file.

 

Productive app development

Visual Studio extensions are a great way to increase your productivity as a developer. The Fast Deploy extension lets me make minor changes and quickly upload them to my application without having to provision another application. This is especially useful if your applications are just using java script, html and css. No longer do I have to add my client web part on every change or provision my test data. This extension can only be used with SharePoint 2013 hosted apps. It could possibly be extended to be used with auto-hosted applications. Ideas are welcome. A codeplex project may be in the future for this.