modify docker setup

client/Dockerfile

@@ -15,4 +15,8 @@ FROM nginx:stable-alpine
 WORKDIR /usr/share/nginx/html
 RUN rm -rf ./*
 COPY --from=builder /client/public /usr/share/nginx/html
+# Add your nginx.conf
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 ENTRYPOINT ["nginx", "-g", "daemon off;"]
+
+# docker build -t react-client .

client/nginx.conf

@@ -0,0 +1,15 @@
+server {
+  listen 80;
+  server_name localhost;
+
+  location / {
+    # Serve your React app
+    root /usr/share/nginx/html;
+    index index.html;
+  }
+
+  location /api {
+    # Proxy requests to the API service
+    proxy_pass http://api:3080/api;
+  }
+}

client/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.2",
     "@reduxjs/toolkit": "^1.9.2",
+    "axios": "^1.3.4",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",
     "crypto-browserify": "^3.12.0",
@@ -60,7 +61,6 @@
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-webpack-plugin": "^5.5.0",
     "path": "^0.12.7",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
@@ -76,4 +76,4 @@
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   }
-}
+}

client/src/components/Conversations/Conversation.jsx

@@ -23,8 +23,8 @@ export default function Conversation({
   const { modelMap } = useSelector((state) => state.models);
   const inputRef = useRef(null);
   const dispatch = useDispatch();
-  const { trigger } = manualSWR(`http://api:3080/messages/${id}`, 'get');
-  const rename = manualSWR(`http://api:3080/convos/update`, 'post');
+  const { trigger } = manualSWR(`http://localhost:3080/api/messages/${id}`, 'get');
+  const rename = manualSWR(`http://localhost:3080/api/convos/update`, 'post');
 
   const clickHandler = async () => {
     if (conversationId === id) {

client/src/components/Conversations/DeleteButton.jsx

@@ -9,7 +9,7 @@ import { setMessages } from '~/store/messageSlice';
 export default function DeleteButton({ conversationId, renaming, cancelHandler }) {
   const dispatch = useDispatch();
   const { trigger } = manualSWR(
-    `http://api:3080/convos/clear`,
+    `http://localhost:3080/api/convos/clear`,
     'post',
     () => {
       dispatch(setMessages([]));

client/src/components/Models/ModelDialog.jsx

@@ -23,7 +23,7 @@ export default function ModelDialog({ mutate, modelMap }) {
   const [saveText, setSaveText] = useState('Save');
   const [required, setRequired] = useState(false);
   const inputRef = useRef(null);
-  const updateCustomGpt = manualSWR(`http://api:3080/customGpts/`, 'post');
+  const updateCustomGpt = manualSWR(`http://localhost:3080/api/customGpts/`, 'post');
 
   const submitHandler = (e) => {
     if (chatGptLabel.length === 0) {

client/src/components/Models/ModelMenu.jsx

@@ -25,7 +25,7 @@ export default function ModelMenu() {
   const dispatch = useDispatch();
   const { model, customModel } = useSelector((state) => state.submit);
   const { models, modelMap, initial } = useSelector((state) => state.models);
-  const { trigger } = manualSWR(`http://api:3080/customGpts`, 'get', (res) => {
+  const { trigger } = manualSWR(`http://localhost:3080/api/customGpts`, 'get', (res) => {
     if (models.length + res.length === models.length) {
       return;
     }

client/src/components/Nav/ClearConvos.jsx

@@ -11,12 +11,12 @@ export default function ClearConvos() {
   const { mutate } = useSWRConfig()
 
   const { trigger } = manualSWR(
-    `http://api:3080/convos/clear`,
+    `http://localhost:3080/api/convos/clear`,
     'post',
     () => {
       dispatch(setMessages([]));
       dispatch(setConversation({ error: false, title: 'New chat', conversationId: null, parentMessageId: null }));
-      mutate(`http://api:3080/convos`);
+      mutate(`http://localhost:3080/api/convos`);
     }
   );
 

client/src/components/Nav/index.jsx

@@ -17,7 +17,7 @@ export default function Nav() {
   };
 
   const { data, isLoading, mutate } = swr(
-    `http://api:3080/convos?pageNumber=${pageNumber}`
+    `http://localhost:3080/api/convos?pageNumber=${pageNumber}`
   , onSuccess);
   const containerRef = useRef(null);
   const scrollPositionRef = useRef(null);

client/src/utils/handleSubmit.js

@@ -11,7 +11,7 @@ export default function handleSubmit({
   chatGptLabel,
   promptPrefix
 }) {
-  const endpoint = `http://api:3080/ask`;
+  const endpoint = `http://localhost:3080/api/ask`;
   let payload = { model, text, chatGptLabel, promptPrefix };
   if (convo.conversationId && convo.parentMessageId) {
     payload = {

client/webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-require('dotenv').config();
 // const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 /*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve.
@@ -10,7 +9,7 @@ module.exports = {
    * the environment - development, production, none. tells webpack
    * to use its built-in optimizations accordingly. default is production
    */
-  mode: process.env.NODE_ENV,
+  mode: 'development',
   /** "entry"
    * the entry point
    */