A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.arcgis.com/javascript/latest/working-with-assets/ below:

Working with assets | Overview | ArcGIS Maps SDK for JavaScript 4.33

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:

Local assets Code

In this guide, Vite is the build tool being used. If you're looking for a complete sample, check out the jsapi-resources repo working with components in a disconnected environment sample locally on your machine.

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://js.arcgis.com, 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:

Attention

Working with a local copy of the assets will increase the on-disk size of your build compared to using ArcGIS CDN-hosted assets.

Attention

Assets switched from /dist/arcgis-<package-name>/assets/ to /dist/cdn/assets/ in v4.33 of the JavaScript Maps SDK as part of the new CDN endpoint for components.

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.

style.css

Use dark colors for code blocks Copy

1
2
3
4
5

@import "@esri/calcite-components/calcite/calcite.css";
@import "@arcgis/core/assets/esri/themes/light/main.css";
@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.

package.json

Use dark colors for code blocks Copy

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/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.

Tip

Every time you update your dependencies, it is recommended to copy assets into your project with each build to ensure the assets stay in sync.

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.

main.js

Use dark colors for code blocks Copy

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";
Attention

The local asset paths may be different between your local development environment and the production environment.

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

You may use default ArcGIS CDN assets or local assets from /node_modules. If you followed all local assets instructions, your browser's developer tools network tab shouldn't show requests to https://js.arcgis.com.

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4