Shared JavaScript and CSS in Visual Studio SharePoint Solutions

When you develop SharePoint solutions, especially SandBox solutions or apps, you write lots of code in JavaScript and design pages with CSS. In such cases it is always a good practice to create shared code for common tasks instead of writing repetitive code or copy from old projects. 

It is also advisable to attach JQuery or other JavaScript or CSS libraries to your SharePoint Visual Studio solution. The advantage of attaching JQuery or other libraries is that if you update a file at the Master location, it gets updated in all your projects. There is no need to replace files in all projects manually. 

Here at kalmstrom.com we always focus on good shared libraries that give fast and reliable development. As we develop standard solutions, we know that if we do it wrong the first time, we will have to go back and fix it later (at our own expense). Thus we need to always do it right from the beginning! 

For a Visual Studio solution you can also add an existing file as a link. That will solve the update issue, as you only have to change that file to get all projects updated. However, a in a Visual Studio SharePoint solution files are not deployed in the SharePoint site. 

Adding managed code projects or files into a SharePoint file is not a problem, but when you are adding non-managed code, shared JavaScript files or CSS files via “add as link” to your SharePoint solution, you need to do it in a few steps. This is the process: 

1. Place the shared JavaScript or CSS files in a folder. It can be any folder from which files should be accessible for other projects. If you are using TFS (Team Foundation Server), you can create a new project and add files into it.
2. Open your Visual Studio SharePoint solution and add a new module or use an existing one.
3. Right click on the module or on a folder inside the module where you want to keep your shared files. In the right click menu, select “Add” and “Existing Item.
   
   
   
4. In the bottom right corner of the Existing Item dialog, you will see an option to add a file. In the dropdown, select the option “Add As Link”. Do not add a file with the “Add” option, because it will make a copy of the original file in your solution.
   
   
   
5. 'Now you need to set a deployment path into SharePoint for the file you added as a link, because when you add a file as a link it does not set the SharePoint deployment path automatically (even if Visual Studio does it automatically for you in other cases). The deployment path is an actual path where the SharePoint solution will be deployed on a SharePoint site.
   
   
   
6. To set the deployment path, select the file and go to its properties window (F4). In the properties window you will find a section named “Deployment Location”. Expand it and set the “Path” property. I would suggest the current SharePoint module path, to avoid later confusion.
   
   
   
7. After setting this path, you will find the shared file in the SharePoint deployed folder, and you can always use the deployment path to register your JavaScript or CSS files.