⚠️ This repo is not in active use anymore. TRASE Frontend code has been merged with the API repo ⚠️

TRASE

Source code for the TRASE front end.

About TRASE

Trase brings unprecedented transparency to commodity supply chains revealing new pathways towards achieving a deforestation-free economy.

About this project

This project consists of only the frontend application for the TRASE website. All data displayed is loaded through requests to the TRASE API.

This project mainly uses D3 and Leaflet, plus Redux for managing app state. More on the stack here

Besides the frontend code, the project also includes a standalone nodejs web server, which should be used only for development purposes

Lexicon

+-------+             +-------+
|       |             |       |
|       |             |       |
+-------+ ---\        |       |
| node  |     \-------+-------+
+-------+--\  link    | node  |
|       |   \         |       |
|       |    \--------+-------+
|       |             |       |   
+-------+             +-------+
  column                column

Configuration

The project's main configuration values can be set using environment variables

PORT: port used by the development web server. defaults to 8081
NODE_ENV: environment used by the nodejs tasks
AUTH_USER + AUTH_PASSWORD: if set, an auth wall is used by the nodejs development web server
API_V1_URL: URL of the data API V1
API_V2_URL: URL of the data API V2
API_CMS_URL: URL of the homepage stories API
API_STORY_CONTENT: URL of the deep dive stories API
API_SOCIAL: URL of the tweets API
GOOGLE_ANALYTICS_KEY: API key for Google Analytics
DATA_FORM_ENABLED: enable contact form in Data page
DATA_FORM_ENDPOINT: end point to send form values in Data page

If you are using the included development server, you can set those variables in the .env file (use the included .env.sample as an example)

Development set up

Check out the code from github
Install dependencies:
```
npm i
```
Start the development server:
```
npm run dev
```
http://localhost:8081/

generate vector map layers

Vector layers are generated with one of the two workflows:

CARTO (remote DB) -> geoJSON -> topoJSON
local shapefiles -> geoJSON -> topoJSON

All can be generated by running:

./gis/getVectorMaps.sh

All dependencies should be installed by npm install, except ogr2ogr (used for shapefile conversion), which you have to install globally with GDAL.

Generate municipalities by state TopoJSON files (only for Brazil for now) by running:

./gis/vector_maps/get_brazil_municip_states.js

generate CARTO named maps (context layers)

Copy CARTO credentials:

cp cp ./gis/cartodb/cartodb-config.sample.json ./gis/cartodb/cartodb-config.json

Replace api_key value in cartodb-config.json
To update or instantiate context layers run
```
./gis/getContextMaps.sh
```
This will use the layers configuration stored in ./gis/cartodb/templates.json

Production

Run npm run build, it will create a production-ready version of the project in /dist.

Deployment

Depending on the environment where you want to deploy, you need to have a .env.staging or a .env.production file set up.

Then run

npm run deploy:staging

npm run deploy:production

This will build using appropriate env file and upload to server usinc scp.

LICENSE

MIT

Vizzuality / TRASE-frontend

readme