Web Scene viewer boilerplate web application using React and Redux, including the ArcGIS JS API as middleware. This boilerplate example integrates:
It provides two useful Redux middleware examples:
- arcgis-authentication to handle Portal login
- arcgis-sceneview to show a SceneView with a WebScene, handle selection, and environment changes.
The example application displays a web scene with a simple sun position slider.
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
Run ESLint:
$ npm run lint
Build and run live server:
$ npm run server
This package supports the Redux DevTools Extension for Chrome. You can browse the state and dispatch actions live while the application is running.
This example supports Hot Module Replacement. Updated components or reducers are automatically replaced while the application is running. The state is preserved during updates, and the web scene does not need to be reloaded.
This example includes Jest tests for:
- Action creators
- Reducers
- ArcGIS Middleware
And Enzyme tests for:
- Components
For more details on testing see Writing Tests - Redux.
The ArcGIS JS API is based on Dojo. To make this ES6 application work, we use Babel to transpile and Webpack to bundle it into an AMD module. This AMD module is configured as the application (app) in dojoConfig.js.
This package uses Gulp for workflow automation.