Client side main (#288)

* added map navigation controls

* swap in client side rendered version of woeip frontend

* temporarily disable web docker container

* navigation control

* docker ignore

* development docker environment

* half thoughts on docker environments

* half thought

* partial solution

* hot reloading dev server

* update react scripts version

* mapbox hack

* ignore env file

* remove env

* example env file

* use env variables for token and domain

* loader loads on initial load

* add notes to map. make collection urls more robust

* fallback when there are no pollutants

* workflow notes

* turn off canceling once saving starts

* remove excess console log

* doc and test api urls util

* update bar

* clean up drop utils

* finish tests for drop react component

* labels on form, type of serial, test structure of upload confirm

Co-authored-by: Kabirdas Henry <[email protected]>

.example.env

@@ -0,0 +1,8 @@
+DEFAULT_EMAIL=
+SECRET_KEY=
+POSTGRES_USER=
+POSTGRES_PASSWORD=
+API_PORT=
+API_DOMAIN=
+WEB_PORT=80
+WEB_DOMAIN=

.github/deployment.md

@@ -0,0 +1,49 @@
+# Hosting
+
+## Local
+A configuration suitable for development
+
+- All data served on the local machine
+- Files saved using Django's file manager
+- React uses development build
+- Routes traffic only within the local machine
+
+Steps:
+1. docker-compose up --build
+
+## Livewire
+A basic configuration to allow user to interact with a live site
+- All data served on an Amazon EC2 machine
+- Files saved using Django's file manager
+- React uses production build
+- Routes traffic from outside the machine
+
+Steps
+1. docker-compose -f docker-compose.yml -f docker-compose.livewire.yml up --build
+
+## WIP: Development
+A basic configuration to allow experimental changes to be hosted and testing remotely.
+
+## WIP: Staging
+An exact replication of the production configuration.
+Exists pending budget allocation.
+
+## WIP: Production
+A scalable configuration
+- Data spread among several machines
+  - Files saved on S3
+  - Database served using Aurora 
+  - NGINX Server, API, and Site hosted on EC2 machine
+- React uses production build
+- Designed to handle multiple external users simultaneously
+
+# Workflow for changing and deploying WOAQ
+1. Request write access to the GitHub repository
+2. Install Docker & Docker-Compose
+   - Mac and WSL2 users should install Docker Desktop, which includes Docker-Compose
+3. Checkout out a local branch
+4. Run a local instance of WOAQ
+5. Push the local changes to the repo 
+6. Make a pull request against the `develop` branch
+7. Once changes have accumulated and stablized on `develop`, there will be a PR to place cumulative changes onto `livewire`
+8. Once on `livewire`, the changes will be available for live use.

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-.mypy_cache/
+.mypy_cache/
+/.env

docker-compose.ci.yml

@@ -1,3 +1,6 @@
+# CI Environment
+# Not properly configured
+
 version: '3.3'
 
 services:

docker-compose.livewire.yml

@@ -0,0 +1,88 @@
+# Live environment with all services cenralized to one machine
+
+version: '3.3'
+
+services:
+  api:
+    build:
+      args:
+        - PYTHON_ENV=prod
+    ports:
+      - ${API_PORT}
+    environment:
+      SECRET_KEY: ${SECRET_KEY}
+      DATABASE_URL: postgis://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/woaq
+      DEFAULT_FILE_STORAGE: django.core.files.storage.FileSystemStorage
+      LETSENCRYPT_HOST: ${API_DOMAIN}
+      VIRTUAL_HOST: ${API_DOMAIN}
+      VIRTUAL_PORT: ${API_PORT}
+    volumes:
+      - ./api:/usr/src/app
+      - logs:/usr/src/app/logs
+      - static:/usr/src/app/public/static
+    depends_on:
+      - db
+    restart: always
+    stdin_open: true
+    tty: true
+  web:
+    build:
+      dockerfile: Dockerfile.prod
+    ports:
+      - ${WEB_PORT}
+      - 3000:80
+    environment: 
+      LETSENCRYPT_HOST: ${WEB_DOMAIN}
+      VIRTUAL_HOST: ${WEB_DOMAIN}
+      VIRTUAL_PORT: ${WEB_PORT}
+      API_DOMAIN: ${API_DOMAIN}
+  db:
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: woaq
+    volumes:
+      - postgres:/var/lib/postgresql/data
+    ports:
+      - 5432
+    restart: always
+
+  proxy:
+    build:
+      args:
+        - API_DOMAIN=${API_DOMAIN}
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - 'html:/usr/share/nginx/html'
+      - "dhparam:/etc/nginx/dhparam"
+      - 'vhost:/etc/nginx/vhost.d'
+      - 'certs:/etc/nginx/certs'
+      - '/var/run/docker.sock:/tmp/docker.sock:ro'
+      - static:/var/www/html/static/
+
+  ssl:
+    image: jrcs/letsencrypt-nginx-proxy-companion
+    volumes:
+      - 'html:/usr/share/nginx/html'
+      - "dhparam:/etc/nginx/dhparam"
+      - 'vhost:/etc/nginx/vhost.d'
+      - 'certs:/etc/nginx/certs'
+      - "/run/docker.sock:/var/run/docker.sock:ro"
+    environment:
+      NGINX_PROXY_CONTAINER: "woaq-proxy"
+      DEFAULT_EMAIL: ${DEFAULT_EMAIL}
+    restart: always
+    depends_on: 
+      - "proxy"
+
+
+volumes:
+  logs:
+  postgres:
+  static:
+  certs:
+  html:
+  vhost:
+  dhparam:

docker-compose.override.yml

@@ -1,3 +1,4 @@
+# Development Environment
 version: '3.3'
 
 services:
@@ -27,17 +28,17 @@ services:
     tty: true
 
   web:
+    build:
+      dockerfile: Dockerfile
     environment:
-      NODE_ENV: development
       VIRTUAL_HOST: lvh.me
       VIRTUAL_PORT: 3000
+      CHOKIDAR_USEPOLLING: 'true'
     ports:
-      - 3000
-      - 3001:3001
+      - 3000:3000
     volumes:
-      - ./web:/usr/src/app
-      - /usr/src/app/node_modules/
-      - /usr/src/app/build/
+      - ./web:/usr/src/app:rw
+      - '/usr/src/app/node_modules'
 
   db:
     environment:

docker-compose.prod.yml

@@ -1,3 +1,6 @@
+# Based on AWS providing separate DB and S3 services
+# Also configured before switching from Server to Client side web rendering
+
 version: '3.3'
 
 services:

nginx-proxy/Dockerfile

@@ -1,4 +1,4 @@
 FROM jwilder/nginx-proxy
 ARG API_DOMAIN
 COPY cors.conf /etc/nginx/vhost.d/$API_DOMAIN
-COPY api_static_assets_routing /etc/nginx/vhost.d/${API_DOMAIN}_location
+COPY api_static_assets_routing /etc/nginx/vhost.d/${API_DOMAIN}_location

web/.dockerignore

@@ -1,11 +1,12 @@
-.dockerignore
-.env
-.env.example
+.git/
 .gitignore
+.cache
+*.md
+!README.md
+
+dist/
+node_modules/
 build
-coverage
+.dockerignore
 Dockerfile
-Dockerfile.ci
-env
-htmlcov
-node_modules
+Dockerfile.prod

web/.env.development

@@ -0,0 +1,3 @@
+REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoibHVrZWh0cmF2aXMiLCJhIjoiY2p2djlmY2sxM3pzcDQzb2p3MXN3aGl2aSJ9.6b2Kp7pfaV-cNiwtYRhRZw
+REACT_APP_API_DOMAIN=api.lvh.me
+REACT_APP_PROTOCOL=http

web/.env.production

@@ -0,0 +1,3 @@
+REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoibHVrZWh0cmF2aXMiLCJhIjoiY2p2djlmY2sxM3pzcDQzb2p3MXN3aGl2aSJ9.6b2Kp7pfaV-cNiwtYRhRZw
+REACT_APP_API_DOMAIN=api.lvh.me
+REACT_APP_PROTOCOL=http

web/.gitignore

@@ -1,16 +1,23 @@
-logs
-*.log
-!src/components/Upload/test-data/*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-npm-debug.log*
-.DS_Store
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
 
-coverage
-node_modules
-build
-public/static
-.env
+# misc
+.DS_Store
 .env.local
 .env.development.local
 .env.test.local
-.env.production.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

web/.prettierignore

@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

web/.prettierrc.json

@@ -0,0 +1 @@
+{}

web/Dockerfile

@@ -1,10 +1,19 @@
-FROM node:12.6.0-alpine
+FROM node:14-alpine
 
+# set working directory
 WORKDIR /usr/src/app
 
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH usr/src/app/node_modules/.bin:$PATH
 
-COPY package.json package-lock.json ./
-RUN npm ci
+# install app dependencies
+COPY package*.json ./
+RUN npm i
+RUN npm i [email protected] -g
 
-ENTRYPOINT ["npm", "start"]
+# add app
+COPY . .
+
+EXPOSE 3000
+# start app
+CMD ["npm", "start"]