Using SharePoint Solutions to Deploy Global Javascript and Stylesheets

There are many times that you and/or your team need to develop and deploy many custom webparts, application pages, etc. Usually most if not all of these will require some custom CSS and JavaScript. The issue that comes up is where to deploy those files. You can certainly add a Mapped Folder in each project and add in your CSS and scripts at the project level. The problem is that you introduce the potential for overrides in these files, loading the same scripts, etc.

So how to fix this? There are several options available, and one we'll look at here is creating a solution (scoped to the Farm level) that will be used to deploy all of our CSS and scripts for use through-out the farm. Here are some of the benefits to doing it this way:

1. You have a single .wsp solution that can be deployed in all environments, making deployments easier.
2. We'll be using the Layouts folder, so all code can easily reference this folder with relative paths.
3. We'll be using a Feature, so all other solutions can use Feature Dependencies to ensure the CSS and Scripts are deployed.
4. This is a fairly easy and straight forward solution and is easy to maintain.

So, let's start with an Empty SharePoint project, we'll call the project "GlobalCssJsFiles":


We'll deploy this as a Farm solution:


Now that we have our project, we'll right click on the project name and select Add --> SharePoint "Layouts" Mapped Folder:


This will gives us a Layouts folder in our project and right underneath it another folder with the name of our project "GlobalCssJsFiles".  Now we'll right click this folder and add two more folders, "CSS" and "Scripts":



Next we'll right click each of the new folders and choose Add --> New Item, and just add a blank file into each folder.  In this case a blank CSS file called "AwesomeStyles.css" and a blank JavaScript file called "AwesomeScripts.js".

Now, right click the Features folder and choose "Add Feature".  This will give you a new Feature and all we need to update is the Title, Description and Scope:

• Title: Global Css and JS Files
• Description: This feature includes all the CSS and JS files needed for the environment.
• Scope: Farm

Now, just as a side note, we did not have to add a feature here.  You could package this up and deploy without it, but without the feature you can not do Feature Dependencies in your other projects.

Build your project and deploy it.  If you deploy via Powershell you can go into Central Administration under Central Administration --> Manage Farm Features.  You will see our feature is here and you can activate it.




Once you activate it, you can go to the server and see the files now in the layouts folder, located at C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS:



At thats it!  You can now reference these CSS and JavaScript files with a relative path like this:

• CSS: src="/_layouts/GlobalCssJsFiles/Css/AwesomeStyles.css"
• Scripts: src="/_layouts/GlobalCssJsFiles/Scripts/AwesomeScripts.css"

Now in your other projects you can utilize Feature Dependencies and not allow your code to be activated unless this feature is activated.  Check this MSDN for details on Feature Dependcies: http://msdn.microsoft.com/en-us/library/ee231535.aspx

Again, this is not the only way to deploy global files, but I find its a nice and simple way to go about it.  It makes moving these files between your environments easy and safe, and allows you to use relative paths for all CSS and scripts which is always the best practice.

Enjoy!