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. For projects that use the JavaScript Maps SDK on a locally hosted CDN in a disconnected environment, visit the downloads page.
In a project using the core API, Map components, and Coding components, the JavaScript Maps SDK's assets include styles, images, web workers, wasm and localization files.
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/cdn/assets/
- @arcgis/coding-components
/node_modules/@arcgis/coding-components/dist/cdn/assets/
- @esri/calcite-components
/node_modules/@esri/calcite-components/dist/calcite/assets/
Explicitly import local stylesheets if necessary
Starting with the 4.34 release, CSS is loaded automatically when using the SDK's components with npm, including stylesheets for both the components and Calcite.
However, if your app is built with Angular or a build tool that does not have a CSS plugin, this won't work automatically.
In case stylesheets are not automatically imported for you, ensure that you have added imports in your style.css file to reference local copies of the stylesheets.
/* Core API stylesheet */
/* Only necessary if you still work with widgets and/or programmatically initializing a new MapView/SceneView */
/* @import "@arcgis/core/assets/esri/themes/light/main.css"; */
/* Component stylesheets */
@import "@esri/calcite-components/calcite/calcite.css";
@import "@arcgis/map-components/main.css";
@import "@arcgis/coding-components/main.css";
/*
* Starting with v4.33 of the JavaScript SDK, package named exports for
* component stylesheets require modern build tooling and the latest LTS
* versions of Node.js and npm (see system requirements) so that package
* exports resolve correctly.
* If you encounter issues, remove lines 7–8 above and uncomment the CDN
* stylesheet imports below.
* TypeScript projects using legacy `node` moduleResolution may also
* encounter issues.
*/
/* @import "@arcgis/map-components/dist/cdn/main.css"; */
/* @import "@arcgis/coding-components/dist/cdn/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/cdn/assets/**/*.*\" ./public/assets && cpx \"node_modules/@arcgis/map-components/dist/cdn/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.
<head>
<title>Maps SDK in a disconnected environment</title>
<script>
globalThis.esriConfig = {
assetsPath: "./assets",
// Optional: point to your Enterprise portal and /portal/apps/fonts directory
// portalUrl: "https://<your-enterprise-portal>.com/portal",
// fontsUrl: "https://<your-enterprise-portal>.com/portal/apps/fonts/",
};
</script>
</head>
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 paths
setCalciteAssetPath("./assets");
setMapAssetPath("./assets");
setCodingAssetPath("./assets");
// Individual imports for each component used
import "@arcgis/map-components/components/arcgis-map";
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.