Created separate logic for stage and prod branches in github actions and

kustomizations

.github/workflows/docker-image.yml

@@ -17,20 +17,20 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
+
     - name: Set up QEMU
       uses: docker/setup-qemu-action@v3
+
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v3
+
     - name: Log in to the Container registry
       uses: docker/login-action@v3
       with:
         registry: ${{ env.REGISTRY }}
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
-    - name: Set up QEMU
-      uses: docker/setup-qemu-action@v3
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
+
     - name: Extract metadata (tags, labels) for Docker
       id: meta
       uses: docker/metadata-action@v5
@@ -41,7 +41,14 @@ jobs:
       uses: docker/build-push-action@v5
       with:
         context: .
+        file: Dockerfile.${{ github.ref }}
         push: true
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
         platforms: linux/amd64,linux/arm64
+
+
+
+if: contains(github.ref, "release")
+steps:
+ - run: echo "I only run if the branch has release in its name!"

Dockerfile.dev → docker/Dockerfile.develop

@@ -1,5 +1,5 @@
-FROM node:20-alpine as build
+FROM node:20-alpine
 WORKDIR /app
-COPY . .
+ADD . .
 RUN yarn install
 CMD ["yarn", "dev"]

docker/Dockerfile.prod

@@ -0,0 +1,26 @@
+FROM node:20-alpine as build-deps
+WORKDIR /app
+COPY package.json package-lock.json .
+RUN npm install
+
+FROM node:20-alpine as build-app
+WORKDIR /app
+COPY --from=build-deps /app/ .
+COPY . .
+RUN npx vite build -d
+
+
+FROM nginx:alpine as final
+COPY --from=build-app /app/dist /var/www/html/
+COPY <<EOF /etc/nginx/conf.d/console.conf
+server {
+	listen 3000;
+	root /var/www/html;
+
+	location / {
+	}
+}
+EOF
+
+EXPOSE 3000
+CMD ["nginx","-g","daemon off;"]

src/components/Header.tsx

@@ -1,15 +1,16 @@
-import { toast } from "react-toastify";
-import { Link } from "react-router-dom";
-import useStore from "../store";
-import Spinner from "./Spinner";
-import { logoutUserFn } from "../api/authApi";
-import { useMutation } from "@tanstack/react-query";
-import { Menu } from 'antd';
-import type { MenuProps } from "antd";
+import { toast } from 'react-toastify'
+import { Link } from 'react-router-dom'
+import useStore from '../store'
+import Spinner from './Spinner'
+import { logoutUserFn } from '../api/authApi'
+import { useMutation } from '@tanstack/react-query'
+import { Menu } from 'antd'
+import type { MenuProps } from 'antd'
+import React from 'react'
 
 const Header = () => {
-  const store = useStore();
-  const user = store.authUser;
+  const store = useStore()
+  const user = store.authUser
 
   //const items: MenuProps["items"] = [
   //  {
@@ -22,96 +23,95 @@ const Header = () => {
   //  },
   //];
 
-
-
   const { mutate: logoutUser } = useMutation(() => logoutUserFn(), {
     onMutate(variables) {
-      store.setRequestLoading(true);
+      store.setRequestLoading(true)
     },
     onSuccess(data) {
-      store.setRequestLoading(false);
-      toast.success("Successfully logged out", {
-        position: "top-right",
-      });
-      document.location.href = "/login";
+      store.setRequestLoading(false)
+      toast.success('Successfully logged out', {
+        position: 'top-right',
+      })
+      document.location.href = '/login'
     },
     onError(error: any) {
-      store.setRequestLoading(false);
-      store.setAuthUser(null);
-      document.location.href = "/login";
+      store.setRequestLoading(false)
+      store.setAuthUser(null)
+      document.location.href = '/login'
     },
-  });
-
+  })
 
   const handleLogout = () => {
-    logoutUser();
-  };
+    logoutUser()
+  }
 
-  const userMenu: MenuProps["items"] = ((user) => {
-    if (user == null) { 
+  const userMenu: MenuProps['items'] = (user => {
+    if (user == null) {
       return [
         {
           label: <a href="/register">Register</a>,
-          key: "register",
+          key: 'register',
         },
         {
           label: <a href="/login">Login</a>,
-          key: "login",
+          key: 'login',
         },
-      ];
+      ]
     } else {
       return [
         {
           label: <a href="/">Home</a>,
-          key: "home",
+          key: 'home',
         },
         {
           label: <a href="/profile">Profile</a>,
-          key: "profile",
+          key: 'profile',
         },
         {
-          label: <li className="cursor-pointer" onClick={handleLogout}>Logout</li>,
-          key: "logout",
+          label: (
+            <li className="cursor-pointer" onClick={handleLogout}>
+              Logout
+            </li>
+          ),
+          key: 'logout',
         },
-      ];
-
+      ]
     }
-  })(user);
-
+  })(user)
 
-  const onClick: MenuProps["onClick"] = (e: any) => {
-    console.log("click ", e);
+  const onClick: MenuProps['onClick'] = (e: any) => {
+    console.log('click ', e)
     store.currenCluster(e.key)
-  };
-
+  }
 
   return (
     <>
       <header className="bg-white h-15">
-
         <nav className="h-full flex justify-between container items-center">
-
           <div className="flex">
-            <Link to="/console" className="site-header text-ct-dark-600 text-2xl font-semibold">
-              <img className="site-logo" height="32" width="32" src="/logo.png" />
+            <Link
+              to="/console"
+              className="site-header text-ct-dark-600 text-2xl font-semibold"
+            >
+              <img
+                className="site-logo"
+                height="32"
+                width="32"
+                src="/logo.png"
+              />
             </Link>
           </div>
           <div className="flex">
-            <Menu
-              selectedKeys={"home"}
-              mode="horizontal"
-              items={userMenu}
-            />
+            <Menu selectedKeys={'home'} mode="horizontal" items={userMenu} />
           </div>
         </nav>
-
       </header>
 
       <div className="pt-4 pl-2 bg-ct-blue-600 fixed">
         {store.requestLoading && <Spinner color="text-ct-yellow-600" />}
       </div>
     </>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header