This programming pattern describes how to work with local assets and is only meant for projects that install the ArcGIS Maps SDK for JavaScript from npm.
The JavaScript Maps SDK's assets include styles, images, web workers, wasm and localization files.
In a project using the core API, Map components, and Coding components, the SDK's assets are, by default, retrieved from the ArcGIS CDN through the following URLs, therefore reducing build size and improving build times:
- @arcgis/core
-
https://js.arcgis.com/4.33/@arcgis/core/assets/
-
- @arcgis/map-components
-
https://js.arcgis.com/4.33/map-components/assets/
-
- @arcgis/coding-components
-
https://js.arcgis.com/4.33/coding-components/assets/
-
- @esri/calcite-components (which the SDK uses for consistent and accessible UI)
-
https://js.arcgis.com/calcite-components/3.2.1/assets/
-
Local assets
In some cases, you may need to run the SDK in an environment that is disconnected from public internet (e.g., LAN) to avoid making external requests to resources, such as those to https, where ArcGIS CDN assets (styles, web workers, localization files, etc.) are hosted.
In such a case, you must manage assets locally by copying them into your project from the following directories:
- @arcgis/core
/node_modules/@arcgis/core/assets/
- @arcgis/map-components
/node_modules/@arcgis/map-components/dist/arcgis-map-components/assets/
- @arcgis/coding-components
/node_modules/@arcgis/coding-components/dist/arcgis-coding-components/assets/
- @esri/calcite-components
/node_modules/@esri/calcite-components/dist/calcite/assets/
Use local stylesheets
Ensure that you have added imports in your style.css file to reference local copies of the stylesheets instead of stylesheets from the ArcGIS CDN.
@import "@esri/calcite-components/calcite/calcite.css";
@import "@arcgis/core/assets/esri/themes/light/main.css";
@import "@arcgis/map-components/main.css";
@import "@arcgis/coding-components/main.css";Copy and point to local assets
One way to copy assets is to configure a script that runs during your development and build process.
For example, you can use the cpx2 package from npm to copy assets to the correct project folder.
Follow the cpx2 documentation to install the package, then add copy commands to your package.json scripts for components, the core API, and Calcite.
The copying method may vary depending on your build tool or framework, so check their documentation for best practices.
{
"scripts": {
"dev": "npm run copy:all && vite",
"build": "npm run copy:all && vite build",
"preview": "vite preview",
"copy:all": "npm run copy:calcite && npm run copy:core && npm run copy:components",
"copy:calcite": "cpx \"node_modules/@esri/calcite-components/dist/calcite/assets/**/*.*\" ./public/assets",
"copy:core": "cpx \"node_modules/@arcgis/core/assets/**/*.*\" ./public/assets",
"copy:components": "cpx \"node_modules/@arcgis/coding-components/dist/arcgis-coding-components/assets/**/*.*\" ./public/assets && cpx \"node_modules/@arcgis/map-components/dist/arcgis-map-components/assets/**/*.*\" ./public/assets"
}
}On Mac or Windows, you can also use cpx2 in the terminal to copy local assets before starting the development server or build step.
After copying, the next step is to configure the asset paths in your code to ensure the SDK can correctly locate and load these resources. This step is crucial in a local build environment, because the default asset paths may not align with your project's structure.
import esriConfig from "@arcgis/core/config.js";
import { setAssetPath as setCalciteAssetPath } from "@esri/calcite-components";
import { setAssetPath as setMapAssetPath } from "@arcgis/map-components";
import { setAssetPath as setCodingAssetPath } from "@arcgis/coding-components";
// Set assets path for @arcgis/core, @esri/calcite-components,
// @arcgis/map-components and @arcgis/coding-components
esriConfig.assetsPath = "./assets";
setCalciteAssetPath("./assets");
setMapAssetPath("./assets");
setCodingAssetPath("./assets");
// Optional:
// Point to your Enterprise /portal/apps/fonts directory
esriConfig.fontsUrl = "https://<your-enterprise-portal>.com/portal/apps/fonts/";
// Individual imports for each component used
import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-placement";
import "@arcgis/coding-components/components/arcgis-arcade-editor";
import "@esri/calcite-components/components/calcite-button";
import "@esri/calcite-components/components/calcite-scrim";Additional considerations
Fonts
For some disconnected environments, font references need to be changed. For example, if a feature layer has labels then a request will be made to static.arcgis.com for the label font unless the esri has been set up to point to your Enterprise /portal/apps/fonts directory.
For more information, check out the Labeling guide topic which includes information about custom fonts and disconnected environments.
Basemaps and data
Basemaps and data, such as web maps, that are hosted in ArcGIS Online are not accessible from a disconnected environment. Prepare basemaps for use in ArcGIS Enterprise or work without a basemap. In addition, prepare data for use in ArcGIS Enterprise or use client-side data. See the ArcGIS portal guide for more details.
Conclusion
You may use default ArcGIS CDN assets or local assets from /node.
If you followed all local assets instructions, your browser's developer tools network tab shouldn't show requests to https.
As an alternative for offline workflows where individual devices work with limited or no internet connection, use the ArcGIS Maps SDKs for native apps. They offer robust offline coding patterns and are designed for building apps that run directly on mobile, desktop, and embedded devices, using .NET, Qt, Swift or Kotlin.