-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.Rmd
118 lines (85 loc) · 5.45 KB
/
README.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
---
output: github_document
---
# saferactive-eatlas · [](https://github.com/saferactive/saferactive-eatlas/actions/workflows/quick-R.yml) [](https://github.com/saferactive/saferactive-eatlas/actions/workflows/npm-test.yml) [](https://github.com/saferactive/saferactive-eatlas/actions/workflows/docker-image.yml) [](https://github.com/saferactive/saferactive-eatlas/actions/workflows/gh-pages.yml)
This is custom fork of Turing Geovisualization Engine or eAtlas for short. eAtlas is a [geoplumber](https://github.com/ATFutures/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:
```{r check}
library(geoplumber)
gp_is_wd_geoplumber()
```
2. One must run the first build, that is if all Node.JS requirements of `geoplumber` is met:
```{r, eval=FALSE}
gp_build()
```
3. You can then see the application:
```{r, eval=FALSE}
# install latest from github
gp_plumb()
```
Visit `http://localhost:8000` and you should see something like this (from clean clone):
<img alt="Screenshot 2020-07-22 at 17 22 59" src="https://user-images.githubusercontent.com/408568/88201918-03167c80-cc40-11ea-8f45-371963a92e19.png" width="100%" />
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.
Read on for more.
Step 2 NodeJS: Just see the front-end as a [CRA](https://create-react-app.dev) 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:
```{js}
npm i # or yarn
# and run
npm start
```
This is what you should see at `localhost:3000`:
<img src="https://user-images.githubusercontent.com/1825120/88171123-b9656c00-cc16-11ea-8aed-bdd56fa8d17e.png" width="100%" />
The frontend is a [`create-react-app`](https://create-react-app.dev/docs/getting-started/) (CRA) so all the standard commands of CRA appliees.
#### Full app
The application is a [geopumber](https://github.com/ATFutures/geoplumber) 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:
```{r, eval=FALSE}
remotes::install_github("atfutures/geoplumber")
library(geoplumber)
gp_build()
```
Then you can run
```{r, eval=FALSE}
# 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](https://github.com/saferactive/saferactive-eatlas/blob/262c695e91f90a62babb6743837f3df1de4fed80/src/Constants.js#L9) 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.
```{sh, eval= FALSE}
# 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.