ArcGIS JS API 4.x / React / Redux Boilerplate

Web scene viewer boilerplate web application using React and Redux, including the ArcGIS JS API as middleware. The example application displays a web scene with a simple sun position slider.

Features

This boilerplate example integrates:

• ArcGIS JS API 4.x
• React
• Redux
• React Redux
• Redux Thunk
• Calcite Web

It provides two useful Redux middleware examples:

• arcgis-authentication - handles Portal login.
• arcgis-sceneview - opens a SceneView with a WebScene, handle selection, and environment changes.

It provides support for:

• Redux DevTools Extension - You can browse the state and dispatch actions live while the application is running.
• Hot Module Replacement - Updated components or reducers are automatically replaced while the application is running. The state is preserved during updates, and the SceneView does not need to be reloaded.
• Tests with Jest and Enzyme.

Instructions

Installing

Download the repository and install the dependencies:

$ npm install

Registering your App

For this code to work, you need to add and register an app in ArcGIS Online, add the correct redirect URI (e.g. http://localhost:8080), and add the App ID to /src/constants/app-constants.js.

• How to add an app in ArcGIS Online
• How to register an app in ArcGIS Online
• Make sure to set the correct redirect URI (e.g. http://localhost:8080)

Finally, update /src/constants/app-constants.js to contain your App ID (and portal URL if not ArcGIS Online):

export const APP_ID = '<insert App ID here>';
export const APP_PORTAL_URL = 'https://www.arcgis.com';

Running

Run tests:

$ npm test

Build and run live server:

$ npm start

Requirements

• Notepad or your favorite editor
• npm
• Web browser with access to the Internet

Resources

• ArcGIS for JavaScript API Resource Center
• How to add an app in ArcGIS Online
• How to register an app in ArcGIS Online
• React
• Redux
• React Redux
• Redux Thunk
• Calcite Web
• Why you aren't using Redux middleware enough
• Writing Tests - Redux
• Jest Tests
• Enzyme Tests
• ArcGIS Blog
• twitter@esri

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.