Skip To ContentArcGIS for DevelopersSign In Dashboard

The ArcGIS API for JavaScript has all the tools you would need to build fully scalable and effective applications. However, you may want to utilize another framework's specific capabilities, or leverage your in house expertise in a particular framework.

Frameworks and Libraries

There are many examples of integrating the ArcGIS API for JavaScript with popular frameworks such as React, Angular, Vue, Ember, and many others. Some frameworks and libraries are easier to integrate with than others, so below we introduce some tools and methods to assist you.

You can approach this framework integration in one of two ways.

  1. Integrate a framework into your ArcGIS API for JavaScript application.
  2. Integrate the ArcGIS API for JavaScript into an application built with a framework.

Map Centric Integration

In the first scenario, you may want to leverage a framework to help you build UI components to use with your application, but the map is still the main focus of your application and your development efforts. The ArcGIS API for JavaScript framework samples demonstrate how to take advantage of features such as view models to make it easy to use components from your framework of choice in an application that is built following the conventions of the ArcGIS API for JavaScript.

Examples:

Framework First Integration

The second kind of integration, adding the ArcGIS API to an application built in another framework, is useful when you have a team of developers working on an application where the map may only be used in one part of your application. In these scenarios, most of the application state is typically managed outside of the map itself (for example in a data store or routable URL parameters). For this kind of integration you will likely benefit by following the conventions of your framework of choice so that you can take advantage of the community and tooling that have developed around that framework. To do so, you will likely have to use one of the module loading solutions listed below.

You can find examples of these types of applications in the Esri JavaScript resources repository on github. Each framework has its own page with links to reusable libraries and example applications:

Modern JavaScript Development

Most frameworks are written in modern JavaScript or TypeScript. This means they require an additional build step to transpile down to JavaScript that is usable across most browsers. TypeScript will do this by default, and if you are using modern JavaScript features, you can use a tool like BabelJS to transpile your JavaScript for you.

Module Loading

Many frameworks distribute their code in a format such as Universal Module Definition (UMD) that is compatible with the Dojo AMD loader used by the ArcGIS API for JavaScript. This means you can load a framework's modules in an ArcGIS API for JavaScript application by configuring Dojo packages to specify the locations of the framework files. See the React and Vue sample pages for examples.

However, if you're taking the approach of integrating the ArcGIS API for JavaScript into an application built with another framework, it is unlikely that you will be using the Dojo AMD loader. In these scenarios you can use one of the following solutions to help you load the modules of the ArcGIS API for JavaScript with whichever module loader is used by the framework.

@arcgis/webpack-plugin

The @arcgis/webpack-plugin that will let you integrate the ArcGIS API for JavaScript into your webpack configuration to build your applications. You can install the plugin via npm.

npm install --save-dev @arcgis/webpack-plugin

This will also install the ArcGIS API for JavaScript into your application for immediate use. You can configure the plugin in your webpack configuration.

// webpack.config.js
const ArcGISPlugin = require("@arcgis/webpack-plugin");

// add it to config
module.exports = {
  ...
  plugins: [new ArcGISPlugin()]
  ...
}

esri-loader

esri-loader, is a tiny library that helps load ArcGIS API for JavaScript modules into almost any application, including those built with popular bundlers like webpack and rollup.js. esri-loader has additional benefits such as letting you lazy-load the ArcGIS API for JavaScript only when it's needed and using the ArcGIS API for JavaScript in a universal or server-rendered application.

Ember's loader.js

Ember is a framework that actually provides its own module loader. In order to integrate the ArcGIS API for JavaScript with Ember's loader.js, we provide a couple of Ember addons. The first is ember-cli-amd and it allows you to use import statements to load ArcGIS API for JavaScript modules. The other is ember-esri-loader, which allows you to get the benefits of esri-loader in Ember applications.

Please refer to the documentation for each of these tools to learn more details about usage.

Content