Dockerize multi stage

.dockerignore

@@ -4,125 +4,125 @@
 
 ### Node ###
 # Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
+**/logs
+**/*.log
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+**/lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+**/report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+**/pids
+**/*.pid
+**/*.seed
+**/*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+**/lib-cov
 
 # Coverage directory used by tools like istanbul
-coverage
-*.lcov
+**/coverage
+**/*.lcov
 
 # nyc test coverage
-.nyc_output
+**/.nyc_output
 
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
+**/.grunt
 
 # Bower dependency directory (https://bower.io/)
-bower_components
+**/bower_components
 
 # node-waf configuration
-.lock-wscript
+**/.lock-wscript
 
 # Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+**/build/Release
 
 # Dependency directories
-node_modules/
-jspm_packages/
+**/node_modules/
+**/jspm_packages/
 
 # TypeScript v1 declaration files
-typings/
+**/typings/
 
 # TypeScript cache
-*.tsbuildinfo
+**/*.tsbuildinfo
 
 # Optional npm cache directory
-.npm
+**/.npm
 
 # Optional eslint cache
-.eslintcache
+**/.eslintcache
 
 # Optional REPL history
-.node_repl_history
+**/.node_repl_history
 
 # Output of 'npm pack'
-*.tgz
+**/*.tgz
 
 # Yarn Integrity file
-.yarn-integrity
+**/.yarn-integrity
 
 # dotenv environment variables file
-.env
-.env.test
+**/.env
+**/.env.test
 
 # parcel-bundler cache (https://parceljs.org/)
-.cache
+**/.cache
 
 # next.js build output
-.next
+**/.next
 
 # nuxt.js build output
-.nuxt
+**/.nuxt
 
 # rollup.js default build output
-dist/
+**/dist/
 
 # Uncomment the public line if your project uses Gatsby
 # https://nextjs.org/blog/next-9-1#public-directory-support
 # https://create-react-app.dev/docs/using-the-public-folder/#docsNav
 # public
 
 # Storybook build outputs
-.out
-.storybook-out
+**/.out
+**/.storybook-out
 
 # vuepress build output
-.vuepress/dist
+**/.vuepress/dist
 
 # Serverless directories
-.serverless/
+**/.serverless/
 
 # FuseBox cache
-.fusebox/
+**/.fusebox/
 
 # DynamoDB Local files
-.dynamodb/
+**/.dynamodb/
 
 # Temporary folders
-tmp/
-temp/
+**/tmp/
+**/temp/
 
 ### react ###
-.DS_*
+**/.DS_*
 **/*.backup.*
 **/*.back.*
 
-node_modules
+**/node_modules
 
-*.sublime*
+**/*.sublime*
 
-psd
-thumb
-sketch
+**/psd
+**/thumb
+**/sketch
 
-.vscode
+**/.vscode
 
 ### API Keys ###
-.env
+**/.env
 # End of https://www.gitignore.io/api/node,react

Dockerfile

@@ -1,11 +1,23 @@
-FROM node:17-bullseye-slim
+FROM node:17-bullseye-slim AS chrono-build-stage
 ENV NODE_ENV production
-RUN apt-get update && apt-get install -y --no-install-recommends dumb-init
+WORKDIR /usr/src/app
+
+COPY client .
+
+RUN npm ci --omit=dev && NODE_OPTIONS=--openssl-legacy-provider SKIP_PREFLIGHT_CHECK=true npm run build
+
+# Deploy stage
+FROM node:17-bullseye-slim
 WORKDIR /usr/src/app
 
 COPY --chown=node:node . .
+RUN rm -rf client
+RUN mkdir -p client/build
+COPY --from=chrono-build-stage --chown=node:node /usr/src/app/build /usr/src/app/client/build
+
+RUN apt-get update && apt-get install -y --no-install-recommends dumb-init && apt-get clean && rm -rf /var/lib/apt/lists/*
 
 RUN npm ci --omit=dev
-RUN cd client && npm ci --omit=dev && NODE_OPTIONS=--openssl-legacy-provider SKIP_PREFLIGHT_CHECK=true npm run build
+
 USER node
 CMD ["dumb-init", "npm", "run", "start"]

client/package.json

@@ -49,4 +49,4 @@
     ]
   },
   "proxy": "http://localhost:5000"
-}
+}

client/src/App.js

@@ -1,30 +1,30 @@
-import React, { useEffect } from "react";
-import { Provider } from "react-redux";
-import { BrowserRouter, Route } from "react-router-dom";
+import React, { useEffect } from "react"
+import { Provider } from "react-redux"
+import { BrowserRouter, Route } from "react-router-dom"
 
-import store from "./redux/store";
-import { loadUser } from "./redux/actions/auth";
-import "./styles/App.css";
-import HELData from "./components/tabs/HELData";
-import Navbar from "./components/utils/Navbar";
-import Dashboard from "./components/tabs/Dashboard";
-import CreateTimeTable from "./components/timetable/CreateTimeTable";
-import About from "./components/tabs/About";
-import Landing from "./components/tabs/Landing";
-import HelForm from "./components/forms/HelForm";
-import PrivateRoute from "./components/routes/PrivateRoute";
-import SemiPrivateRoute from "./components/routes/SemiPrivateRoute";
-import CheckLoggedIn from "./components/authorization/CheckLoggedIn";
+import store from "./redux/store"
+import { loadUser } from "./redux/actions/auth"
+import "./styles/App.css"
+import HELData from "./components/tabs/HELData"
+import Navbar from "./components/utils/Navbar"
+import Dashboard from "./components/tabs/Dashboard"
+import CreateTimeTable from "./components/timetable/CreateTimeTable"
+import About from "./components/tabs/About"
+import Landing from "./components/tabs/Landing"
+import HelForm from "./components/forms/HelForm"
+import PrivateRoute from "./components/routes/PrivateRoute"
+import SemiPrivateRoute from "./components/routes/SemiPrivateRoute"
+import CheckLoggedIn from "./components/authorization/CheckLoggedIn"
 
-import createBrowserHistory from "./history";
+import createBrowserHistory from "./history"
 
-export const history = createBrowserHistory({ forceRefresh: true });
+export const history = createBrowserHistory({ forceRefresh: true })
 
 const App = () => {
   // Restore user information on refresh
   useEffect(() => {
-    store.dispatch(loadUser());
-  }, []);
+    store.dispatch(loadUser())
+  }, [])
   return (
     <Provider store={store}>
       <BrowserRouter history={history}>
@@ -40,7 +40,7 @@ const App = () => {
         </div>
       </BrowserRouter>
     </Provider>
-  );
-};
+  )
+}
 
-export default App;
+export default App

client/src/components/tabs/ShareTimeTable.jsx

@@ -158,7 +158,7 @@ const ShareTimeTable = (props) => {
 
   const [sharedData, setSharedData] = React.useState(null);
   useEffect(() => {
-    axios.get("/api/current_user").then((response) => {
+    axios.get("/chrono/api/current_user").then((response) => {
       setSharedData(response.data);
     }).catch((error) => {
       console.log(error.toJSON());

client/src/config/constants.js

@@ -1,20 +1,20 @@
 const prod = {
   urls: {
-    googleAuth: "https://chronofactorem.up.railway.app/api/auth/google",
-    adminLogin: "https://chrono-dashboard.herokuapp.com/"
-  }
-};
+    googleAuth: "https://chrono.crux-bphc.com/api/auth/google",
+    adminLogin: "https://chrono-dashboard.herokuapp.com/",
+  },
+}
 
 const dev = {
   urls: {
     googleAuth: "http://localhost:5000/api/auth/google",
-    adminLogin: "http://localhost:3001"
-  }
-};
+    adminLogin: "http://localhost:3001",
+  },
+}
 
 const configuration = {
   // Add common constants here
-  ...(process.env.NODE_ENV === "development" ? dev : prod)
-};
+  ...(process.env.NODE_ENV === "development" ? dev : prod),
+}
 
-export default configuration;
+export default configuration