Install notes for the ArcGIS API for JavaScript

View the Terms of Use before installing the JavaScript library.

The recommended approach for accessing the ArcGIS API for JavaScript is the hosted version on the CDN (Content Delivery Network).

<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>

However, there are instances where you might want to host a copy of the API locally on your own web server. For more information about the API read the Install and set up overview topic.

Installing the ArcGIS API for JavaScript library

The instructions for installing the ArcGIS API for JavaScript library on a Windows operating system versus installing on a Unix/Linux based system are conceptually identical except for the fact that you will need to configure the web server software specific to the operating system and web server instance.

Apache HTTP server

These instructions assume that you are installing the ArcGIS API for JavaScript library in the following location https://www.example.com/javascript/api/4.22/ (/var/www/html/javascript/api/4.22) on an Apache HTTP Server, where www.example.com is the combination of the fully qualified domain name and top level domain of your website.

The ArcGIS API for JavaScript library can be copied in its entirety to your web server directory. Copy /arcgis_js_v422_api/arcgis_js_api/javascript/4.22/ and all its contents from the ArcGIS API for JavaScript download to your web server. In this example the files are copied to: /var/www/html/javascript/api/4.22/.

Internet Information Services (IIS)

These instructions assume that you are installing the ArcGIS API for JavaScript library in the following location https://www.example.com/javascript/api/4.22/ (C:\Inetpub\wwwroot\javascript\api\4.22\) on Internet Information Services (IIS) for Windows¥Ä¥ç Server, where www.example.com is the combination of the fully qualified domain name and top level domain of your website.

The ArcGIS API for JavaScript library can be copied in its entirety to your web server directory. Copy \arcgis_js_v422_api\arcgis_js_api\javascript\4.22\ and all its contents from the ArcGIS API for JavaScript download to your web server. In this example the files are copied to: C:\Inetpub\wwwroot\javascript\api\4.22\.

Requirements

The default hosting configuration for both the ArcGIS API for JavaScript library and documentation is HTTPS.

Test the installation

The following sample is included with the downloaded version of the ArcGIS API for JavaScript. After you have copied /arcgis_js_v422_api/arcgis_js_api/javascript/4.22/ and all its contents from the ArcGIS API for JavaScript download to your web server the API can be tested by opening the application https://www.example.com/javascript/api/4.22/index.html in a supported web browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Test local installation of ArcGIS API for JavaScript</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 93%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="./esri/themes/light/main.css" />
    <script src="./init.js"></script>

    <script>
      require(["esri/Basemap", "esri/layers/TileLayer", "esri/Map", "esri/views/SceneView"], function (
        Basemap,
        TileLayer,
        Map,
        SceneView
      ) {
        // --------------------------------------------------------------------
        // If you do not have public internet access, change the layer URL to
        // point to your own locally accessible cached service.
        // --------------------------------------------------------------------
        const layer = new TileLayer({
          url: "https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
        });
        const customBasemap = new Basemap({
          baseLayers: [layer],
          title: "My Basemap"
        });
        const myMap = new Map({
          basemap: customBasemap
        });
        const view = new SceneView({
          container: "viewDiv",
          map: myMap
        });

        checkThisOne("./esri/views/3d/environment/resources/stars.wsv", "wsv mimetype");
        checkThisOne("./esri/t9n/basemaps.json", "json mimetype");
        checkThisOne("./esri/themes/base/icons/fonts/CalciteWebCoreIcons.ttf", "ttf mimetype");
        checkThisOne("./esri/themes/base/icons/fonts/CalciteWebCoreIcons.woff", "woff mimetype");

        function checkThisOne(url, desc) {
          fetch(url, {
            method: "HEAD"
          })
            .then(function (response) {
              if (response.ok) {
                logDiv.innerHTML += "* OK: " + desc + "<br/>";
                if (response.status !== 200) {
                  logDiv.innerHTML += "&nbsp;&nbsp;&nbsp;&nbsp;status: " + response.status + "<br/>";
                }
                return response.blob();
              } else {
                // response not ok
                logDiv.innerHTML +=
                  "* HTTP error " + response.status + ' for <a href="' + url + '">' + url + "</a><br/>";
                alert("Problem accessing " + desc);
              }
            })
            .catch(function (error) {
              logDiv.innerHTML += '* BAD: <a href="' + url + '">' + url + "</a><br/>";
            });
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="logDiv"></div>
  </body>
</html>

The result seen in your web browser should look similar to the screenshot below, where X.YZ is 4.22.

verification