The next generation of the OpenAerialMap.
yarn install
Installs necessary dependencies.
The following environment variables are required. You can copy and rename .env.sample
to .env
for use as a template.
REACT_APP_API_URL
The URL with port of the oam-api.
REACT_APP_ACCESS_TOKEN_KEY
The key used for local storage of JWT.
REACT_APP_UPLOAD_BUCKET
The S3 bucket for uploads.
REACT_APP_AWS_KEY
The non-secret AWS key for signing uploads.
REACT_APP_MAPBOX_ACCESS_TOKEN
Can be used with a local instance of oam-api-next for development.
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
yarn test
Runs unit tests.
yarn run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
The application uses Redux for state management.
The Redux store is a vanilla JS object but each logical state slice is an ImmutableJS map.
State slices are never queried directly from the store but are accessed via selectors which are memomized using the Reselect library where appropriate.
The application design uses both Presentational and Container components but makes liberal use of react-redux connect
as outlined here.
State that is transient or does not affect other components in the application can be maintained directly in components where appropriate as described here.
Pure stateless React components are preferred but Class components are used where local state is required.
Any impure actions which may have side effects (asynchronous API requests, interaction with browser local storage) are isolated in Redux middleware.
Cross-cutting actions are also managed through the use of middleware.
The application uses Mapbox GL JS for map display and management. When the Map
React component mounts it loads a style and some GeoJSON data. This state is then pushed into the Redux store where all subsequent actions act on this state and provide the Map component with the new updated style via props. A more detailed description of this approach is available in this blog post by Tom Macwright.
The application uses Material-UI for UI components and styling.
Individual component style overrides are acheived using Material UIs own css injection with JSS.
The application store is configured to support the redux-devtools-extension for advanced debugging with state rewind and fast forward.
Because the application makes extensive use of HOCs, wrapped components are exposed as the default export while raw components are available as a named component. This allows for unit testing without invoking HOC behavior.
The application uses tape-await to simplify asynchronous test flow for middleware.