starter-apps

ArcGIS API for JavaScript 4.x starter apps

The goal of these starter apps is to provide the best developer experience possible for developers learning the ArcGIS API for JavaScript

Language	Framework	From	Strategy	Bundler	Code
JavaScript	None	CDN	AMD	None	Code
JavaScript	Svelte	CDN	AMD	Rollup.js	Code
JavaScript	None	CDN	ESM	None	Code
JavaScript	Ember.js	Local	ESM	None	Code
JavaScript	React	Local	ESM	None	Code
JavaScript	Vue.js	Local	ESM	None	Code
JavaScript	None	Local	ESM	Rollup.js	Code
JS / NodeJS	None	Local	ESM	Rollup.js	Code
JavaScript	None	Local	ESM	Snowpack	Code
JavaScript	None	Local	ESM	Vite	Code
JavaScript	None	Local	ESM	Webpack	Code
JavaScript	None	Local	ESM	Webpack	Code (alt)
TypeScript	None	CDN	AMD1	None	Code
TypeScript	Angular	Local	ESM	None	Code
TypeScript	None	Local	ESM	Rollup.js	Code
TypeScript	None	Local	ESM	Webpack	Code

Recomemded talks:

• ArcGIS API for JavaScript: Options for Consuming the API
• ArcGIS API for JavaScript: Building Apps with ES Modules

Code autocompletion

You can speed up your developement using code autocompletion in any application that uses local ESM modules (with plain JS) or TypeScript within Visual Studio Code because both includes @types/arcgis-js-api and the IDE identifies it an extend the autocompletion.

With type definitions you will get

1. Autocompletion of supported properties and methods of each class:
   

2. Documentation about supported parameters, links to the API Reference, etc.:
   

Code snippets

You can speed up your developement using code using ArcGIS API for JavaScript Snippets for Visual Studio Code. It includes code snippets to:

1. Help you instantiate classes like Webmap:
   

2. Providing you with all accepted values in a property like map.basemap:
   
   

3. But you can also add your own code snippets

You can find additional snippets in https://github.com/hhkaos/esri-vscode-snippets and a snippets builder tool to add your custom ones.

You can also migrate those snippets to Sublime Text and Atom with this tool.

Contributions

New starter apps and improvements to existing starter apps (simplifications, instructions, bug fixing, updates, ...) are welcome. So please feel free to submit yours.

If you don't find a starter app that fits your needs, do not hesitate and open an issue.

Note ¹: you will use import statements (ESM) with the AMD path, and the TypeScript compiler will translate them to AMD.

Starter apps maintenance and support

This starter apps are maintained by the community. If you find something broken or outdated and the code from the starter app comes from another repository please open the issue there, if it doesn't feel free to open an issue on this repo.

Note that frameworks and bundlers are outside of the scope of support from the Esri Technical Support. In any case, you can use the issues repositories related to each starter app to interact with the community for support.

Acknowledgments

Bellow you will find some of the resources used to compile this samples apps:

• https://github.com/Esri/jsapi-resources/tree/master/esm-samples/*: ts-esm-local-nobundler-angular, js-esm-local-nobundler-ember, js-esm-local-nobundler-react, js-esm-cdn-nobundler-noframework, js-esm-local-rollup-nodejs, js-esm-local-nobundler-vue, js-esm-local-webpack-noframework-2, js-esm-local-rollup-noframework
• https://github.com/Esri/arcgis-js-cli: ts-esm-local-rollup-noframework, ts-esm-local-webpack-noframework
• https://github.com/Esri/jsapi-resources/tree/master/4.x/typescript/demo: ts-amd-cdn-nobundler-noframework
• http://js.arcgis.com/: js-amd-cdn-nobundler-noframework
• Quick look at custom builds with ArcGIS JSAPI: js-esm-local-vite-noframework, js-esm-local-webpack-noframework
• https://github.com/odoe/snowpack-jsapi: js-esm-local-snowpack-noframework