Using the ArcGIS API for JavaScript with Frameworks

You can integrate the ArcGIS API for JavaScript into applications built with modern frameworks, like React, Angular, Vue, and Ember.

Popular Frameworks

The following guides show how either of these approaches can be used to integrate the ArcGIS API for JavaScript with each of these popular frameworks.

• Using the ArcGIS API for JavaScript with Angular
• Using the ArcGIS API for JavaScript with Ember
• Using the ArcGIS API for JavaScript with React
• Using the ArcGIS API for JavaScript with Vue

Each of the above guides show how to use either of the two module loading approaches listed below. For other frameworks, read below to learn which approach is right for your application and then read the related guide.

Module Loading

No matter what framework you're using, you will need a way to load the ArcGIS API for JavaScript modules. There are two overall approaches:

• use the webpack plugin to integrate the ArcGIS API into your webpack build
• use esri-loader with framework tools or other bundlers

Webpack Plugin

We've created a webpack plugin to help you configure your webpack build to load and bundle ArcGIS API for JavaScript modules that you've installed from npm.

esri-loader

esri-loader is a tiny library that helps you lazy-load modules at runtime from a hosted build of the ArcGIS API for JavaScript. esri-loader works in applications built with any loader/bundler, such as webpack, rollup.js, or Parcel.

When to use the webpack plugin vs esri-loader

If you're using webpack, you can use either the webpack plugin or esri-loader, but they have different benefits and limitations.

To figure out which is the right solution for you, you need to answer these simple questions:

• Are you using webpack?
• Are you using ArcGIS API for JavaScript v4.7+?
• Are you able to configure webpack? Some framework tools discourage or prevent this.

If you answered "Yes" to all of those questions, then you can use the webpack plugin in your application and get the benefit of being able to use the familiar import syntax for 'esri' modules.

Otherwise, you should use esri-loader, which allows you to use either version 4.x or 3.x of the ArcGIS API for JavaScript with any module loader/bundler and with any framework tools.

Framework Tools

Most modern frameworks provide a Command Line Interface (CLI) or tools like Create React App, Angular CLI, Vue CLI, or Ember CLI to help developers generate, run, and deploy applications. These tools aim to insulate the developer from the complexities of modern tooling. Even if a tool uses webpack under the hood, it may discourage or even prevent you from manually editing the webpack configuration. In these cases, it may be easier for you to use esri-loader instead of the webpack plugin.