how to hosted locally arcgis js api v4.2

3746
3
Jump to solution
08-31-2021 07:46 PM
zkf
by
New Contributor II

i cannot find the document for hosted locally arcgis js api v4.2,

It seems different from all previous versions.

how can i do

 

0 Kudos
1 Solution

Accepted Solutions
mdonnelly
Esri Contributor

Hello,

If you look in the extracted download of 4.2 you will find a document that outlines how to host it locally:

<API extraction folder>/arcgis_js_v420_api/arcgis_js_v420_api/arcgis_js_api/javascript/downloads/install-windows/index.html

Installing the ArcGIS API for JavaScript library on Windows

The instructions below assume that you are installing the ArcGIS API for JavaScript library in the following location https://www.example.com/javascript/api/4.20/ (C:\Inetpub\wwwroot\javascript\api\4.20\) 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 web site.

If you are using a non-Windows operating system, please see the instructions on deploying the library on Unix/Linux.

The ArcGIS API for JavaScript library can be copied in its entirety to your web server directory. After copying the files to your web server, you will need to edit some files to specify the baseUrl (www.example.com/javascript/api/4.20/) for the configuration. (C:\Inetpub\wwwroot\javascript\api\4.20\). Copy \arcgis_js_v420_api\arcgis_js_api\javascript\4.20\ 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.20\.

Requirements

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

Modify the Build (manually)

  1. Open C:\Inetpub\wwwroot\javascript\api\4.20\init.js in a text editor and search for the text [HOSTNAME_AND_PATH_TO_JSAPI], and replace this text with www.example.com/javascript/api/4.20/init.js.

Modify the Build (script)

Note: Scripting the update might be useful in a multi-machine deployment. Otherwise, it is not necessary.

This section will modify the ArcGIS API for JavaScript library [HOSTNAME_AND_PATH_TO_JSAPI]dojo text with www.example.com/javascript/api/4.20/init.js.

  1. Node.js must be installed on the machine running the Example Node.js script (update-library.js).
  2. Create a file such as update-library.js in a local directory.
  3. Copy the contents of the example Node.js script (update-library.js) into the update-library.js file.
  4. Open a terminal window and change directory (cd) to the directory containing the update-library.js script.
  5. Verify node --version return the currently installed version of Node.js.
  6. Update the localHost, apiDirectory, and jsapiDownloadLocation script variables.
  7. The apiDirectory and jsapiDownloadLocation script variables will not need modified if using the same directories described in this documentation.
  8. Execute the update-library.js script using the command node update-library.js.
  9. Open https://www.example.com/javascript/api/4.20/init.js in a browser of your choice.
  10. Search for baseUrl:" and verify [HOSTNAME_AND_PATH_TO_JSAPI]dojo has been replaced with the value of localHost.

Example Node.js script

The code sample below is written in JavaScript for Node.js and will automate replacing the ArcGIS API for JavaScript library [HOSTNAME_AND_PATH_TO_JSAPI]dojo text with www.example.com/javascript/api/4.20/init.js.

Note: A script like update-library.js could be written in any scripting language that supports reading/writing files and some type of string substitution manipulation such as regular expressions.

// --------------------------------------------------------------------
// update-library.js
//
// Helper script to replace the ArcGIS API for JavaScript library
// `[HOSTNAME_AND_PATH_TO_JSAPI]dojo` text with `www.example.com/javascript/api/4.20/init.js`.
//
// Note: requires node version 7.10.0 and npm version 4.2.0 or higher.
// --------------------------------------------------------------------
let fs                       = require("fs"),
    path                     = require("path"),
    util                     = require("util"),
    // --------------------------------------------------------------------
    // hostname to replace js.arcgis.com in the library such as:
    // www.example.com
    // apiDirectory would be the virtual directory in the web server hosting
    // the ArcGIS API for JavaScript library
    // --------------------------------------------------------------------
    localHost                = "www.example.com",
    apiDirectory             = "javascript/api/4.20/init.js",
    // --------------------------------------------------------------------
    // path to the downloaded ArcGIS API for JavaScript library
    // download archive contents arcgis_js_v%jsapi_version.replace(".", "")%_api\arcgis_js_api\4.20\
    // to IIS virtual directory C:\Inetpub\wwwroot\javascript\api\4.20\
    // --------------------------------------------------------------------
    jsapiDownloadLocation    = path.join("C:", "inetpub", "wwwroot", "javascript", "api", "4.20"),
    // --------------------------------------------------------------------
    // Regular expression to match the template text
    // [HOSTNAME_AND_PATH_TO_JSAPI] in
    // baseUrl:"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo"
    // --------------------------------------------------------------------
    hostnameAndPathRegEx            = /\[HOSTNAME_AND_PATH_TO_JSAPI\]dojo/i,
    // --------------------------------------------------------------------
    // base url for the locally hosted ArcGIS API for JavaScript such as:
    // www.example.com/javascript/api/4.20/
    // --------------------------------------------------------------------
    jsapiURLBaseLocal        = util.format("%s/%s", localHost, apiDirectory),
    // --------------------------------------------------------------------
    // Dojo file containing the CDN link to ArcGIS API for JavaScript
    //C:\Inetpub\wwwroot\javascript\api4.20\init.js
    // --------------------------------------------------------------------
    jsapiInitFile = path.join(jsapiDownloadLocation, "init.js");

// --------------------------------------------------------------------
// 1) Read the ArcGIS API for JavaScript library files
// 2) Replace the script src attribute for the ArcGIS API for JavaScript CDN
// --------------------------------------------------------------------

// --------------------------------------------------------------------
// Read the init file contents from disk
// --------------------------------------------------------------------
console.log("library - reading %s", jsapiInitFile);
let rawInitContent = fs.readFileSync(jsapiInitFile, "utf-8");
// --------------------------------------------------------------------
// Replace the script src attribute for the ArcGIS API for JavaScript CDN
// --------------------------------------------------------------------
console.log("library - replacing script tag for %s", jsapiInitFile);
let updatedInitContent = rawInitContent.replace(hostnameAndPathRegEx, jsapiURLBaseLocal);
// --------------------------------------------------------------------
// Save the init file contents to disk
// --------------------------------------------------------------------
console.log("library - saving %s", jsapiInitFile);
fs.writeFileSync(jsapiInitFile, updatedInitContent, "utf-8");

Test the installation

Now you should be able to access the ArcGIS API for JavaScript library from your web server using the following URL:

<script src="https://www.example.com/javascript/api/4.20/init.js"></script>

Test your installation. You can use the following test code to validate your ArcGIS API for JavaScript library installation.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="https://www.example.com/javascript/api/4.20/esri/themes/light/main.css" />
    <style>      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://www.example.com/javascript/api/4.20/init.js"></script>
    <script>      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView"
      ], function (Basemap, TileLayer, Map, MapView){
        // --------------------------------------------------------------------
        // If you do not have public internet access then use the Basemap class
        // and point this URL to your own locally accessible cached service.
        //
        // Otherwise you can just use one of the named hosted ArcGIS services.
        // https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer
        // --------------------------------------------------------------------
        const layer = new TileLayer({
          url: "https://www.example.com/arcgis/rest/services/Folder/Custom_Base_Map/MapServer"
        });
        const customBasemap = new Basemap({
          baseLayers: [layer],
          title: "Custom Basemap",
          id: "myBasemap"
        });
        const myMap = new Map({
          basemap: customBasemap
        });
        const view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Installing Node.js

For assistance installing Node.js on Windows, see the Installing Node.js topic in the Windows: Hosting the ArcGIS API for JavaScript documentation help topic.

Regards,
Mark

View solution in original post

3 Replies
mdonnelly
Esri Contributor

Hello,

If you look in the extracted download of 4.2 you will find a document that outlines how to host it locally:

<API extraction folder>/arcgis_js_v420_api/arcgis_js_v420_api/arcgis_js_api/javascript/downloads/install-windows/index.html

Installing the ArcGIS API for JavaScript library on Windows

The instructions below assume that you are installing the ArcGIS API for JavaScript library in the following location https://www.example.com/javascript/api/4.20/ (C:\Inetpub\wwwroot\javascript\api\4.20\) 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 web site.

If you are using a non-Windows operating system, please see the instructions on deploying the library on Unix/Linux.

The ArcGIS API for JavaScript library can be copied in its entirety to your web server directory. After copying the files to your web server, you will need to edit some files to specify the baseUrl (www.example.com/javascript/api/4.20/) for the configuration. (C:\Inetpub\wwwroot\javascript\api\4.20\). Copy \arcgis_js_v420_api\arcgis_js_api\javascript\4.20\ 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.20\.

Requirements

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

Modify the Build (manually)

  1. Open C:\Inetpub\wwwroot\javascript\api\4.20\init.js in a text editor and search for the text [HOSTNAME_AND_PATH_TO_JSAPI], and replace this text with www.example.com/javascript/api/4.20/init.js.

Modify the Build (script)

Note: Scripting the update might be useful in a multi-machine deployment. Otherwise, it is not necessary.

This section will modify the ArcGIS API for JavaScript library [HOSTNAME_AND_PATH_TO_JSAPI]dojo text with www.example.com/javascript/api/4.20/init.js.

  1. Node.js must be installed on the machine running the Example Node.js script (update-library.js).
  2. Create a file such as update-library.js in a local directory.
  3. Copy the contents of the example Node.js script (update-library.js) into the update-library.js file.
  4. Open a terminal window and change directory (cd) to the directory containing the update-library.js script.
  5. Verify node --version return the currently installed version of Node.js.
  6. Update the localHost, apiDirectory, and jsapiDownloadLocation script variables.
  7. The apiDirectory and jsapiDownloadLocation script variables will not need modified if using the same directories described in this documentation.
  8. Execute the update-library.js script using the command node update-library.js.
  9. Open https://www.example.com/javascript/api/4.20/init.js in a browser of your choice.
  10. Search for baseUrl:" and verify [HOSTNAME_AND_PATH_TO_JSAPI]dojo has been replaced with the value of localHost.

Example Node.js script

The code sample below is written in JavaScript for Node.js and will automate replacing the ArcGIS API for JavaScript library [HOSTNAME_AND_PATH_TO_JSAPI]dojo text with www.example.com/javascript/api/4.20/init.js.

Note: A script like update-library.js could be written in any scripting language that supports reading/writing files and some type of string substitution manipulation such as regular expressions.

// --------------------------------------------------------------------
// update-library.js
//
// Helper script to replace the ArcGIS API for JavaScript library
// `[HOSTNAME_AND_PATH_TO_JSAPI]dojo` text with `www.example.com/javascript/api/4.20/init.js`.
//
// Note: requires node version 7.10.0 and npm version 4.2.0 or higher.
// --------------------------------------------------------------------
let fs                       = require("fs"),
    path                     = require("path"),
    util                     = require("util"),
    // --------------------------------------------------------------------
    // hostname to replace js.arcgis.com in the library such as:
    // www.example.com
    // apiDirectory would be the virtual directory in the web server hosting
    // the ArcGIS API for JavaScript library
    // --------------------------------------------------------------------
    localHost                = "www.example.com",
    apiDirectory             = "javascript/api/4.20/init.js",
    // --------------------------------------------------------------------
    // path to the downloaded ArcGIS API for JavaScript library
    // download archive contents arcgis_js_v%jsapi_version.replace(".", "")%_api\arcgis_js_api\4.20\
    // to IIS virtual directory C:\Inetpub\wwwroot\javascript\api\4.20\
    // --------------------------------------------------------------------
    jsapiDownloadLocation    = path.join("C:", "inetpub", "wwwroot", "javascript", "api", "4.20"),
    // --------------------------------------------------------------------
    // Regular expression to match the template text
    // [HOSTNAME_AND_PATH_TO_JSAPI] in
    // baseUrl:"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo"
    // --------------------------------------------------------------------
    hostnameAndPathRegEx            = /\[HOSTNAME_AND_PATH_TO_JSAPI\]dojo/i,
    // --------------------------------------------------------------------
    // base url for the locally hosted ArcGIS API for JavaScript such as:
    // www.example.com/javascript/api/4.20/
    // --------------------------------------------------------------------
    jsapiURLBaseLocal        = util.format("%s/%s", localHost, apiDirectory),
    // --------------------------------------------------------------------
    // Dojo file containing the CDN link to ArcGIS API for JavaScript
    //C:\Inetpub\wwwroot\javascript\api4.20\init.js
    // --------------------------------------------------------------------
    jsapiInitFile = path.join(jsapiDownloadLocation, "init.js");

// --------------------------------------------------------------------
// 1) Read the ArcGIS API for JavaScript library files
// 2) Replace the script src attribute for the ArcGIS API for JavaScript CDN
// --------------------------------------------------------------------

// --------------------------------------------------------------------
// Read the init file contents from disk
// --------------------------------------------------------------------
console.log("library - reading %s", jsapiInitFile);
let rawInitContent = fs.readFileSync(jsapiInitFile, "utf-8");
// --------------------------------------------------------------------
// Replace the script src attribute for the ArcGIS API for JavaScript CDN
// --------------------------------------------------------------------
console.log("library - replacing script tag for %s", jsapiInitFile);
let updatedInitContent = rawInitContent.replace(hostnameAndPathRegEx, jsapiURLBaseLocal);
// --------------------------------------------------------------------
// Save the init file contents to disk
// --------------------------------------------------------------------
console.log("library - saving %s", jsapiInitFile);
fs.writeFileSync(jsapiInitFile, updatedInitContent, "utf-8");

Test the installation

Now you should be able to access the ArcGIS API for JavaScript library from your web server using the following URL:

<script src="https://www.example.com/javascript/api/4.20/init.js"></script>

Test your installation. You can use the following test code to validate your ArcGIS API for JavaScript library installation.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="https://www.example.com/javascript/api/4.20/esri/themes/light/main.css" />
    <style>      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://www.example.com/javascript/api/4.20/init.js"></script>
    <script>      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView"
      ], function (Basemap, TileLayer, Map, MapView){
        // --------------------------------------------------------------------
        // If you do not have public internet access then use the Basemap class
        // and point this URL to your own locally accessible cached service.
        //
        // Otherwise you can just use one of the named hosted ArcGIS services.
        // https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer
        // --------------------------------------------------------------------
        const layer = new TileLayer({
          url: "https://www.example.com/arcgis/rest/services/Folder/Custom_Base_Map/MapServer"
        });
        const customBasemap = new Basemap({
          baseLayers: [layer],
          title: "Custom Basemap",
          id: "myBasemap"
        });
        const myMap = new Map({
          basemap: customBasemap
        });
        const view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Installing Node.js

For assistance installing Node.js on Windows, see the Installing Node.js topic in the Windows: Hosting the ArcGIS API for JavaScript documentation help topic.

Regards,
Mark
MohammedAlsadaany
New Contributor II

Hello sir

 I downloaded the API  4.21from this link https://developers.arcgis.com/downloads/#javascript

and I can not find the [HOSTNAME_AND_PATH_TO_JSAPI] in the init.js to replace it with my host location.

 

zkf
by
New Contributor II

thank you very much!

0 Kudos