Web AppBuilder TypeScript Examples

Featuring examples of using TypeScript with Web AppBuilder for ArcGIS.

Examples

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.

First-time:

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.16.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

Development:

Run grunt and as you modify your files, the web app (in the dist folder - serve via a web server like IIS or use serve) should be updated automatically.

Documentation

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

• We are currently supporting TypeScript version 3.9.
• The Declare Decorator is used to tell TypeScript how to translate our Widget class into a dojo/declare syntax that Web AppBuilder is looking for. Decorators are currently experimental (although widely used) so beware of that small risk. If TypeScript did take out decorators at some point, we would have to change how we're doing this.
• For more info, see this blog post: Custom Web AppBuilder Widgets in TypeScript