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:

make check

Testing

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

make test

Run project

To start a development server:

make run

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:

make docker-build

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

ENV VARIABLE	DEFAULT	REQUIRED	DESCRIPTION
SERVER_API_HOST	http://0.0.0.0	No	Backend API host to connect
SERVER_API_PORT	8080	No	Backend API port to connect

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.