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.
This boilerplate example integrates:
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.
Download the repository and install the dependencies:
$ npm install
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';Run tests:
$ npm test
Build and run live server:
$ npm start
- Notepad or your favorite editor
- npm
- Web browser with access to the Internet
- 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
Find a bug or want to request a new feature? Please let us know by submitting an issue.
Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.
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.