From e95ef045932572f3601bb7d06c69852c05ca035d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=BDiga=20Kokelj?= <ziga.kokelj@gmail.com>
Date: Wed, 21 Aug 2024 09:11:24 +0200
Subject: [PATCH] deploy frontend separately

---
 tools/walletextension/frontend/Dockerfile     | 46 ++++++++++++++-----
 tools/walletextension/frontend/next.config.js |  5 --
 .../src/components/layouts/header.tsx         |  4 +-
 .../frontend/src/pages/_app.tsx               | 10 ++--
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/tools/walletextension/frontend/Dockerfile b/tools/walletextension/frontend/Dockerfile
index 9d8fb79971..0e15b89e8a 100644
--- a/tools/walletextension/frontend/Dockerfile
+++ b/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"]
\ No newline at end of file
+
+# Start the application
+CMD ["npm", "start"]
diff --git a/tools/walletextension/frontend/next.config.js b/tools/walletextension/frontend/next.config.js
index 04472f7ff7..50f8420725 100644
--- a/tools/walletextension/frontend/next.config.js
+++ b/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;
diff --git a/tools/walletextension/frontend/src/components/layouts/header.tsx b/tools/walletextension/frontend/src/components/layouts/header.tsx
index 9a1946c88c..a04de0fea8 100644
--- a/tools/walletextension/frontend/src/components/layouts/header.tsx
+++ b/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}
diff --git a/tools/walletextension/frontend/src/pages/_app.tsx b/tools/walletextension/frontend/src/pages/_app.tsx
index ba3a57bf6f..afe1f352c6 100644
--- a/tools/walletextension/frontend/src/pages/_app.tsx
+++ b/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"