Asset Map Developer Guide

Asset Map Developer Guide

Purpose

Design

Database Design

API Design

API Implementation and Endpoints

Frontend Design

• Figma Link for Asset Map Mockup

Tech Stack and Dependencies

• Backend
  • Database: AWS RDS
  • API
    • Option 1: AWS API Gateway + AWS Lambda
    • Option 2: ACF Pro + Custom Post Types
• Frontend
  • React with Typescript
  • D3: Data-Driven Documents

Getting Started

Note: development of the asset map is currently limited to Mac and Linux machines. Windows development is unsupported and there are currently no plans to fix this limitation. This is because of the sed command located in the package.json file. A manual change can be made in place of the sed command for builds on Windows to succeed.

Prerequisites

1. Local installation of Wordpress
2. Clone of climatehub repo inside Wordpress themes folder
3. Yarn package manager. Yarn recommended over npm for increased performance
   1. Node version: 10.9.0
   2. Npm version: 6.4.1
   3. Yarn version: 1.0.1

Installation

1. Go to the climatehub/assetmap folder and run yarn to install all dependencies
2. Change files in the assetmap/src folder

Run Asset Map...

Standalone

1. Go to the climatehub/assetmap folder
2. Run yarn start
3. Go to localhost:3000

Inside Wordpress

1. Go to the climatehub/assetmap folder
2. Run yarn build
3. Login to Wordpress dashboard on local installation
4. Create a new page called Asset Map with slug asset-map
5. Go to Asset Map page on Wordpress site

Important Notes

• All the build files created from running yarn build, are located inside climatehub/assetmap/build. The wordpress template climatehub/page-asset-map.php uses a hard-coded path to get the build files. This may or may not need to change when we deploy the asset map.
• DO NOT add any custom css inside of the assetmap folder. If any custom css is needed, add it inside climatehub/assets/css/climatehub.css. Both yarn start and yarn build pick up the css from the climatehub/assets/css/ folder. Bootstrap 4 is already included in this folder, so Bootstrap classes can be used without any additional configuration.