Components, best practice for external references? (js, css, etc)

RichDiaz

Our 80+ Teamsite websites reference a few javascript and css files.

I am making new components, templates, and sites and I want them to reference these same javascript and css files. I don’t want multiple copies of these files all over the place.

Question: How can I reference these files from ‘within’ the component? So when I preview the component the javascript and css styles are loaded into the component?

Thanks!

wscott

The Best Practice way are to put these scripts within the workarea that contains the sites, typically in directories named /css and /javascript. Then, edit the default.site file for each site in the workarea and add the files as shared resources. This should cause every page in the site to import them as resources automatically. This also includes previewing of templates and components, if you have one of the sites from that workarea selected as the "preview site." You won't need to have the component XSL use any script or link tags to access the files (they will be added at the page level).

If your sites are spread across multiple branches, you will need to replicate the css and javascript files across all those branches. If it's only 2 or 3 branches you can probably just do this by hand and have a manual process to update all the files when any one of them changes. If there are many many branches, you could create a "resources" branch with a few test sites and keep the "master copy" of the files in that branch, and then have a submit workflow that copies them to all of the site branches. This would need to be a custom workflow (I don't know of anything that does this right out of the box).

In LiveSite 2.2.1, branches are very insulated from one another. (This is a "feature.") It is very difficult for pages or components to access files from another branch (accessing the master copy directly) or from external servers altogether. This can be done at the component level (having the components XSL use script and link tags to import the files), but the problem is that you will need to pull the files from very different locations in preview (within TeamSite) than within runtime. This will increase the complexity of the component XSLs, though, in a way that could become a maintenance issue for the components. That's why I recommend using the workflow: it keeps all the pieces (components, sites, css, javascript) ignorant of their place in the system so that it is easier to change later if you need to rearrange things.