GitHub - dialect-map/dialect-map-ui: Public web interface ⚛️ (original) (raw)

Dialect map UI

This repository contains the front-end interface of the Dialect map project. An idea proposed by professor Kyle Cranmer, and initially developed as one of the Data Science and Software Services (DS3) funded projects.

About

This project provides a web interface for the Dialect Map project, taking the interface of the PaperScape project as inspiration, but modernizing and standardizing the whole stack. This web client uses:

• React ⚛️
• Leaflet 🗺️
• Semantic 🎨

Environment setup

All dependencies can be installed by running:

npm install npm install --global serve

Formatting

All JavaScript files are formatted using Prettier, and the custom properties defined in the .prettierrc.json file. To check for code style inconsistencies:

Testing

Project testing is performed using Jest. In order to run the tests:

Run project

To start a development server:

Docker

The project is currently designed to be deployed in a Google Cloud Platform project, so the initial step involves using gcloud CLI tool to log into it:

gcloud login gcloud auth configure-docker

To build a Docker image out of the project:

To push a Docker image to the GCP registry:

export GCP_PROJECT="ds3-dialect-map" export GCP_REGISTRY="us.gcr.io" make docker-push

Deployment

This project uses a set of env. variables to configure the connection with the backend API:

Bear in mind that React does not allow passing run-time env. variables to a built application (reference). In order to do so, a dedicated shell script named parse-env.sh was created. This script parses the .env file substituting the default values by the ones defined in the environment, before writing them into a run-time generated JavaScript file (loaded from the index.html).

Acknowledges

We would like to thank the PaperScape authors for maintaining an up-to-date tiles server, and specially Rob J. Knegjens for being in contact with us during the development of this project.