modify docker setup

.gitignore

@@ -49,5 +49,7 @@ cache.json
 api/data/
 .eslintrc.js
 owner.yml
+archive
+.vscode
 
 src/style - official.css

.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-  "editor.lightbulb.enabled": false,
-  "editor.parameterHints.enabled": false,
-  "editor.renderWhitespace": "all",
-  // "editor.snippetSuggestions": "none",
-  "editor.tabSize": 2,
-  "editor.wordWrap": "on",
-  "emmet.showExpandedAbbreviation": "never",
-  "files.trimTrailingWhitespace": true,
-  "javascript.suggest.enabled": false,
-  "javascript.updateImportsOnFileMove.enabled": "never",
-  "javascript.validate.enable": true
-}

api/.env.example

@@ -0,0 +1,6 @@
+OPENAI_KEY=
+PORT=3080
+NODE_ENV=development
+MONGO_URI="mongodb://127.0.0.1:27017/chatgpt-client"
+CHATGPT_TOKEN=""
+BING_TOKEN=""

api/DockerFile

@@ -10,3 +10,5 @@ COPY . /api/
 EXPOSE 3080
 # Run the app when the container launches
 CMD ["npm", "start"]
+
+# docker build -t node-api .

api/server/index.js

@@ -17,11 +17,11 @@ app.get('/', function (req, res) {
   res.sendFile(path.join(projectPath, 'public', 'index.html'));
 });
 
-app.use('/ask', routes.ask);
-app.use('/messages', routes.messages);
-app.use('/convos', routes.convos);
-app.use('/customGpts', routes.customGpts);
-app.use('/prompts', routes.prompts);
+app.use('/api/ask', routes.ask);
+app.use('/api/messages', routes.messages);
+app.use('/api/convos', routes.convos);
+app.use('/api/customGpts', routes.customGpts);
+app.use('/api/prompts', routes.prompts);
 
 app.listen(port, () => {
   console.log(`Server listening at http://localhost:${port}`);

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",

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
    */

docker-compose.yml

@@ -2,7 +2,7 @@ version: "2"
 
 services:
     client:
-        image: react-app
+        image: react-client
         restart: always
         ports:
             - "3050:80"

package.json

@@ -1,93 +0,0 @@
-{
-  "name": "chatgpt-clone",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server .",
-    "build": "Webpack .",
-    "server": "npx node api/server/index.js",
-    "build-dev": "Webpack . --watch",
-    "server-dev": "npx nodemon api/server/index.js",
-    "test": "test"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/danny-avila/chatgpt-clone.git"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/danny-avila/chatgpt-clone/issues"
-  },
-  "homepage": "https://github.com/danny-avila/chatgpt-clone#readme",
-  "dependencies": {
-    "@keyv/mongo": "^2.1.8",
-    "@radix-ui/react-alert-dialog": "^1.0.2",
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-dropdown-menu": "^2.0.2",
-    "@radix-ui/react-label": "^2.0.0",
-    "@radix-ui/react-tabs": "^1.0.2",
-    "@reduxjs/toolkit": "^1.9.2",
-    "@vscode/vscode-languagedetection": "^1.0.22",
-    "@waylaidwanderer/chatgpt-api": "^1.15.1",
-    "class-variance-authority": "^0.4.0",
-    "clsx": "^1.2.1",
-    "cors": "^2.8.5",
-    "crypto-browserify": "^3.12.0",
-    "dotenv": "^16.0.3",
-    "highlight.js": "^11.7.0",
-    "keyv": "^4.5.2",
-    "keyv-file": "^0.2.0",
-    "lucide-react": "^0.113.0",
-    "markdown-to-jsx": "^7.1.9",
-    "mongoose": "^6.9.0",
-    "openai": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
-    "react-textarea-autosize": "^8.4.0",
-    "react-transition-group": "^4.4.5",
-    "swr": "^2.0.3",
-    "tailwind-merge": "^1.9.1",
-    "tailwindcss-animate": "^1.0.5",
-    "url": "^0.11.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/runtime": "^7.20.13",
-    "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-root-import": "^6.6.0",
-    "babel-preset-react": "^6.24.1",
-    "css-loader": "^6.7.3",
-    "eslint": "^8.33.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.6.0",
-    "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",
-    "nodemon": "^2.0.20",
-    "path": "^0.12.7",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
-    "postcss-preset-env": "^8.0.1",
-    "prettier": "^2.8.3",
-    "prettier-plugin-tailwindcss": "^0.2.2",
-    "source-map-loader": "^1.1.3",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.2.6",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
-  }
-}