Setting up proxy middleware

frontend/package.json

@@ -11,11 +11,19 @@
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4",
     "axios": "^0.21.4",
+    "antd": "^3.26.5",
+    "prop-types": "^15.7.2",
     "bootstrap": "^5.1.1",
     "react-bootstrap-validation": "^0.1.11",
     "react-router-dom": "^5.3.0",
+    "react-redux": "^7.1.3",
     "react-select": "^5.0.0",
-    "react-validation": "^3.0.7"
+    "react-speech-recognition": "^3.9.0",
+    "react-validation": "^3.0.7",
+    "redux": "^4.0.5",
+    "redux-promise": "^0.6.0",
+    "redux-thunk": "^2.3.0",
+    "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -40,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "http-proxy-middleware": "^0.19.1"
   }
 }

frontend/src/digitalHuman/digitalHuman.js

+import React, { useState, useEffect } from 'react';
+import Axios from 'axios';
+import { useDispatch, useSelector } from 'react-redux';
+import { List, Icon, Avatar } from 'antd';
+
+function DigitalHuman() {
+    return (
+        <div className='chat' >
+            Hi
+        </div>
+    )
+}
+
+export default DigitalHuman;
\ No newline at end of file

frontend/src/index.js

@@ -2,13 +2,26 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+
+import "antd/dist/antd.css";
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import promiseMiddleware from 'redux-promise';
+import ReduxThunk from 'redux-thunk';
+import { BrowserRouter } from "react-router-dom";
+
+const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <Provider
+    store={createStoreWithMiddleware(
+     
+      window.__REDUX_DEVTOOLS_EXTENSION__ &&
+      window.__REDUX_DEVTOOLS_EXTENSION__()
+    )}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 );
-
-reportWebVitals();

frontend/src/proxySetup

+const proxy = require("http-proxy-middleware");
+
+module.exports = function(app) {
+
+    app.use(proxy("/api", { target: "http://localhost:8081/" }));
+
+};

frontend/src/routes/pageRoutes.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 //import pages
 import Home from "../main/home";
+import DigitalHuman from '../digitalHuman/digitalHuman';
 
 function PageRoutes() {
     return (
@@ -11,6 +12,7 @@ function PageRoutes() {
                 <section className="content">
                     <Switch>
                         <Route path="/" component={Home} exact/>
+                        <Route path="/digital-human" component={DigitalHuman}/>
                     </Switch>
                 </section>
             </Router>