updated dockerfile for frontend, and lazy loading to more routes

Author: sunjay-dev

Frontend/Dockerfile

@@ -1,15 +1,22 @@
-FROM node:20-alpine AS build
+FROM node:24-alpine AS build
 
 WORKDIR /app
 
 RUN npm i -g pnpm
 
 COPY package*.json pnpm-lock.yaml* ./
-
 RUN pnpm install
 
 COPY . .
+RUN pnpm run build
+
+
+FROM nginx:1.27-alpine AS deploy
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=build /app/dist /usr/share/nginx/html
 
-EXPOSE 5173
+EXPOSE 80
 
-CMD ["npm", "run", "host"]
+CMD ["nginx", "-g", "daemon off;"]

Frontend/nginx.conf

@@ -0,0 +1,15 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri /index.html;
+  }
+
+  gzip on;
+  gzip_types text/plain text/css application/javascript application/json image/svg+xml;
+  gzip_min_length 256;
+}

Frontend/src/components/jobs/JobCard.tsx

@@ -8,7 +8,6 @@ export default function JobCard({ _id, jobName, method, url, nextRunAt, lastRunA
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
-  console.log(timeFormat24)
 
   const formattedTime_NextRunAt = new Date(nextRunAt).toLocaleTimeString('en-US', {
     hour12: !timeFormat24,

Frontend/src/routes.tsx

@@ -1,53 +1,58 @@
 import { lazy, Suspense } from "react";
-import { createBrowserRouter } from "react-router-dom";
-import { Home, Login, Signup, Dashboard, CreateJob, Jobs, EditJob, Logs, JobLogs, Settings, NotFoundPage, ForgotPassword } from "./pages";
+import { createBrowserRouter, Outlet } from "react-router-dom";
+import { Dashboard, CreateJob, Jobs, EditJob, Logs, JobLogs, Settings } from "./pages";
 import { Layout, ProtectedRoute, PublicRoute, Loader } from "./components";
 
+const Home = lazy(() => import("./pages/Home"));
 const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy"));
 const Terms = lazy(() => import("./pages/Terms"));
 const VerifyEmail = lazy(() => import("./pages/VerifyUserEmail"));
 const ResetPassword = lazy(() => import("./pages/ResetPassword"));
+const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
+const Login = lazy(() => import("./pages/Login"));
+const Signup = lazy(() => import("./pages/Signup"));
+const ForgotPassword = lazy(() => import("./pages/ForgotPassword"));
 
 export const router = createBrowserRouter([
-  { path: "/", element: <Home /> },
-
   {
-    path: "/privacy-policy",
     element: (
       <Suspense fallback={<Loader />}>
-        <PrivacyPolicy />
+        <Outlet />
       </Suspense>
     ),
+    children: [
+      { path: "/", element: <Home /> },
+      { path: "/privacy-policy", element: <PrivacyPolicy /> },
+      { path: "/terms", element: <Terms /> },
+      { path: "/verify-email/:userId", element: <VerifyEmail /> },
+      { path: "/reset-password/:token", element: <ResetPassword /> },
+      { path: "*", element: <NotFoundPage /> },
+    ],
   },
   {
-    path: "/terms",
+    path: "/login",
     element: (
       <Suspense fallback={<Loader />}>
-        <Terms />
+        <PublicRoute><Login /></PublicRoute>
       </Suspense>
     ),
   },
-  { path: "/login", element: <PublicRoute><Login /></PublicRoute> },
-  { path: "/signup", element: <PublicRoute><Signup /></PublicRoute> },
-  { path: "/forgot-password", element: <PublicRoute><ForgotPassword /></PublicRoute> },
-
   {
-    path: "/verify-email/:userId",
+    path: "/signup",
     element: (
       <Suspense fallback={<Loader />}>
-        <VerifyEmail />
+        <PublicRoute><Signup /></PublicRoute>
       </Suspense>
     ),
   },
   {
-    path: "/reset-password/:token",
+    path: "/forgot-password",
     element: (
       <Suspense fallback={<Loader />}>
-        <ResetPassword />
+        <PublicRoute><ForgotPassword /></PublicRoute>
       </Suspense>
     ),
   },
-
   {
     element: <ProtectedRoute />,
     children: [
@@ -65,6 +70,4 @@ export const router = createBrowserRouter([
       },
     ],
   },
-
-  { path: "*", element: <NotFoundPage /> },
 ]);