Use the SDK in a disconnected environment

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

Setup

Like all JavaScript Maps SDK component packages, @arcgis/coding-components has dependencies on @arcgis/core and @esri/calcite-components. To run @arcgis/coding-components in a disconnected environment, you can follow the steps below after setting up the jsapi-resources repo coding-components Vite sample locally on your machine.

Update stylesheets

Update the style.css file to use local copies of the stylesheets:

1
2
3
4

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

Copy assets

In this step, you 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
{
  "scripts": {
    "dev": "npm run copy:all && vite",
    "build": "npm run copy:all && vite build",
    "copy:all": "npm run copy:components && npm run copy:core",
    "copy:components": "cpx \"node_modules/@arcgis/coding-components/dist/arcgis-coding-components/assets/**/*.*\" ./public/assets",
    "copy:core": "cpx \"node_modules/@arcgis/core/assets/**/*.*\" ./public/assets",
    "preview": "vite preview"
  }
}

Point to the copied assets

Update the main.js file to work with local assets for each npm package:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import esriConfig from "@arcgis/core/config.js";
import { setAssetPath as setCalciteAssetPath } from "@esri/calcite-components/dist/components";
import { setArcgisAssetPath as setCodingAssetPath } from "@arcgis/coding-components/dist/components";

// Set assets path for @arcgis/core, @esri/calcite-components and @arcgis/coding-components
const assetPathUrl = `${location.href}assets`;

esriConfig.assetsPath = assetPathUrl;
setCalciteAssetPath(`${assetPathUrl}/components/assets`);
setCodingAssetPath(assetPathUrl);

// Individual imports for each component used
import "@arcgis/coding-components/dist/components/arcgis-arcade-editor";
import "@esri/calcite-components/dist/components/calcite-scrim";

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

For offline workflows where individual devices work with limited or no internet connection, use the ArcGIS Maps SDKs for native apps. These are designed for building apps that run directly on mobile, desktop, and embedded devices, using .NET, Qt, Swift or Kotlin.