What is the best way to manage javascript resources for Visualforce pages?

Question

So at the moment when I want to make a quick tweak in a javascript file that enhances a Visualforce page, I have to go:

1. Setup >> Development >> Static Resources
2. Find my script in the list (takes a few clicks and page refreshes if it is low down on the list)
3. Click Delete I get a list of places where the resource is used
4. Open the pages mentioned in the code editor
5. Comment out the places where the script is used
6. Find the resource in the list again and try delete (almost there, don't give up now)
7. Now add that missing angle bracket in my desktop editor
8. Upload the file giving it the same name as before
9. Hop over in to the online code editor and remove the comments around all the places where the script is included and save.

Anyone know of a shorter routine?

Answer 1

You can just reupload the zip file again, no need to delete & reinsert. Simply click "Edit" and use the file upload field :)

And during development I tend to work on raw JS files (not zipped), I can then edit code directly in Eclipse IDE for example. I package up zips only when I'm ready to promote it to testing / production. You could reference both the "basic" static resource and later temporary static res with just this one troublesome JS file, if it contains function definitions they'll be overwritten.

Answer 2

I don't know if this would be a frowned upon approach or not, but in my frustration with what you have described above (whilst in development only) I created a Component to allow dynamic editing of Javascript

<apex:component controller="MappingController">
  <script type="text/javascript">
    var greeting = "hello";
  </script>
</apex:component>

Think I had the controller in there because I was doing some remoting.

EDIT: Added VF Page source

<apex:page standardController="Project__c" extensions="MappingController" standardStylesheets="false">
  <c:Styles /> <!-- dynamic stylesheet editing here -->
  <apex:stylesheet value="{!URLFOR($Resource.jquery3, 'css/custom-theme/jquery-ui-1.8.23.custom.css')}"/>
  <apex:includeScript value="{!URLFOR($Resource.jquery3, 'js/jquery-1.8.0.min.js')}"/>
  <apex:includeScript value="{!URLFOR($Resource.jquery3, 'js/jquery-ui-1.8.23.custom.min.js')}"/>
  <apex:sectionHeader title="Edit" subtitle="Mapping" />
    <apex:form >
      <div>some html or other</div>
    </apex:form>
    <c:MappingCanvas />        <!-- dynamic javascript editing here -->
    <c:Scripts />        
</apex:page>

Answer 3

FWIW - It's also possible to update Static Resources via the Migration Tool. In theory you could have your JavaScript as part of source control and loaded automatically into your org as part of a CI loop.

Answer 4

Why so complicated? I'v created a static resource and uploaded all my JavaScripts as one zip-file (without .zip ending). Every tyme i want to update my script i just swapping out thet zip-file. Thats all.