Build with AMD modules

Introduction

The ArcGIS API for JavaScript's AMD modules are recommended for doing local builds with Dojo 1 and RequireJS.

• The modules can be lazy loaded from CDN using the esri-loader helper library.
• The modules can be installed locally via npm using arcgis-js-api.
• For API versions 4.17 and earlier, you can also build modules locally with webpack using @arcgis/webpack-plugin.

Lazy load CDN modules

esri-loader is a tiny library that lazy loads modules from the CDN hosted build of the API. It works in applications that are built with any loader/bundler, including webpack, rollup.js, or Parcel.

Installation

1
npm install esri-loader

Usage

Here are examples of how to use esri-loader with frameworks:

• React
• Angular CLI

For more details on how to use the loadModules() method to lazy-load any version of the ArcGIS API for JavaScript in any framework see the esri-loader usage documentation.

Build locally with arcgis-js-api

You can npm install the AMD modules using arcgis-js-api. Samples and additional instructions are available in the jsapi-resources GitHub repository.

Get started

Install the modules into your project:

1
npm install arcgis-js-api

Configure CSS

Choose a theme and then configure your code to use the ArcGIS CDN, for example:

index.html

1
<link rel="stylesheet" href="./../node_modules/arcgis-js-api/assets/esri/themes/dark/main.css">

Or, if you are working with local assets see the Manage assets locally section.

Working with assets

For most local builds, the API's assets are pulled from the ArcGIS CDN at runtime and there is no need for additional configuration. The assets include styles, images, fonts and localization files. This behavior is based on the default setting for config.assetsPath.

Managing assets locally

If you need to manage the assets locally, then you'll need to set esriConfig.assetsPaths to insure that the module paths are resolved correctly. Here is a RequireJS example:

config.js

1
2
3
define(["esri/config"], function(esriConfig) {
    esriConfig.assetsPath = "../node_modules/arcgis-js-api/assets";
});

Build locally with webpack

For API versions 4.17 and earlier, building locally with webpack requires the use of @arcgis/webpack-plugin. Be sure to sync the version of the API with the version of the plugin. The plugin uses a lightweight AMD loader during the webpack build process to resolve module paths. The AMD loader is not used in the output application, it creates bundles with the ArcGIS API for JavaScript.

Installation

Install the plugin:

1
npm install @arcgis/webpack-plugin

Then use import statements to load individual modules.

1
2
import Map from "esri/Map";
import MapView from "esri/views/MapView";

Usage

Here are examples of how to use the plugin with frameworks:

• React
• Angular CLI

Configure web server

The web server hosting configuration where you develop and host the ArcGIS API for JavaScript will need specific MIME/type registration.