@arcgis/core (beta)

ArcGIS API for JavaScript ES modules.

These ES modules are in beta and are not intended for use in production applications.

Features

You can install this minified, unbuilt version of the API via npm and then use the modules directly in a framework such as React, Vue.js or Angular. Or, you can also create your own custom builds with Webpack or rollup.js.

Sample applications can be found here.

Get started

Install the modules into your project:

npm install @arcgis/core

Configure CSS

Choose a theme and then set the CSS to the installed API version using the following pattern:

index.css

@import "https://cdn.jsdelivr.net/npm/@arcgis/core@4.19.0-next.20210304/assets/esri/themes/light/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 a CDN at runtime and there is no need for additional configuration. Production builds of the API use the ArcGIS CDN, and next builds (e.g. 4.19.0-next.20210304) use jsDelivr. The assets include styles, images, fonts and localization files.

Manage assets locally

If you need to manage the assets locally, copy them into your project from /node_modules/@arcgis/core/assets, and then set config.assetsPath to insure the asset paths are resolved correctly. A simple way to accomplish this is to configure an npm script that runs during your build process. For example, use npm to install ncp and configure a script in package.json to copy the folder.

Here’s a React example:

package.json

{
  "scripts": {
    "start": "ncp ./node_modules/@arcgis/core/assets ./public/assets && react-scripts start",
    "build": "ncp ./node_modules/@arcgis/core/assets ./public/assets && react-scripts build",
  }
}

App.js

import esriConfig from "@arcgis/core/config.js";
esriConfig.assetsPath = "./assets"; 

index.css

@import "@arcgis/core/assets/esri/themes/dark/main.css";

For Angular, copy the asset files by configuring the architect/build/options/assets section of angular.json, for example:

angular.json

{
  "assets": [
    {
      "glob": "**/*",
      "input": "node_modules/@arcgis/core/assets",
      "output": "/assets/"
    }
  ]
}

app.component.ts

import esriConfig from "@arcgis/core/config.js";
esriConfig.assetsPath = "./assets"; 

index.html

 <link href="assets/esri/themes/dark/main.css" rel="stylesheet">

For other installations, consider using this package script as a starting point:

# package.json
{
  "script": {
    "copy": "cp -R ./node_modules/@arcgis/core/assets ./dist/assets"
  }
}

Windows users can use xcopy or ncp for any platform.

Requirements

Building apps with the ArcGIS API for JavaScript requires signing up for a ArcGIS Developer Subscription.

Resources

• ArcGIS for JavaScript
• http://blogs.esri.com/esri/arcgis/tag/javascript/
• twitter@ArcGISJSAPI

Issues

• General questions about using these modules or the ArcGIS API for JavaScript? See the GeoNet developer community.
• Technical support.

Licensing

COPYRIGHT © 2021 Esri

All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.

This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.

For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA

email: contracts@esri.com