You may want to use the ionic JavaScript framework without having to use Cordova or the ionic CLI. This was just what we wanted to do in one of our seed applications to demonstrate how to build robust offline mobile applications that use Salesforce as their backend, so it make sense to share how we went about this.
Not only did we want the nice CSS framework that the (awesome) ionic guys have put together but we also wanted to use their angular directives. The approach we took is pretty simple, at least that’s what I think.
The solution
Our development setup was already using bower to install dependencies for our app… these included the handy Underscore JS JavaScript utility library and our own MobileCaddy SDK which enables full Salesforce offline capabilities. With this in mind we re-used bower to pull in the ionic assets too. Here is the line from our bower.json file that lives in the devDependency section
|
1 2 3 |
"ionic": "1.0.0-beta.13" |
This line informs bower to download the 1.0.0-beta.13 release of ionic.
The next step is to enhance our existing Grunt tasks to copy the resources into our existing project structure. This is so that the SCSS is included in the Sass processing and the JS and other assets (fonts, etc) end up being included in our deployable code bundle. In our case our bundle is pushed to the Salesforce platform to be used within our mobile application. The below is a modified version of our Gruntfile.js which only includes the copy tasks needed to support this Ionic use.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
copy: { devsetup: { files: [ { expand: true, flatten: true, src: ['bower_components/ionic/release/js/ionic.bundle.min.js'], dest: 'www/lib/js' }, // Ionic scss { expand: true, cwd: 'bower_components/ionic/scss/', src: ['**'], dest: 'scss/ionic' }, // Ionic fonts { expand: true, cwd: 'bower_components/ionic/release/fonts/', src: ['**'], dest: 'www/fonts' } ] } } |
And that’s it. Our offline mobile Salesforce application can now be built using the ionic Framework, without the use of Cordova or the ionic CLI.