This is a template repository used to build a UI to render results fetched from the Junction & Parking Meters API built as part of the Solution Pattern here.

This repository is utilises Patternfly 4 for building the UI. It was generated from the on the Patternfly React Seed.

The following steps will launch a development server that serves the frontend on http://localhost:9000. This also includes endpoints to fetch meter and junction data using http://localhost:9000/meters and http://localhost:9000/junctions.

# ensure you have yarn installled globally
npm install yarn -g

# clone the project (if developing locally)
git clone https://github.com/evanshortiss/rhte-2019-hackathon-on-rhmi-template-ui

# navigate into the project directory
cd rhte-2019-hackathon-on-rhmi-ui

# create an environment variables file (.env)
# replace the stub Google Map API key in .env with a real one
cp .env.example .env

# create JSON files with to hold API data
# *you* will need to paste expected API responses in these
touch mock-api-server/api-data/junctions.json
touch mock-api-server/api-data/meters.json

# install dependencies
yarn

yarn build # build the project
yarn start # start the development server

Install development/build dependencies yarn

Start the development server yarn start:dev

Run a production build MAPS_API_KEY=$YOUR_GMAPS_API_KEY yarn build

Run the test suite yarn test

Run the linter yarn lint

Run the code formatter yarn format

Launch a tool to inspect the bundle size yarn bundle-profile:analyze

You can deploy this using the Node.js s2i builder. This will invoke the yarn build script, then use the server.js when running on OpenShift.

When performing a build the MAPS_API_KEY environment variable needs to set in the build container.

• TypeScript Config
• Webpack Config
• Jest Config
• Editor Config

• For accessibility compliance, we use react-axe
• To keep our bundle size in check, we use webpack-bundle-analyzer
• To keep our code formatting in check, we use prettier
• To keep our code logic and test coverage in check, we use jest