Deployment

The experiences you create with developer edition of ArcGIS Experience Builder can be downloaded and hosted on a web server. Any experience that is using private content must be registered on ArcGIS Online or ArcGIS Enterprise. In order to provide the best user experience for your end-users, please see the system requirements prior to deploying your experience.

Download the experience

To download the experience, on the experience gallery home page click on the ellipsis (three dots) and click Download (make sure there is no error in your client terminal when the app includes custom widgets). A ZIP file is created and downloaded to your local drive. It is located in the download directory defined for your browser.

Deploy the experience

To deploy the experience on your web server, complete the following steps:

1. Unzip the downloaded experience and copy the folder to your web server.

2. If your app has private content, complete steps 3-6, otherwise your experience is deployed.

3. Add and register the app. See Create Client ID using ArcGIS Online or ArcGIS Enterprise for details.

4. Copy the AppID and open the app config.json file located in the root app folder (e.g. <.zip file root>\cdn\0\config.json).

5. Create a clientId property under the attributes object.

6. Paste the AppID in the clientId property in the app config.json file. Save the file.

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   "attributes": {
       "portalUrl": "https://exb.maps.arcgis.com",
       "clientId": "EXBAPPsag0XSRtpj"
     },

   The app is now available by browsing to your server/app name/index.html.

Automated deployments

To generate the app ZIP export automatically from a terminal without having the Experience Builder server running, use the zipApp command. This is often used in DevOps workflows for automated deployments.

In the terminal, browse to the extracted root directory of your Experience Builder developer edition install (the directory that contains the “client” and “server” folders) and run the following command:

1
node -e "require('./server/src/middlewares/dev/apps/app-download.js').zipApp('0', 'app.zip', 'my_client_id');"

• Replace the ‘0’ with the ID of the app that you’d like to export.
• Replace the ‘app.zip’ with the name of the ZIP file you’d like it to generate.
• Replace the my_client_id with a valid AppID from ArcGIS Online or ArcGIS Enterprise. See Create Client ID using ArcGIS Online or ArcGIS Enterprise for details. This third parameter is optional.
• Ensure the NODE_ENV environmental variable is set to production in order to create the production build that generates minified (smaller) files.

Starting at version 1.15, the zipApp function supports an optional fourth parameter which is an object that can have properties of locales or configModifier.

• The locales property can be used to specify the locales to export. If this is not set, all locales will be exported.
• The configModifier property can be used to modify the config.json file before exporting the app. It can be a function or an object.
  • If it is a function, it will be called with the config object and should return the modified config object.
  • If it is an object, you can specify the update value like the below example.

1
2
3
4
5
{
  configModifier: {
    'attributes.portalUrl': 'new-portal-url'
  }
}

There are more examples in the download-app.js file.

Service worker cache

Experience Builder uses service workers to proactively control the caching of assets to improve the load times of your application. If a deployed application requires an update to its source code, config.json, or any other changes, you can do the update in the Developer edition, then re-download and deploy the app. However, if you need to do the update in the download package directly, you must complete the following steps to update the service worker cache.

1. In your app directory, rename cdn/0 to cdn/1.
2. Modify any source code or changes you need to make in the app.
3. Open index.html on your application's root folder.
   • Change <base href="./cdn/0/"/> to <base href="./cdn/1/"/> .
   • Change the buildNumber = '0' to buildNumber = '1'.

To get better performance, here are some recommended settings for the cache header:

• Cache index.html for a very short period such as one minute or no cache.
• Cache the cdn folder for a long period such as one year.