web-app: adding docker-container

src/backend/docker/docker-compose.yml

@@ -63,12 +63,18 @@ services:
   #     context: ./web/web.admin/dashboard
   #     dockerfile: local.Dockerfile
 
-  # web-app:
-  #   image: restaurant/web
-  #   build:
-  #     context: ./web/web.client/web-app
-  #     dockerfile: local.Dockerfile
-
+  web-app:
+    image: restaurant/web-app
+    build:
+      context: ./web/web.client/web-app-new
+      dockerfile: Dockerfile
+    ports:
+      - 3001:3000
+    environment:
+      - BASE_URL=http://traefik:80
+      - NEXT_SHARP_PATH=./node_modules/sharp
+      - AUTH_ISSUER=http://traefik:80/identity
+
   order-db:
     image: postgres:alpine
     volumes: 

src/backend/services/checkout-api/.nvmrc

@@ -0,0 +1 @@
+20

src/backend/web/web.client/web-app-new/.nvmrc

@@ -0,0 +1 @@
+20

src/backend/web/web.client/web-app-new/Dockerfile

@@ -0,0 +1,52 @@
+FROM node:20-alpine AS base
+
+# 1. Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# 2. Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+COPY .env.local .env.production
+RUN yarn build
+
+# 3. Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+RUN ls -a
+
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME 0.0.0.0
+
+CMD ["node", "server.js"]

src/backend/web/web.client/web-app-new/next.config.js

@@ -1,5 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "standalone",
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
   images: {
     remotePatterns: [
       {
@@ -10,6 +16,10 @@ const nextConfig = {
         protocol: "http",
         hostname: "localhost",
       },
+      {
+        protocol: "http",
+        hostname: "traefik",
+      },
     ],
   },
 

src/backend/web/web.client/web-app-new/package.json

@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "next dev -p 30011",
     "build": "next build",
-    "start": "next start -p 3001",
+    "start": "next start -p 30011",
     "lint": "next lint"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "clsx": "^2.1.0",
     "next": "14.0.3",
     "next-auth": "^4.24.5",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "sharp": "^0.33.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/backend/web/web.client/web-app-new/src/app/api/auth/[...nextauth]/route.ts

@@ -1,23 +1,23 @@
 import NextAuth, { AuthOptions } from "next-auth"
 import IdentityServer4Provider from "next-auth/providers/identity-server4";
 
-export const authOptions: AuthOptions = {
+const authOptions: AuthOptions = {
     providers: [
         IdentityServer4Provider({
             id: "web-app",
             name: "Restaraunt App Identity",
-            clientId: "nextjs-web-app",
-            clientSecret: "secret",
-            issuer: "http://localhost:8080/identity",
+            clientId: process.env.AUTH_CLIENT_ID,
+            clientSecret: process.env.AUTH_CLIENT_SECRET,
+            issuer: process.env.AUTH_ISSUER,
             authorization: { params: { scope: "openid profile catalog-api order-api basket-api payment-api checkout-api" } },
         })
     ],
     secret: process.env.NEXTAUTH_SECRET,
     callbacks: {
         async session({ session, token, user }) {
-            session.user.user_id = token.sub;
+            session.user = token;
             return session
-        }
+        },
     }
 }
 

src/backend/web/web.client/web-app-new/src/app/checkout/page.tsx

@@ -1,14 +1,11 @@
-import { getServerSession } from "next-auth";
-import { authOptions } from "../api/auth/[...nextauth]/route";
+"use client";
+
 import { CheckoutComponent } from "./checkout";
-import { redirect } from "next/navigation";
+import { signIn, useSession } from "next-auth/react";
 
-const Page = async () => {
-  const session = await getServerSession(authOptions);
-
-  return (
-    <>{session?.user ? <CheckoutComponent /> : redirect("api/auth/signin")}</>
-  );
+const Page = () => {
+  const { status } = useSession();
+  return <>{status === "authenticated" ? <CheckoutComponent /> : signIn()}</>;
 };
 
 export default Page;

src/backend/web/web.client/web-app-new/src/app/foods/[category]/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fetchFoodItemsByCategory } from "../fetch";
+import { fetchFoodItemsByCategory } from "../../../lib/fetch";
 import { FoodsPage } from "../foods";
 
 const Page = async ({ params }: { params: { category: string } }) => {

src/backend/web/web.client/web-app-new/src/app/foods/foods.tsx

@@ -1,6 +1,6 @@
 import CategoriesSidebar from "@/components/CategoriesSidebar";
 import FoodItem from "@/components/FoodItem";
-import { FoodItems } from "./fetch";
+import { FoodItems } from "../../lib/fetch";
 import RightSidebar from "@/components/RightSidebar";
 
 export const FoodsPage = ({ foodItems }: { foodItems: FoodItems }) => {

src/backend/web/web.client/web-app-new/src/app/foods/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fetchFoodItems } from "./fetch";
+import { fetchFoodItems } from "../../lib/fetch";
 import { FoodsPage } from "./foods";
 
 
@@ -10,4 +10,6 @@ const Page = async () => {
   );
 };
 
+export const dynamic = 'force-dynamic'
+
 export default Page;

src/backend/web/web.client/web-app-new/src/components/cart/open-cart.tsx

@@ -1,5 +1,4 @@
 import { ShoppingCartIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
 
 export default function OpenCart({
   className,
@@ -10,12 +9,7 @@ export default function OpenCart({
 }) {
   return (
     <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors">
-      <ShoppingCartIcon
-        className={clsx(
-          "h-4 transition-all ease-in-out hover:scale-110 ",
-          className
-        )}
-      />
+      <ShoppingCartIcon className={className} />
       {quantity ? (
         <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-orange-500 text-[11px] font-medium text-white text-center">
           {quantity}

src/backend/web/web.client/web-app-new/src/components/navbar/index.tsx

@@ -30,7 +30,7 @@ const Navbar: React.FC = () => {
 
         <div className="flex justify-end space-x-2 md:w-1/3">
           <Link href="/cart">
-            <OpenCart quantity={items.length} />
+            <OpenCart quantity={items.length} className="h-6 w-6" />
           </Link>
           <OpenUserProfile />
         </div>

src/backend/web/web.client/web-app-new/src/components/navbar/user-profile.tsx

@@ -1,16 +1,13 @@
 "use client";
 
 import { UserCircleIcon } from "@heroicons/react/24/solid";
-import { getProviders, signIn, signOut, useSession } from "next-auth/react";
-import Link from "next/link";
+import { signIn, signOut, useSession } from "next-auth/react";
 import { useState } from "react";
 
 export default function OpenUserProfile() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { status } = useSession();
 
-  getProviders().then((providers) => console.log("Providers", providers));
-
   return (
     <div className="relative">
       <div className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors">
@@ -25,7 +22,7 @@ export default function OpenUserProfile() {
       {isDropdownOpen && (
         <div className="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl">
           {status === "unauthenticated" && (
-            <button onClick={() => signIn('web-app')} className="w-full">
+            <button onClick={() => signIn()} className="w-full">
               <div className="block text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                 Login
               </div>

src/backend/web/web.client/web-app-new/src/lib/utils.ts

@@ -0,0 +1,8 @@
+import { ReadonlyURLSearchParams } from "next/navigation";
+
+export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
+    const paramsString = params.toString();
+    const queryString = `${paramsString.length ? '?' : ''}${paramsString}`;
+
+    return `${pathname}${queryString}`;
+};