Featuring examples of using TypeScript with Web AppBuilder
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



Featuring examples of using TypeScript with Web AppBuilder.


There are 2 types of project examples in this repository, one if you want to use and test your custom widgets within a running version of Web AppBuilder (see builder section below) and one example of if you're developing a widget for a particular app (see developer section below).

Quick Start - builder

Example using TypeScript and Grunt to copy files to your local Web AppBuilder Developer Edition so you can use your custom widgets in the builder interface. We have options for 2D Web AppBuilder apps (that use the ArcGIS API for Javascript v3.x) and 3D Web AppBuilder apps (that use the the ArcGIS API for JavaScript 4.x). This is the template that the generator-esri-appbuilder-js now outputs if you choose "TypeScript". More info here.

  1. Copy the files from the /builder folder to your GitHub repo.
  2. Update the file paths at the beginning (line ~10) of Gruntfile.js to point to your running Web AppBuilder instance.
  3. Install Node.js.
  4. npm install -g grunt-cli (see https://gruntjs.com/getting-started)
  5. npm install
  6. grunt

Quick Start - developer

If you're not using the builder interface, this version extracts Web AppBuilder, copies the config files for your app, builds your widgets, and hosts the files. This workflow is less common, but can get you running quicker and easier.


  1. Install Node.js.
  2. npm install -g grunt-cli (see https://gruntjs.com/getting-started)
  3. Clone or download this repo.
  4. Download the Web AppBuilder Developer Edition zip file from here, and save the zip file named arcgis-web-appbuilder-2.9.zip into the developer/ folder, right at the same level as the Gruntfile.js.
  5. In the terminal, browse to the developer folder
  6. npm install
  7. grunt init


Run grunt and as you modify your files, the web app should be updated automatically.


A few notes about the general ideas and principles that are used in both the builder and developer versions of this code