deploy frontend separately

tools/walletextension/frontend/Dockerfile

@@ -1,20 +1,44 @@
-# Use an official Node.js 22 as a parent image
-FROM node:22-alpine
+# Use an official Node.js LTS version as a base image
+FROM node:20-alpine AS base
 
-WORKDIR /usr/src/app
-
-# ARG for build-time variable (GATEWAY_API_URL)
 ARG GATEWAY_API_URL
-
-# ENV for URL to be used in the app
 ENV NEXT_PUBLIC_API_GATEWAY_URL=${GATEWAY_API_URL}
-ENV PORT=80
 
-# Copy package.json and package-lock.json (or yarn.lock) into the container
+# Set the working directory
+WORKDIR /usr/src/app
+
+# Install dependencies in a separate layer to optimize caching
 COPY package*.json ./
 
-RUN npm install
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the application code
 COPY . .
+
+# Build the Next.js app
 RUN npm run build
+
+# Reduce the size of the final image by using a lighter base image
+FROM node:20-alpine AS runner
+
+# Set the working directory
+WORKDIR /usr/src/app
+
+# Copy only the necessary files from the build stage
+COPY --from=base /usr/src/app/.next ./.next
+COPY --from=base /usr/src/app/public ./public
+COPY --from=base /usr/src/app/package*.json ./
+
+# Install production dependencies
+RUN npm ci --production
+
+
+# Set the environment variables
+ENV PORT=80
+
+# Expose the port
 EXPOSE 80
-CMD ["npm", "start"]
+
+# Start the application
+CMD ["npm", "start"]

tools/walletextension/frontend/next.config.js

@@ -1,14 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  output: "export",
-  // distDir should be "../api/static" in production but .next in development
-  distDir: process.env.NODE_ENV === "development" ? ".next" : "../api/static",
   images: {
     unoptimized: true,
   },
-  // base path for static files should be "" in development but "/static" in production
-  basePath: process.env.NODE_ENV === "development" ? "" : "/static",
 };
 
 module.exports = nextConfig;

tools/walletextension/frontend/src/components/layouts/header.tsx

@@ -14,14 +14,14 @@ export default function Header() {
       <div className="flex h-16 justify-between items-center px-4">
         <Link href="/">
           <Image
-            src="/static/assets/images/black_logotype.png"
+            src="/assets/images/black_logotype.png"
             alt="Logo"
             width={150}
             height={40}
             className="cursor-pointer dark:hidden"
           />
           <Image
-            src="/static/assets/images/white_logotype.png"
+            src="/assets/images/white_logotype.png"
             alt="Logo"
             width={150}
             height={40}

tools/walletextension/frontend/src/pages/_app.tsx

@@ -34,25 +34,25 @@ export default function App({ Component, pageProps }: AppProps) {
         ogTwitterImage={siteMetadata.siteLogo}
         ogType={"website"}
       >
-        <link rel="icon" href="/static/favicon/favicon.ico" />
+        <link rel="icon" href="/favicon/favicon.ico" />
         <link
           rel="apple-touch-icon"
           sizes="180x180"
-          href="/static/favicon/apple-touch-icon.png"
+          href="/favicon/apple-touch-icon.png"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="32x32"
-          href="/static/favicon/favicon-32x32.png"
+          href="/favicon/favicon-32x32.png"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="16x16"
-          href="/static/favicon/favicon-16x16.png"
+          href="/favicon/favicon-16x16.png"
         />
-        <link rel="manifest" href="/static/favicon/site.webmanifest" />
+        <link rel="manifest" href="/favicon/site.webmanifest" />
       </HeadSeo>
       <ThemeProvider
         attribute="class"