feat: dockerize app

.gitignore

@@ -0,0 +1 @@
+*.pyc

ReactTool/backend/.dockerignore

@@ -0,0 +1,4 @@
+__pycache__
+*.pyc
+.dockerignore
+Dockerfile

ReactTool/backend/Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY Pipfile Pipfile.lock ./
+
+RUN pip install pipenv && \
+    pipenv install --system --deploy && \
+    pip install flask-cors
+
+# Create necessary directories for data storage
+RUN mkdir -p /app/surveys/quiz
+
+COPY . .
+
+EXPOSE 5000
+CMD ["flask", "run", "--host=0.0.0.0"]

ReactTool/backend/app.py

@@ -13,11 +13,13 @@ import secrets
 import pandas as pd
 import db_conf
 from flask import send_file
+from flask_cors import CORS
 #from flask_mail import Mail, Message
 #import firebase_admin
 #from firebase_admin import credentials, firestore, initialize_app, firebase
 
 app = Flask(__name__, static_folder='../frontend/build', static_url_path='/')
+CORS(app)  # Add this line
 app.config['MYSQL_DATABASE_HOST'] = db_conf.host
 app.config['MYSQL_DATABASE_USER'] = db_conf.user
 app.config['MYSQL_DATABASE_PASSWORD'] = db_conf.password

ReactTool/frontend/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+build
+.dockerignore
+Dockerfile

ReactTool/frontend/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.pyc

ReactTool/frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:16
+
+WORKDIR /app
+COPY package*.json ./
+COPY yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+
+EXPOSE 3000
+CMD ["yarn", "start"]

ReactTool/frontend/package.json

@@ -59,5 +59,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000"
+  "proxy": "http://localhost:3000"
 }

ReactTool/frontend/src/pages/tutorial.js

@@ -31,7 +31,7 @@ class Tutorial extends Component {
 
     componentDidMount() {
 
-        fetch('./new_session_id', {
+        fetch('http://localhost:8000/new_session_id', {
             headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
             method: 'POST',
             body: JSON.stringify({

ReactTool/frontend/src/pages/visualization_quiz.js

@@ -178,7 +178,7 @@ class VisQuiz extends Component {
 
     on_survey_click() {
 
-        fetch('./record_responses_to_db', {
+        fetch('http://localhost:8000/record_responses_to_db', {
             headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
             method: 'POST',
             body: JSON.stringify({

docker-compose.yml

@@ -0,0 +1,36 @@
+version: '3.8'
+
+services:
+  frontend:
+    build: 
+      context: ./ReactTool/frontend
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./ReactTool/frontend:/app
+      - /app/node_modules
+    environment:
+      - REACT_APP_BACKEND_URL=http://localhost:8000
+    depends_on:
+      - backend
+    networks:
+      - app-network
+
+  backend:
+    build:
+      context: ./ReactTool/backend
+    ports:
+      - "8000:5000"
+    volumes:
+      - ./ReactTool/backend:/app
+      - ./data/surveys/quiz:/app/surveys/quiz
+    environment:
+      - FLASK_APP=app.py
+      - FLASK_ENV=development
+      - PYTHONUNBUFFERED=1
+    networks:
+      - app-network
+
+networks:
+  app-network:
+    driver: bridge

mini-vlat-tree.txt

@@ -0,0 +1,137 @@
+.
+├── README.md
+├── ReactTool
+│   ├── README.md
+│   ├── backend
+│   │   ├── Pipfile
+│   │   ├── Pipfile.lock
+│   │   ├── README.md
+│   │   ├── __pycache__
+│   │   │   ├── app.cpython-39.pyc
+│   │   │   └── db_conf.cpython-39.pyc
+│   │   ├── app.py
+│   │   ├── db_conf.py
+│   │   └── surveys
+│   │       └── quiz
+│   │           └── 9xdbxs46sp1p5X9yqSe_uQ.txt
+│   └── frontend
+│       ├── README.md
+│       ├── package-lock.json
+│       ├── package.json
+│       ├── public
+│       │   ├── favicon.ico
+│       │   ├── index.html
+│       │   ├── logo192.png
+│       │   ├── logo512.png
+│       │   ├── manifest.json
+│       │   └── robots.txt
+│       ├── src
+│       │   ├── App.css
+│       │   ├── App.js
+│       │   ├── App.test.js
+│       │   ├── components
+│       │   │   ├── areaChart-mini.js
+│       │   │   ├── barChart-mini.js
+│       │   │   ├── bubbleChart-mini.js
+│       │   │   ├── choropleth-mini.js
+│       │   │   ├── data
+│       │   │   │   ├── 100StackedBarGraph.csv
+│       │   │   │   ├── AreaChart-2.csv
+│       │   │   │   ├── AreaChart.csv
+│       │   │   │   ├── BarGraph.csv
+│       │   │   │   ├── BubbleChart.csv
+│       │   │   │   ├── Choropleth.csv
+│       │   │   │   ├── Histogram-3-2.csv
+│       │   │   │   ├── Histogram.csv
+│       │   │   │   ├── Images
+│       │   │   │   │   ├── 1.png
+│       │   │   │   │   ├── 10.png
+│       │   │   │   │   ├── 11.png
+│       │   │   │   │   ├── 12.png
+│       │   │   │   │   ├── 2.png
+│       │   │   │   │   ├── 3.png
+│       │   │   │   │   ├── 4.png
+│       │   │   │   │   ├── 5.png
+│       │   │   │   │   ├── 6.png
+│       │   │   │   │   ├── 7.png
+│       │   │   │   │   ├── 8.png
+│       │   │   │   │   ├── 9.png
+│       │   │   │   │   ├── RightAns.png
+│       │   │   │   │   ├── WrongAns.png
+│       │   │   │   │   └── skip.png
+│       │   │   │   ├── LineChart.csv
+│       │   │   │   ├── Mini-VLAT
+│       │   │   │   │   ├── AreaChart.png
+│       │   │   │   │   ├── BarChart.png
+│       │   │   │   │   ├── BubbleChart.png
+│       │   │   │   │   ├── Choropleth.png
+│       │   │   │   │   ├── Choropleth_New.png
+│       │   │   │   │   ├── Histogram.png
+│       │   │   │   │   ├── LineChart.png
+│       │   │   │   │   ├── PieChart.png
+│       │   │   │   │   ├── Scatterplot.png
+│       │   │   │   │   ├── Stacked100.png
+│       │   │   │   │   ├── StackedArea.png
+│       │   │   │   │   ├── StackedBar.png
+│       │   │   │   │   └── TreeMap.png
+│       │   │   │   ├── PieChart.csv
+│       │   │   │   ├── Scatterplot.csv
+│       │   │   │   ├── StackedArea.csv
+│       │   │   │   ├── StackedBarGraph.csv
+│       │   │   │   ├── Treemap.json
+│       │   │   │   ├── USA.json
+│       │   │   │   ├── VLAT-Pics
+│       │   │   │   │   ├── AreaChart.png
+│       │   │   │   │   ├── BarGraph.png
+│       │   │   │   │   ├── BubbleChart.png
+│       │   │   │   │   ├── Choropleth.png
+│       │   │   │   │   ├── Histogram.png
+│       │   │   │   │   ├── LineChart.png
+│       │   │   │   │   ├── Pie.png
+│       │   │   │   │   ├── Scatterplot.png
+│       │   │   │   │   ├── StackedArea.png
+│       │   │   │   │   ├── StackedBar.png
+│       │   │   │   │   ├── StackedBar100.png
+│       │   │   │   │   └── TreeMap.png
+│       │   │   │   ├── scatter-2.csv
+│       │   │   │   ├── scatter.csv
+│       │   │   │   └── us.json
+│       │   │   ├── histogram-mini.js
+│       │   │   ├── linechart-mini.js
+│       │   │   ├── pieChart-mini.js
+│       │   │   ├── quiz.js
+│       │   │   ├── scatterplot-mini.js
+│       │   │   ├── stacked100bar-mini.js
+│       │   │   ├── stackedArea-mini.js
+│       │   │   ├── stackedbar-mini.js
+│       │   │   └── treeMap-mini.js
+│       │   ├── index.css
+│       │   ├── index.js
+│       │   ├── logo.svg
+│       │   ├── pages
+│       │   │   ├── introduction.js
+│       │   │   ├── thank_you.js
+│       │   │   ├── tutorial.js
+│       │   │   └── visualization_quiz.js
+│       │   ├── reportWebVitals.js
+│       │   └── setupTests.js
+│       └── yarn.lock
+├── Test
+│   └── Mini-VLAT(QuestionsBank)_Updated.pdf
+├── VisImages
+│   ├── AreaChart.png
+│   ├── BarChart.png
+│   ├── BubbleChart.png
+│   ├── Choropleth.png
+│   ├── Choropleth_New.png
+│   ├── Histogram.png
+│   ├── LineChart.png
+│   ├── PieChart.png
+│   ├── Scatterplot.png
+│   ├── Stacked100.png
+│   ├── StackedArea.png
+│   ├── StackedBar.png
+│   └── TreeMap.png
+└── mini-vlat-tree.txt
+
+17 directories, 118 files