saferactive-eatlas ·

This is custom fork of Turing Geovisualization Engine or eAtlas for short. eAtlas is a geoplumber app with scripts to run either as backend only, frontend only or as a Docker image for production.

Being a custom fork, it means this source code does not follow the www.npmjs/eatlas release cycles though it does contribute back and forth with eAtlas. Though it is kept updated with the source code upstream.

Run locally

To run this repository:

Stap 1: Clone the repo and change directory into it

Step 2 In R:

1. Check if current directory is a geoplumber app:

library(geoplumber)
gp_is_wd_geoplumber()

## [1] TRUE

2. One must run the first build, that is if all Node.JS requirements of geoplumber is met:

gp_build()

3. You can then see the application:

# install latest from github
gp_plumb()

Visit http://localhost:8000 and you should see something like this (from clean clone):

Note: If the default browser tab opened and not loading, reload and it must work. That is an issue for package geoplumber to deal with.

Step 2 NodeJS: Just see the front-end as a CRA app:

1. Get the dependencies: npm i
2. Run the application: npm start

Currently the work in this repository is setup in several branches:

• master/main branch holds the main code minus minor changes needed for gh-pages deployment
• dev serves as a development branch but mainly staging for master
• gh-pages is the build output from .github/workflows/gh-pages.yml runner.
• gh-source holds any specific changes and prevent any broken changes remaining on master/dev before it gets to gh-pages.

Development

typical environment

1. Start background process by running: Rscript run.R which starts the backend at localhost:8000
2. Start front end separately by running: npm start

Then use localhost:3000 as you edit front end. You can use localhost:8000 if you like to see the API endpoints such as localhost:8000/api/stats19.

Front only

The front end is an npm package as stated above, so if you do not need the backend, having cloned the repo:

npm i # or yarn
# and run
npm start

<script type="text/javascript"> npm i # or yarn # and run npm start </script>

This is what you should see at localhost:3000: The frontend is a create-react-app (CRA) so all the standard commands of CRA appliees.

Full app

The application is a geopumber app. That means it is an R powered backend API (think Flask in Python) and a ReactJS front-end.

To build the frontend if never built before, from an R console:

remotes::install_github("atfutures/geoplumber")
library(geoplumber)
gp_build()

Then you can run

# install latest from github
library(geoplumber) 
gp_plumb()

notice we bind the default port of 8000 matches what is in Constants.js as production URL because we are using the build folder, you can now visit http://localhost:8000.

OR you could Rscript run.R which uses the same port and host values.

Pleasee note: * if you like to use Mapbox tiles, you can use a Mapbox API key in .env.local file using variable name: REACT_APP_MAPBOX_ACCESS_TOKEN = 'API_KEY'

• in production one must change the PRD_URL in the Constants.js file and use Docker.

Docker for production

There is a Dockerfile for production which we rely on. Before building, make sure you change the production URL in Constants.js. For example, currently that is https://map.saferactive.org. If you like to use it locally just make it same as the development URL or http://localhost:8000. You can now build the image and run it.

# Dockerfile manages your npm/React build steps
# REACT_APP_MAPBOX_ACCESS_TOKEN is required but app should run
docker build -t eatlas .
# note: here we bind internal 8000 to external (host machine)'s 8001.
# The reason for internal 8000 is in the Dockerfile we use 8000 as the plumber port. 
# It is your choice how you want to do this.
docker run -d -p 8000:8001 --name eatlas eatlas

Use your favourite document server (nginx for example) to proxy requests.