This project was bootstrapped with Create React App.
Run npm install the first time to fetch and install dependencies.
Run npm start to run the app in development mode. More info in the Available Scripts section.
When ready to deploy, run npm run build to compile/bundle the app.
public/- Contains a few static assets, including theindex.htmltemplate. We may never need to touch this directory again, except maybe to add afavicon.ico. More infosrc/- Contains our app codeapi/- Modules to handle API requestscomponents/- Components to be reused across multiple viewsviews/- Our "views". These are the "page" components that render when the user selects a different page in the header nav.
There are no third-party state management libraries in use at this time. This project is small enough to use React's built-in state management.
This project uses PatternFly for UI components.
PatternFly an opinionated UI framework and design guidelines.
(This may seem somewhat familiar to anyone who has used Material-UI components with Google's Material Design guidelines.)
The PatternFly React library gives us components for nearly everything. For example, there is even a <Text> component just for placing text onto a page (which is required for "heading" elements [e.g. <h1>] to display properly). While working on this project, you may find it useful to reference the PatternFly documentation quite often at first.
Local component CSS goes in CSS Modules. This is a simple solution that gives us "locally-scoped" CSS, so there's no need for other methods, such as BEM.
This project has SASS installed, so feel free to use it when convenient.
For this project (or any project that uses PatternFly), it is best to use PatternFly's global CSS variables whenever possible. This helps to maintain a cohesive and consistent UI (colors, fonts, spacing, transitions, etc.) and UX.
For example, you might add a background and border to a component like this:
/* MyComponent.module.css */
.myComponent {
background-color: var(--pf-global--BackgroundColor--100);
border-width: var(--pf-global--BorderWidth--md);
border-style: solid;
border-color: var(--pf-global--BorderColor--100);
}We mostly follow the Airbnb JavaScript Style Guide, with some modifications.
The style is enforced using ESLint, so it is highly recommended to use an ESLint plugin with your editor.
ESLint rules can be found in .eslintrc.js.
ESLint helps maintain consistent styles and best practices. This plugin is recommended because it helps to enforce our styles and can prevent unsafe code.
Our ESLint configuration can be found in .eslintrc.js.
EditorConfig automatically applies formatting settings found in .editorconfig.
Although this project is not written in TypeScript, many third part libraries (including PatternFly) provide TypeScript type definitions.
Installing the TypeScript extension into your editor makes your editor "type-aware". This is great for things like autocompletion/IntelliSense and, depending on your settings, design-time safety checks.
You may notice some TypeScript syntax inside JSDoc annotations in this project.
Note: If using Visual Studio Code (open source, runs everywhere), the TypeScript extension is already included and enabled by default.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make edits.
You will also see some lint errors in the console. The lint errors in the console are from a minimal set of ESLint rules included with create-react-app. They do not include our custom configuration. It is recommended to use an ESLint plugin in your editor.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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.
See CONTRIBUTING
Service layer: https://github.com/CrunchyData/spatial-suite-rest-demo
http://spatialwebdemo-scfire.openshift-gis-apps.gce-containers.crunchydata.com/
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
The current version of this demo is hosted in OpenShift 3.11. It is a fictious app designed to simulate a Fire Hazard Management UI. It uses publically avaialbe data from the Santa Cruz, CA County GIS website. It uses pg_tileserv to generate vector tiles from the parcel data and pg_featureserv to update the dataset and do a distance query.
To add the basemap, pg_tileserv and pg_featureserv to the UI, you can set the environment variables
- REACT_APP_BASE_MAP
- REACT_APP_PG_TS
- REACT_APP_PG_FS