Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
Data explorer v2.0 ideas.docx
~$ta explorer v2.0 ideas.docx

The project was created using Create React App.

All code is written using ES6 within a React Framework


Source files

Retrieve the source files from ~/data-catalog-explorer/


Contains all .js and .css files.

  • ./src/index.js Startup code
  • ./src/App.js Entry point for the React code
  • ./src/components/ React components that take props and pass back nevents but contain little or no app logic
  • ./src/containers/ React components that contain the app logic
  • ./src/router/Router.js Routing
  • ./src/redux/Store.js Central store where all App data is stored
  • ./src/api/AGOL.js Useful AGOL functions
  • ./src/api/MasterTable.js Class containing all the logic for getting data from the master/meta tables
  • ./src/utils/ Utility functions

css files are mostly modular to avoid naming clashes and named *.module.css. The exception is index.css because this contains the css that we want to override with the themeColor setting.


Contains static html files.


Contains the minimised build files for deployment.

Install Node.js

Open a terminal window. Type: > node -v

This will display your node.js version.

If not already installed, download and install Node from

Install Project Dependencies

Open a terminal window. Type: npm install

This will install the project dependencies in a directory called ./node_modules.

Development Scripts

Open a terminal window in the project directory to run these scripts.

npm 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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm 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.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.


Upload the contents of the build folder to /site/wwwroot/data-catalog-explorer on:

For wordpress testing purposes use:

FTP passwords found in the usual place.

Wordpress Setup

Page Embed

  • Create a new page called Data Catalog Explorer
  • Add a new custom field with name EMBED_DATA_CATALOG_EXPLORER and value:
<link href="" rel="stylesheet">    
<div id="root"></div>    
<script src=""></script>
<script>window.dataCatalogExplorer.launch({appid:"42ec835a6ff04a9d9566d29795c7843a", container:"root"})</script>
  • Replace appid with the correct one for your app
  • To embed your custom field insert {EMBED_DATA_CATALOG_EXPLORER} into the page text area

Rewrite Rules

Include code to rewrite everything to the base url to prevent 404 errors.

This code was added to inc/functions.php

IMPORTANT: Do not forget to flush and regenerate the rewrite rules database after modifying rules. 
From WordPress Administration Screens, Select Settings -> Permalinks 
and just click Save Changes without any changes.
function custom_rewrite_for_data_catalogue_explorer() 
  add_rewrite_rule('^data-catalog-explorer', 'index.php?pagename=data-explorer-beta', 'top');
  add_rewrite_rule('^data-catalog-explorer/(?!static/)(.*)$', 'index.php?pagename=data-explorer-beta', 'top');
add_action('init', 'custom_rewrite_for_data_catalogue_explorer');

ArcGis Online Setup

Default Metadata Table
App Template
Suffolk App

Router Issues

Building for Relative Paths

By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in the package.json:

"homepage": ""

This can be picked up in the JavaScript code using the environment variable:


Serving Apps with Client-Side Routing

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.

This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html.

See: stackoverflow

We added the following to web.config on the Test Site and Live Site

<rule name="DataExplorerMagicUrlRule1" stopProcessing="true"><br/>
  <match url="^data-catalog-explorer/(?!static/)(.*)$" ignoreCase="true"/><br/>
  <action type="Rewrite" url="data-catalog-explorer/" appendQueryString="true" logRewrittenUrl="false" /><br/>

See: regex101

You can’t perform that action at this time.