Using Bower for custom builds of ArcGIS API for JavaScript

Esri recently released a Bower package to enable local custom builds of the API. The advantage of using a custom build is that your application downloads and parses only the required JavaScript resources which will make your application load faster. The Bower package can be used in conjunction with other JavaScript tools like Grunt to do optimized builds of your applications.

How does it work?

Bower is a front-end package manager for your JavaScript projects. It allows you to download JavaScript packages that you can use in developing your applications. You can see examples of how to do optimized local builds in this resources project that demonstrates how to do builds with Dojo or RequireJS.

If you don’t have Bower installed, you can do so by following the instructions here. Once you have Bower installed, it’s very easy to install the ArcGIS API for JavaScript into your application with the following terminal command.

bower install --save arcgis-js-api

This will install the ArcGIS API for JavaScript into a directory called bower_components and you can start working with it in your application.

What are the drawbacks?

  • You have to host the API yourself.
  • Longer than normal startup times.
  • Need to learn about how to build AMD projects.

The CDN version (Esri hosted using a Content Delivery Network) has its advantages in that you do not have to host the API yourself. This may or may not be an issue for your development workflow.

The ArcGIS API for JavaScript is a large library with lots of modules to meet a variety of needs. While developing your application this can lead to longer than normal startup times as each individual module is loaded. This is however only an issue during the development process. AMD projects are meant to be run through a build process and once you do build your application, it will be highly optimized and load a minimial amount of files.

When you have completed developing your application and you are ready to deploy a release build, you will need to get familiar with the build process. We recommend using the Dojo build tools to optimize your applications. You can however use the RequireJS Optimizer to build your applications.

We have provided build examples for both Dojo and RequireJS.

More detailed documentation will be available as part of the 3.15 release of the ArcGIS API for JavaScript in a few weeks.

Is Bower right for me?

The Bower package of the ArcGIS API for JavaScript is meant to compliment the other channels for the API, via the CDN or the download to locally host it. It is also not a replacement for the online JavaScript Optimizer.
The JavaScript Optimizer provides you various methods to create an opimized build of the ArcGIS API for JavaScript for use with your specific application. The Bower package is for developers that want to integrate the build process into their current development workflows.

If you are currently using tools like Grunt or Gulp to write your applications, you will find the Bower package useful.

Summary

If you are comfortable with the CDN, locally hosting the API, or using the JavaScript Optimizer there is no reason for you to change your workflow.

If you have had a deep desire to get your hands dirty and integrate the ArcGIS API for JavaScript into your current build steps, then the Bower package may be just right for you.

Enjoy and build great things.

Contributed by Rene Rubalcava.

This entry was posted in Developer, Web and tagged , . Bookmark the permalink.

Leave a Reply

6 Comments

  1. yogeshdhanapal says:

    This is really good addition to build apps with small network footprint… is there a way to build just a widget because ArcGIS javascript WebApp builder and other ArcGIS products provide widget Support. Is there a way to run dojo build on a custom widget source code to a single js file?

    • odoe says:

      I would need to test this a bit further, but you could create a built layer of your widget.

      Look at Layer Files here.

      Take note that in addition to having include options, they have exclude options. So you can exclude common modules used in WebApp builder that are not exclusive to your widget if you like. If not, you can simply build a layer file of your Widget and deploy it as is.

      I’ll find some time to test this out.

      Hope that helps.

  2. sgroup_anhi says:

    Before I referenced init.js when I downloaded the API. I can not find init.js now. How can I reference the API when I have downloaded the API with bower in my applikacation?