Merge pull request #111 from LuCEresearchlab/deployment-fixes

Deployment fixes

Author: malags

README.md

@@ -14,16 +14,21 @@ this will allow for a more scalable tagging experience.
 - mongodb: Dockerfile for MongoDB server
 - tagging service: Python Flask server
 
-
 ## Usage
+
 The application is entirely dockerized and as such can be run as long as Docker is installed, to run it:
+
 ```
 cd python-react-tagging-standalone
 docker-compose up -d                               # development
 docker-compose -f docker-compose-deploy.yml up -d  # deployment
 ```
+
 then connect to http://localhost:8080/
 
+In the case of deploying the application it is required to set
+`TAGGING_SERVICE_URL=<host-url>:5000` inside the file `frontend/.env.prod`.
+
 To stop the containers
 
 ```

frontend/.dockerignore

@@ -1 +1,3 @@
 **/node_modules
+build
+logs

frontend/.env

@@ -1,2 +1 @@
 NODE_PATH=./
-TAGGING_SERVICE_URL=http://localhost:5000

frontend/.env.prod

@@ -0,0 +1 @@
+TAGGING_SERVICE_URL=http://192.168.1.169:5000

frontend/Dockerfile-deploy

@@ -1,4 +1,4 @@
-FROM node:15.14.0-alpine3.10
+FROM node:15.14.0-alpine3.10 as build
 
 EXPOSE 8080
 
@@ -10,4 +10,19 @@ RUN npm ci
 
 RUN npm run build
 
-CMD ["node", "server.js"]
+FROM nginx:alpine
+
+# copy the build folder from react to the root of nginx (www)
+COPY --from=build /app/build /usr/share/nginx/html
+
+# --------- only for those using react router ----------
+# if you are using react router
+# you need to overwrite the default nginx configurations
+# remove default nginx configuration file
+RUN rm /etc/nginx/conf.d/default.conf
+# replace with custom one
+COPY nginx/nginx.conf /etc/nginx/conf.d
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/config.json

@@ -0,0 +1,17 @@
+server {
+
+listen 8080;
+
+location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+
+error_page   500 502 503 504  /50x.html;
+
+location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}

frontend/nginx/nginx.conf

@@ -44,6 +44,7 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
+    "dotenv": "^9.0.0",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-jest": "^24.1.3",

frontend/package-lock.json

@@ -7,7 +7,7 @@ import stringEquals from "../../util/StringEquals";
 import {useFetch} from "../../hooks/useFetch";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     dataset_id: string,

frontend/package.json

@@ -22,7 +22,7 @@ import NoMisconception from "../../util/NoMisconception";
 import {FormatColorReset} from "@material-ui/icons";
 import {highlightRangeToColor, highlightStyle} from "../../helpers/Util";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({

frontend/server.js

@@ -24,7 +24,7 @@ import ClusterHandler from "./cluster_handler_component/ClusterHandler";
 import withKeyboard from "../../hooks/withKeyboard";
 import {useFetch} from "../../hooks/useFetch";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     taggingSession: TaggingSession,

frontend/src/components/diff_component/AnswersMerger.tsx

@@ -21,7 +21,7 @@ import {setClusters} from "../../../model/TaggingClusterSessionDispatch";
 import {Clear, Search} from "@material-ui/icons";
 import DroppableCluster from "./DroppableCluster";
 
-const {TAGGING_SERVICE_URL} = require('../../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     taggingSession: TaggingSession,

frontend/src/components/tagger_component/MisconceptionTagElement.tsx

@@ -30,7 +30,7 @@ import withKeyboard from "../../../hooks/withKeyboard";
 import stringEquals from "../../../util/StringEquals";
 import {postClusters} from "../../../helpers/PostHelper";
 
-const {TAGGING_SERVICE_URL} = require('../../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     taggingClusterSession: TaggingClusterSession,

frontend/src/components/v2/TaggingUI.tsx

@@ -1,4 +1,4 @@
-const {TAGGING_SERVICE_URL} = require('../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 const download_url = TAGGING_SERVICE_URL + '/datasets/download/dataset/'
 
 // https://www.codevoila.com/post/30/export-json-data-to-downloadable-file-using-javascript

frontend/src/components/v2/cluster_handler_component/ClusterHandler.tsx

@@ -2,7 +2,7 @@ import {HighlightRange} from "../interfaces/HighlightRange";
 import {Cluster} from "../interfaces/Dataset";
 
 
-const {TAGGING_SERVICE_URL} = require('../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 const post_answer_url = TAGGING_SERVICE_URL + '/datasets/tagged-answer'
 

frontend/src/components/v2/tagger_component/ClusterView.tsx

@@ -5,7 +5,7 @@ import {User, userContext} from "../../util/UserContext";
 import {FiberManualRecord} from "@material-ui/icons";
 import {useHistory} from "react-router-dom";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     setSession(session: User): void

frontend/src/helpers/DownloadHelper.tsx

@@ -9,7 +9,7 @@ import {DatasetDesc} from "../../interfaces/Dataset";
 import {userContext} from "../../util/UserContext";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 
 const redirect = (id: string, url: string, user_id: string, router: any) => {

frontend/src/helpers/PostHelper.ts

@@ -9,7 +9,7 @@ import {MisconceptionElement} from "../../interfaces/MisconceptionElement";
 import {useFetch} from "../../hooks/useFetch";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 
 const useStyles = makeStyles(() =>

frontend/src/pages/auth/Login.tsx

@@ -8,7 +8,7 @@ import {StyledTableCell, StyledTableRow, useStyles} from "../../components/style
 // @ts-ignore
 import Highlightable from "highlightable";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 function TaggingDetailPage() {
 

frontend/src/pages/tagging/DatasetSelection.tsx

@@ -8,7 +8,7 @@ import useTaggingClusterSession from "../../model/TaggingClusterSession";
 import {userContext} from "../../util/UserContext";
 import {useFetch} from "../../hooks/useFetch";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 function TaggingPage() {
 

frontend/src/pages/tagging/DiffView.tsx

@@ -6,7 +6,7 @@ import {Paper, Table, TableBody, TableContainer, TableHead, TableRow} from "@mat
 import {StyledTableCell, StyledTableRow, useStyles} from "../../components/styled/StyledTable";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Stats {
     count: number,

frontend/src/pages/tagging/TaggingDetailPage.tsx

@@ -3,7 +3,7 @@ import {makeStyles, createStyles, Theme} from '@material-ui/core/styles';
 import React, {useState} from 'react';
 
 
-const TAGGING_SERVICE_URL = require('../../../config.json').TAGGING_SERVICE_URL
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({

frontend/src/pages/tagging/TaggingPage.tsx

@@ -4,6 +4,8 @@ import HtmlWebpackPlugin from "html-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ESLintPlugin from "eslint-webpack-plugin";
 
+require('dotenv').config();
+
 const config: webpack.Configuration = {
   mode: "development",
   output: {
@@ -43,6 +45,9 @@ const config: webpack.Configuration = {
     new ESLintPlugin({
       extensions: ["js", "jsx", "ts", "tsx"],
     }),
+    new webpack.DefinePlugin({
+      'process.env.TAGGING_SERVICE_URL': 'http://localhost:5000'
+    }),
   ],
   devtool: "inline-source-map",
   devServer: {

frontend/src/pages/tagging/TaggingSummaryPage.tsx

@@ -3,7 +3,11 @@ import webpack from "webpack";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import ESLintPlugin from "eslint-webpack-plugin";
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import {CleanWebpackPlugin} from "clean-webpack-plugin";
+
+require('dotenv').config({
+  path: path.join(__dirname, '.env.prod')
+});
 
 const config: webpack.Configuration = {
   mode: "production",
@@ -45,6 +49,9 @@ const config: webpack.Configuration = {
       extensions: ["js", "jsx", "ts", "tsx"],
     }),
     new CleanWebpackPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.TAGGING_SERVICE_URL': JSON.stringify(process.env.TAGGING_SERVICE_URL)
+    }),
   ],
 };
 

frontend/src/pages/upload/FileUploader.tsx

@@ -14,7 +14,7 @@ def create_app(test_config=None):
     api.init_app(app)
     cache.init_app(app)
     app.config.from_pyfile('./config/env_config.py')
-    CORS(app, resources={r'/*': {"origins": "http://localhost:8080"}})
+    CORS(app, resources={r'/*': {"origins": "*"}})
 
     @app.errorhandler(Error)
     def handle_invalid_usage(error):