Update

.github/workflows/node.js.yml

@@ -48,5 +48,6 @@ jobs:
       - run: pnpm install
       - name: Build the application
         env:
-          BACKEND_URL: "http://localhost:8080"
+          NEXT_PUBLIC_API_URL: "http://localhost:8080"
+          BACK_END_URL: "http://localhost:8080"
         run: pnpm build

README.md

@@ -110,10 +110,10 @@ Set up the application environment variables by running the following script:
 scripts/init_environments.sh
 ```
 
-This script generates environment variables, including BACKEND_URL, to establish the communication between the client and server. Example
+This script generates environment variables, including NEXT_PUBLIC_API_URL, to establish the communication between the client and server. Example
 
 ```
-BACKEND_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://localhost:8080
 ```
 
 We recommend running the `scripts/all.sh` script, as it streamlines the process by checking your environment settings and performing all necessary configurations, removing the need to execute multiple scripts manually.

next.config.mjs

@@ -6,7 +6,7 @@ const nextConfig = {
       fallback: [
         {
           source: "/api/:path*",
-          destination: `${process.env.BACKEND_URL}/api/:path*`,
+          destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
         },
       ],
     };

package.json

@@ -63,6 +63,7 @@
     "nanoid": "^5.0.9",
     "next": "^15.1.2",
     "next-auth": "5.0.0-beta.25",
+    "next-runtime-env": "^3.2.2",
     "next-themes": "^0.4.4",
     "nuqs": "^2.2.3",
     "react": "^19.0.0",

scripts/docker_deployment.sh

@@ -24,14 +24,14 @@ docker tag ${IMAGE_NAME} ${REMOTE_REPO}:${TAG}
 docker tag ${IMAGE_NAME} ${REMOTE_REPO}:latest
 
 # Step 3: Log in to the Docker repository (Docker Hub by default)
-echo "Logging into Docker repository..."
-docker login || { echo "Login failed"; exit 1; }
-
-# Step 4: Push both tags to the remote repository
-echo "Pushing Docker image to remote repository with tag '${TAG}'..."
-docker push ${REMOTE_REPO}:${TAG}
-
-echo "Pushing Docker image to remote repository with tag 'latest'..."
-docker push ${REMOTE_REPO}:latest
-
-echo "Docker image has been pushed successfully with tags '${TAG}' and 'latest'."
+#echo "Logging into Docker repository..."
+#docker login || { echo "Login failed"; exit 1; }
+#
+## Step 4: Push both tags to the remote repository
+#echo "Pushing Docker image to remote repository with tag '${TAG}'..."
+#docker push ${REMOTE_REPO}:${TAG}
+#
+#echo "Pushing Docker image to remote repository with tag 'latest'..."
+#docker push ${REMOTE_REPO}:latest
+#
+#echo "Docker image has been pushed successfully with tags '${TAG}' and 'latest'."

scripts/init_environments.sh

@@ -33,7 +33,8 @@ while true; do
 done
 
 # Append to the .env.local file
-echo "BACKEND_URL=\"$backend_server\"" >> "$output_file"
+echo "NEXT_PUBLIC_API_URL=\"$backend_server\"" >> "$output_file"
+echo "BACK_END_URL=\"$backend_server\"" >> "$output_file"
 
 
 # Run npx auth and append its output to .env

src/app/(auth)/login/page.tsx

@@ -1,6 +1,8 @@
 import LoginForm from "@/components/auth/login-form";
+import { BACK_END_URL } from "@/lib/constants";
 
-const LoginPage = () => {
+const LoginPage = async () => {
+  console.log(`BACK_END ${BACK_END_URL}`);
   return <LoginForm />;
 };
 export default LoginPage;

src/app/layout.tsx

@@ -3,11 +3,10 @@ import "./theme.css";
 
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { PublicEnvScript } from "next-runtime-env";
 
-import AutoInitBackendApi from "@/components/init-api-backend";
 import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { setBackendUrl, setBaseUrl } from "@/lib/runtime-variables";
 import { ErrorProvider } from "@/providers/error-provider";
 import ReactQueryProvider from "@/providers/react-query-provider";
 import { ThemeProvider } from "@/providers/theme-provider";
@@ -19,44 +18,21 @@ export const metadata: Metadata = {
   description: "FlowInquiry dashboard",
 };
 
-const RootLayout = async ({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) => {
-  const backendUrl = process.env.BACKEND_URL;
-  if (!backendUrl) {
-    throw new Error("BACKEND_URL is not defined in the environment");
-  }
-  setBackendUrl(backendUrl);
-
-  // Base url is the mandatory field in environments except local
-  const baseUrl = process.env.BASE_URL;
-  setBaseUrl(baseUrl);
-
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning={true} lang="en">
       <head>
+        <PublicEnvScript />
         <title>FlowInquiry - Ticket Management</title>
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        {/* Favicon for modern browsers */}
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        {/* Fallback favicon for older browsers */}
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </head>
       <body className={inter.className}>
-        <script
-          id="runtime-config"
-          dangerouslySetInnerHTML={{
-            __html: `window.BASE_URL="${baseUrl}";`,
-          }}
-        />
         <ErrorProvider>
           <ThemeProvider attribute="class" defaultTheme="system">
             <ReactQueryProvider>
-              <TooltipProvider>
-                <AutoInitBackendApi /> {children}
-              </TooltipProvider>
+              <TooltipProvider>{children}</TooltipProvider>
               <Toaster />
             </ReactQueryProvider>
           </ThemeProvider>

src/app/page.tsx

@@ -1,13 +1,7 @@
-import { redirect } from "next/navigation";
+import { Home } from "@/components/home";
 
-import { auth } from "@/auth";
+const Page = async () => {
+  return <Home />;
+};
 
-export default async function Home() {
-  const session = await auth();
-  if (!session) {
-    console.warn("No authentication. Redirect to the login page ...");
-    redirect("/login");
-  } else {
-    redirect("/portal");
-  }
-}
+export default Page;

src/auth.ts

@@ -18,8 +18,7 @@ export const { handlers, auth } = NextAuth({
         if (!credentials) {
           throw new Error("Invalid credentials");
         }
-        const user = await apiAuthSignIn(credentials);
-        return user;
+        return await apiAuthSignIn(credentials);
       },
     }),
   ],

src/components/admin-panel/content-layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Navbar } from "@/components/admin-panel/navbar";
 
 interface ContentLayoutProps {

src/components/admin-panel/user-nav.tsx

@@ -30,7 +30,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { getApiUrl, getBaseUrl } from "@/lib/runtime-variables";
+import { API_URL } from "@/lib/constants";
 
 export function UserNav() {
   const { data: session } = useSession();
@@ -50,7 +50,7 @@ export function UserNav() {
                     <AvatarImage
                       src={
                         session?.user?.imageUrl
-                          ? `${getApiUrl()}/api/files/${session?.user?.imageUrl}`
+                          ? `${API_URL}/api/files/${session?.user?.imageUrl}`
                           : undefined
                       }
                       alt="Avatar"
@@ -102,7 +102,7 @@ export function UserNav() {
           <DropdownMenuSeparator />
           <DropdownMenuItem
             className="hover:cursor-pointer"
-            onClick={() => signOut({ redirectTo: getBaseUrl() })}
+            onClick={() => signOut()}
           >
             <LogOut className="w-4 h-4 mr-3 text-muted-foreground" />
             Sign out
@@ -111,12 +111,10 @@ export function UserNav() {
       </DropdownMenu>
       <DialogContent>
         <DialogHeader className="flex items-center space-x-4">
-          {/* Logo */}
           <div>
             <AppLogo />
           </div>
 
-          {/* Title and Description */}
           <div>
             <DialogTitle className="text-2xl font-bold">
               FlowInquiry

src/components/forms/profile-form.tsx

@@ -40,7 +40,7 @@ import {
   findUserById,
   updateUser,
 } from "@/lib/actions/users.action";
-import { getApiUrl } from "@/lib/runtime-variables";
+import { API_URL } from "@/lib/constants";
 import { useError } from "@/providers/error-provider";
 import { UserDTOSchema } from "@/types/users";
 
@@ -159,7 +159,7 @@ export const ProfileForm = () => {
                 <AvatarImage
                   src={
                     session?.user?.imageUrl
-                      ? `${getApiUrl()}/api/files/${session?.user?.imageUrl}`
+                      ? `${API_URL}/api/files/${session?.user?.imageUrl}`
                       : ""
                   }
                   alt="@flowinquiry"

src/components/home.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { redirect } from "next/navigation";
+import { getSession } from "next-auth/react";
+
+export const Home = async () => {
+  const session = getSession();
+  if (!session) {
+    redirect("/login");
+  } else {
+    redirect("/portal");
+  }
+};

src/components/shared/avatar-display.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import DefaultTeamLogo from "@/components/teams/team-logo";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import DefaultUserLogo from "@/components/users/user-logo";
-import { getApiUrl } from "@/lib/runtime-variables";
+import { API_URL } from "@/lib/constants";
 
 interface AvatarDisplayProps {
   imageUrl?: string | null;
@@ -25,7 +25,7 @@ export const AvatarDisplay: React.FC<AvatarDisplayProps> = ({
   return (
     <Avatar className={`${size} cursor-pointer ${className}`} onClick={onClick}>
       <AvatarImage
-        src={imageUrl ? `${getApiUrl()}/api/files/${imageUrl}` : undefined}
+        src={imageUrl ? `${API_URL}/api/files/${imageUrl}` : undefined}
       />
       <AvatarFallback>{fallbackContent}</AvatarFallback>
     </Avatar>

src/components/teams/team-form.tsx

@@ -31,8 +31,8 @@ import {
   findTeamById,
   updateTeam,
 } from "@/lib/actions/teams.action";
+import { API_URL } from "@/lib/constants";
 import { obfuscate } from "@/lib/endecode";
-import { getApiUrl } from "@/lib/runtime-variables";
 import { validateForm } from "@/lib/validator";
 import { useError } from "@/providers/error-provider";
 import { TeamDTO, TeamDTOSchema } from "@/types/teams";
@@ -175,7 +175,7 @@ export const TeamForm = ({ teamId }: { teamId: number | undefined }) => {
                     <AvatarImage
                       src={
                         team?.logoUrl
-                          ? `${getApiUrl()}/api/files/${team.logoUrl}`
+                          ? `${API_URL}/api/files/${team.logoUrl}`
                           : undefined
                       }
                       alt="@flowinquiry"

src/components/teams/team-list.tsx

@@ -38,8 +38,8 @@ import {
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { usePagePermission } from "@/hooks/use-page-permission";
 import { deleteTeams, searchTeams } from "@/lib/actions/teams.action";
+import { API_URL } from "@/lib/constants";
 import { obfuscate } from "@/lib/endecode";
-import { getApiUrl } from "@/lib/runtime-variables";
 import { cn } from "@/lib/utils";
 import { useError } from "@/providers/error-provider";
 import { Filter, QueryDTO } from "@/types/query";
@@ -206,7 +206,7 @@ export const TeamList = () => {
                           <AvatarImage
                             src={
                               team.logoUrl
-                                ? `${getApiUrl()}/api/files/${team.logoUrl}`
+                                ? `${API_URL}/api/files/${team.logoUrl}`
                                 : undefined
                             }
                             alt="@flowinquiry"

src/components/teams/team-users.tsx

@@ -38,8 +38,8 @@ import {
   deleteUserFromTeam,
   findMembersByTeamId,
 } from "@/lib/actions/teams.action";
+import { API_URL } from "@/lib/constants";
 import { obfuscate } from "@/lib/endecode";
-import { getApiUrl } from "@/lib/runtime-variables";
 import { BreadcrumbProvider } from "@/providers/breadcrumb-provider";
 import { useError } from "@/providers/error-provider";
 import { useTeam } from "@/providers/team-provider";
@@ -170,7 +170,7 @@ const TeamUsersView = () => {
                               <AvatarImage
                                 src={
                                   user?.imageUrl
-                                    ? `${getApiUrl()}/api/files/${user.imageUrl}`
+                                    ? `${API_URL}/api/files/${user.imageUrl}`
                                     : undefined
                                 }
                                 alt={`${user.firstName} ${user.lastName}`}