Merge pull request #5 from edenia/feat/webapp-image

feat(webapp): reduce image compilation

webapp/.dockerignore

@@ -0,0 +1,6 @@
+Dockerfile
+.dockerignore
+node_modules
+README.md
+.next
+.git

webapp/Dockerfile

@@ -1,28 +1,6 @@
-# ---------- Base ----------
-FROM node:18.18.0-alpine3.18 as base
-WORKDIR /usr/src/app
+FROM node:18-alpine AS base
 
-# ---------- Builder ----------
-FROM base AS builder
-
-RUN apk add --no-cache git
-
-COPY package.json .
-COPY yarn*.lock .
-
-RUN yarn --frozen-lockfile --production
-
-COPY . .
-
-ENV GENERATE_SOURCEMAP false
-
-RUN yarn build
-
-# ---------- Release ----------
-FROM base as release
-COPY --from=builder /usr/src/app/package.json ./package.json
-COPY --from=builder /usr/src/app/node_modules ./node_modules
-COPY --from=builder /usr/src/app/.next ./.next
+WORKDIR /app
 
 ARG next_public_tag
 ARG next_public_name
@@ -48,9 +26,44 @@ ENV NEXT_PUBLIC_UAL_API_PORT $next_public_ual_api_port
 ENV NEXT_PUBLIC_UAL_CHAIN_ID $next_public_ual_chain_id
 ENV NEXT_PUBLIC_HASURA_URL $next_public_hasura_url
 
+# ---------- Deps Installer ----------
+FROM base AS deps
+
+RUN apk add --no-cache git
+
+COPY package.json yarn.lock* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile --production; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# ---------- Builder -----------------
+FROM base AS builder
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN yarn build
+
+# ---------- Release -----------------
+FROM base AS runner
+
 ENV NODE_ENV production
 
-EXPOSE 3000
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
 
-CMD ["yarn", "start"]
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
 
+CMD ["node", "server.js"]

webapp/next.config.js

@@ -2,6 +2,7 @@
 
 const nextConfig = {
   reactStrictMode: false,
+  output: 'standalone',
   webpack: config => {
     config.resolve.fallback = { fs: false }
 

webapp/package.json

@@ -21,58 +21,56 @@
   "dependencies": {
     "@0xpolygonid/js-sdk": "^1.1.0",
     "@apollo/client": "^3.8.4",
-    "@apollo/experimental-nextjs-app-support": "^0.0.0-commit-7dad495",
+    "@apollo/experimental-nextjs-app-support": "^0.4.3",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@iden3/js-iden3-auth": "^1.0.2",
     "@mui/icons-material": "^5.14.11",
     "@mui/lab": "^5.0.0-alpha.124",
     "@mui/material": "^5.14.11",
     "@mui/styles": "^5.14.11",
-    "@types/react-swipeable-views-utils": "^0.13.5",
-    "@types/yup": "^0.29.13",
+    "@mui/x-date-pickers": "^6.0.4",
+    "@types/react-swipeable-views-utils": "^0.13.3",
     "accept-language": "^3.0.18",
     "bufferutil": "^4.0.7",
-    "clsx": "^1.1.1",
+    "clsx": "^2.0.0",
     "date-fns": "^2.25.0",
     "formik": "^2.4.5",
     "graphql": "^16.8.1",
     "jwt-decode": "^3.1.2",
     "next": "^13.5.3",
     "next-intl": "^2.20.2",
-    "next-seo": "^4.28.1",
+    "next-seo": "^6.1.0",
     "node-fetch": "^3.0.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha-v3": "^1.9.7",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
-    "sharp": "^0.29.3",
-    "subscriptions-transport-ws": "^0.11.0",
+    "sharp": "^0.32.6",
     "utf-8-validate": "^6.0.3",
-    "yup": "^0.32.11"
+    "yup": "^1.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/gtag.js": "^0.0.8",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "@types/react-swipeable-views": "^0.13.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
-    "eslint": "7.32.0",
-    "eslint-config-next": "^13.5.3",
+    "@types/gtag.js": "^0.0.14",
+    "@types/react": "18.2.24",
+    "@types/react-dom": "18.2.8",
+    "@types/react-swipeable-views": "^0.13.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "eslint": "8.50.0",
+    "eslint-config-next": "13.5.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^14.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
-    "typescript": "^5.2.2"
+    "prettier": "^3.0.3",
+    "typescript": "5.2.2"
   }
 }

webapp/src/app/[locale]/lib/apollo-wrapper.tsx

@@ -10,7 +10,7 @@ import {
 } from '@apollo/experimental-nextjs-app-support/ssr'
 import decodeJWT from 'jwt-decode'
 
-import { graphqlConfig } from 'config'
+import { graphqlConfig } from '../../../config'
 
 function makeClient() {
   const httpLink = new HttpLink({