Asset Files

Default Asset Loading (CDN)

By default, GeoBlazor loads assets from the ArcGIS CDN (e.g., https://js.arcgis.com/[4.x]/@arcgis/core/assets) to reduce package size and improve performance. This is the recommended approach for most applications, and nothing special needs to be done to keep these assets up to date. However, if you need to load assets from a different URL or bundle them with your application, you will need to track the versions of the ArcGIS NPM packages used in GeoBlazor (the current versions are listed below).

GeoBlazor Version	ArcGIS Core Version	Maps Components Version	Calcite Components Version
4.2.0	4.33.10	4.33.10	3.2.1
4.1.0	4.32.9	N/A	N/A

Using Assets from a separate URL

If you need to load assets from a different URL (for example, if you have your own CDN or a custom asset server), you can configure the asset path in your application. Add the following line to your environment variables (e.g., appsettings.json, Azure App Service Environment Variables, etc.):

{
  "ArcGISAssetsPath": "https://your.custom.asset.server/path/to/assets"
}

This URL should contain the ArcGIS assets from the following NPM packages:

{
  "@arcgis/core": "{ARCGIS_CORE_VERSION}", // everything in @arcgis/core/assets
  "@arcgis/map-components": "{MAPS_COMPONENTS_VERSION}", // everything in @arcgis/map-components/dist/cdn/assets
  "@esri/calcite-components": "{CALCITE_VERSION}" // everything in @esri/calcite-components/dist/calcite/assets
}

Using Bundled Assets

Prior to version 4.2, GeoBlazor bundled all the assets into the NuGet package. While this made build and load times slower, it is sometimes necessary for some disconnected scenarios. If you need to continue to bundle assets with your application, follow these steps:

1. In your web server project folder, run the following two commands from a terminal:

    npm install @arcgis/core @arcgis/map-components @esri/calcite-components
    npm install -D cpx
   

2. Find and open the package.json file in that folder and ensure the following dependencies are present. If the versions do not match the ones below, update them accordingly:

    {
      "dependencies": {
        "@arcgis/core": "{ARCGIS_CORE_VERSION}",
        "@arcgis/map-components": "{MAPS_COMPONENTS_VERSION}",
        "@esri/calcite-components": "{CALCITE_VERSION}"
      },
      "devDependencies": {
        "cpx": "^{LATEST_NPM_VERSION}"
      }
    }
   

3. Create or add to a scripts section in your package.json file to copy the assets to your web server’s wwwroot folder:

    {
      "scripts": {
        "copyAssets": "npm run copyCalcite && npm run copyCore && npm run copyComponents",
        "copyCalcite": "cpx \"node_modules/@esri/calcite-components/dist/calcite/assets/**/*.*\" ./wwwroot/assets",
        "copyCore": "cpx \"node_modules/@arcgis/core/assets/**/*.*\" ./wwwroot/assets",
        "copyComponents": "cpx \"node_modules/@arcgis/map-components/dist/cdn/assets/**/*.*\" ./wwwroot/assets"
      },
      "dependencies": {
        "@arcgis/core": "{ARCGIS_CORE_VERSION}",
        "@arcgis/map-components": "{MAPS_COMPONENTS_VERSION}",
        "@esri/calcite-components": "{CALCITE_VERSION}"
      },
      "devDependencies": {
        "cpx": "^{LATEST_NPM_VERSION}"
      }
    }
   

4. In your .csproj file, add the following target to ensure the assets are copied during the build process:

    <Target Name="CopyAssets" BeforeTargets="BeforeCompile">
      <Exec Command="npm run copyAssets" ContinueOnError="false" />
      <Message Text="ArcGIS Assets copied to wwwroot/assets" Importance="high" />
    </Target>
   

5. Add the following line to your environment variables (e.g., appsettings.json, Azure App Service Environment Variables, etc.):

    {
      "ArcGISAssetsPath": "./assets"
    }
   

6. Run the application, do a hard cache refresh in your browser, and verify that the assets are being loaded from the local wwwroot/assets folder instead of the CDN using the browser’s developer tools (F12) to inspect the network requests.
7. Consider adding more advanced logic to the copy scripts to add a version number in the asset folder path, e.g., ./assets/4_33/. This will prevent caching issues when you update the assets in the future.

See Working with Assets on the ArcGIS Developers site for more information on how to work with assets in ArcGIS JavaScript applications.