Use the SDK in a disconnected environment

There are scenarios where you might need to run the SDK in an environment that is disconnected from the public internet (e.g., LAN) to avoid making external requests, such as those to https://js.arcgis.com, where the ArcGIS CDN assets (styles, web workers, localization files, etc.) are hosted. Following the recommended steps below, such as working with assets locally, will help you achieve this, but it will increase your project's build size compared to using the ArcGIS CDN-hosted assets.

@arcgis/map-components and @arcgis/coding-components depend on @arcgis/core and @esri/calcite-components. To run these packages in a disconnected environment, follow the steps below.

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.

1
2
3
4
5

@import "@esri/calcite-components/calcite/calcite.css";
@import "@arcgis/core/assets/esri/themes/dark/main.css";
@import "@arcgis/map-components/arcgis-map-components/arcgis-map-components.css";
@import "@arcgis/coding-components/arcgis-coding-components/arcgis-coding-components.css";

Copy assets

Your app will need a way to copy assets. The copying method can vary depending on how the project is bundled. On a Mac or Windows terminal, you could use cpx2. Follow the cpx2 documentation for installing the module. Next, update the package.json file to copy local assets before the development server or build step starts:

1
2
3
4
5
6
7
8
9
10
11
{
  "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"
  }
}

It is recommended to copy the @esri/calcite-components and @arcgis/core assets into your project with each build. This ensures the assets are in-sync with the component packages and core API.

Point to the copied assets

Work with local assets for each npm package:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 esriConfig.fontUrl 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

Once you have followed these recommendations, you shouldn't see any requests to https://js.arcgis.com in the network tab of your browser's developer tools.

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.