Adding dependencies

You may need to add dependencies and third-party libraries to your application. This could be needed, for example, if you want to make use of an existing Signature Capture JavaScript library.

To fully integrate this into your project you will need to undertake a few steps that depend on how you’re pulling in the dependency.

Using npm

If you’re using a package manager like npm then these are the suggested steps;

Install the dependency

This can be done with the standard npm command. Use the –save flag (this will update the project’s package.json.

Setup Grunt to Move the Assets

The majority of npm packages will contain a lot of resources that aren’t needed in the actual deployable application. We don’t want to include these resources in our application bundle as they will increase it’s size without providing any benefit.

Our approach is to use Grunt tasks to move the required assets into the directory structure that will end up making up our application bundle. MobileCaddy application bundles are (for the most part) made up of anything within the www folder of our project.

Our Gruntfile.js contains a copy task that can be added to take handle the required moving of files. For example if we had added this Signature Pad library via npm we would end up with a structure like this within our node_modules directory.

In this example we are only interested in the signature_pad.min.js file actually being bundled with our app, and so we could modify out Gruntfile.js to have the following (highlighted) lines;

See the documentation for more information on the grunt copy task we use.

Once this is in place a one-off grunt devsetup command can be run to move the assets into place. If your dependency had put files into the SCSS directory then this command will also have re-compiled this and output the CSS.

Using this approach will allow us to manage our dependencies (and versions of) across teams of developers and development environments.

Manually adding a dependency

Dependencies can be manually added to the www (and other dirs such as SCSS) if you want them to be used and deployed with your application.

Update the App Start Pages

CodeFlow Index

For our dependency to actually be used in our single-page app we need to refer to it in our local index.tpl.html. This will mean that our app will run in Codeflow (in our local web server) as expected. Of course at this stage you can include the unminified version of your dependency (if there is one) to aid your development and debugging. NOTE: Do not edit the index.html file. It is the index.tpl.html that needs to be updated as the index.html is automatically generated from this template file.

Platform Index

To make sure our files are included when running our application in the platform emulator or on an actual mobile device we also need to edit the template file that is used to form the start page on the SFDC platform.

This can be achieved by editing the ~/apex-templates/startpage-template.apex file. In this file we want to add the entry as per our index.tpl.html but with the src attribute as follows;

Example of a JavaScript file;

Example of a CSS file;