Get Started with ArcGIS Experience Builder Developer Edition

Document created by jsong-esristaff Employee on Jul 29, 2019Last modified by jsong-esristaff Employee on Mar 11, 2020
Version 6Show Document
  • View in full screen mode

This document shows how to set up Experience Builder Developer Edition on your machine, access the developer guide, and create an experience from scratch.

Set up Experience Builder Developer Edition on your machine

  1. Download and install Node.js (V10.x and up) on your computer.  
  2. Unzip the file. 
  3. Open the Command Prompt window, cd to the /server directory of the Experience Builder installation, and type npm ci to install necessary modules. 
  4. Type npm start to start the server. 
  5. Register your Experience Builder client on ArcGIS for Developers site to get the Client ID. The URL to open Experience Builder https://[machine_name]:3001/ needs to be one of the Redirect URIs under the Authentication tab.  
  6. Enter your ArcGIS Online Organization or Portal for ArcGIS URL and Client ID 
  7. Log in with your ArcGIS Online Creator account or Portal for ArcGIS account. 
    Note: Currently, only built-in account is supported if connecting to Portal for ArcGIS. 

For the complete developer guidesee https://[machine_name]:3001/doc/index.html 

Create an experience
You may create an experience by choosing a template or from a scratch with Experience Builder. The following workflow demonstrates how to create an experience from scratch.
1. Log in with your ArcGIS Online Creator account.
2. On the Experience Builder home page, click Create New.
3. Choose the Blank Scrolling Page template and click create to start the editor.
4. Click the + to open the Insert panel.
5. Drag and drop an Image widget to the page.
6. Make sure the Image widget is selected on the page. On the right-side panel browse to a local image file and configure the properties.
7. Drag and drop a Text widget to the page.
8. Select the widget and type your sample texts.
9. Drag and drop a Map widget to the page.
10. Make sure the map widget on the page is selected. Set web map or/and web scene as the data source and configure properties on the right-side panel.
11. Drag and drop the widgets on the page to arrange them in the layout you want.
12. Optionally, close the Insert panel then click the Add page button to add a new page.
13. Click Save to save the experience.
14. Click Preview to preview the experience.
15. Click Publish to publish the experience.
16. Click View published item from the dropdown list beside the Publish button to view the experience.

Create a widget
See Widget Development Guide at https://[machine_name]:3001/doc/index.html

2 people found this helpful