Build with AMD modules
Introduction
The ArcGIS Maps SDK for JavaScript's AMD modules are recommended for doing local builds with Dojo 1 and RequireJS.
- The modules can be installed locally via
npm
usingarcgis-js-api
. - For API versions 4.17 and earlier, you can build modules locally with webpack using
@arcgis/webpack-plugin
. - The modules can be lazy loaded from CDN using the
esri-loader
helper library.
Lazy load CDN modules
esri-loader
is a tiny library that lazy loads modules from the AMD CDN. The APIs modules are loaded at runtime and they are not bundled on-disk with your local build. It works in applications that are built with any loader/bundler, such as webpack, rollup.js, or ESBuild.
Installation
Usage
For more details on how to use the load
method to lazy-load any version of the ArcGIS Maps SDK 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:
Configure CSS
Choose a theme and then configure your code to use the ArcGIS CDN, for example:
index.html
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. One advantage of using the CDN is the APIs CSS styles will not need to be bundled on-disk with your local build. The assets include styles, images, fonts and localization files. This behavior is based on the default setting for config.assets
.
Managing assets locally
If you need to manage the assets locally, then you'll need to set esri
to insure that the module paths are resolved correctly. Here is a RequireJS example:
config.js
Configure AMD to load custom modules
When developing with AMD using the ArcGIS CDN, you will need to tell the AMD loader where to find your custom modules.
Then you can add custom modules in your application using this pattern, /package/Module
:
index.html
More information is available in the dojoConfig documentation.
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 Maps SDK for JavaScript.
Installation
Install the plugin:
Then use import
statements to load individual modules.
Configure web server
The web server hosting configuration where you develop and host the ArcGIS Maps SDK for JavaScript will need specific MIME/type registration.