Creating Docker files for dev and prod. Additional work is needed

.dockerignore

@@ -0,0 +1,17 @@
+node_modules
+dist
+.git
+Dockerfile
+.dockerignore
+.env
+coverage
+tests
+logs
+docker
+tools
+Dockerfile*
+README.md
+LICENSE
+.vscode
+.git
+.gitignore

apps/api/Dockerfile.dev

@@ -0,0 +1,19 @@
+FROM node:20.18.0-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+# RUN npm run build:api
+
+# Copy the project files
+COPY . .
+# RUN npx nx run api:build
+
+# Expose the Node.js server port
+EXPOSE 3333
+
+# Start the server with nodemon for hot reloading
+CMD npx nx reset && npx nx run api:serve --configuration=development

apps/api/Dockerfile.prod

@@ -0,0 +1,48 @@
+# Stage 1: Build
+FROM node:20.18.0-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+
+# Copy the project files
+COPY . .
+RUN npx nx run api:build
+
+# Stage 2: Serve
+FROM node:18-alpine AS runtime
+
+WORKDIR /app
+
+# Copy the build from the previous stage
+COPY --from=builder /app/dist/apps/api ./dist
+COPY package*.json ./
+
+# Install a lightweight HTTP server to serve the static files
+RUN npm install --legacy-peer-deps
+RUN npm install prune --legacy-peer-deps
+
+# Expose the port the app runs on
+EXPOSE 3333
+
+# Serve the app in production mode
+CMD ["node", "dist/main.js"]
+
+
+
+
+
+# Expose the Node.js server port
+# EXPOSE 3001
+
+# Start the server with nodemon for hot reloading
+# CMD ["npm", "start", "api"]
+
+# RUN npx nx run api:serve --configuration=production
+# CMD ["serve", "-s", "dist", "-l", "5000"]
+# CMD ["npm", "serve", "api"]
+# CMD npx nx reset && npx nx run api:serve --configuration=production
+# CMD ["serve", "-s", "dist", "-l", "3333"]

apps/mobile-app/Dockerfile.dev

@@ -0,0 +1,20 @@
+# Use an official Node.js image
+FROM alpine:3.20
+
+ENV NODE_VERSION 20.18.0
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json package-lock ./
+RUN npm install
+
+# Copy the project files
+COPY . .
+
+# Expose the React development server port (3000)
+EXPOSE 3000
+
+# Start the React app in development mode
+CMD ["npm", "nx", "serve", "web"]

apps/mobile-app/Dockerfile.prod

@@ -0,0 +1,26 @@
+# Use an official Node.js image
+FROM alpine:3.20
+
+ENV NODE_VERSION 20.18.0
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json package-lock ./
+RUN npm install
+
+# Copy the project files
+COPY . .
+
+# Build the React app for production
+RUN yarn nx build web --prod
+
+# Install 'serve' to serve the built app
+RUN npm install -g serve
+
+# Expose the port to serve the static files
+EXPOSE 5000
+
+# Serve the production build
+CMD ["serve", "-s", "dist/apps/web", "-l", "5000"]

apps/web-app/Dockerfile.dev

@@ -0,0 +1,17 @@
+FROM node:20.18.0-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+# COPY tools/scripts/postinstall.sh ./tools/scripts/postinstall.sh
+RUN npm install --legacy-peer-deps
+
+# Copy the project files
+COPY . .
+
+# Expose the React development server port (3000)
+EXPOSE 4200
+
+CMD ["npx", "nx", "serve", "web-app"]

apps/web-app/Dockerfile.prod

@@ -0,0 +1,28 @@
+# Stage 1: Build
+FROM node:20.18.0-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+RUN npm install prune --legacy-peer-deps
+
+# Copy the project files
+COPY . .
+RUN npx nx run web-app:build
+
+# Stage 2: Serve
+FROM nginx:alpine AS production
+
+# WORKDIR /app
+
+# Copy the build from the previous stage
+COPY --from=builder /app/dist/apps/web-app /usr/share/nginx/html
+
+# Expose the port the app runs on
+EXPOSE 80
+
+# Serve the app in production mode
+CMD ["nginx", "-g", "daemon off;"]

apps/web-app/vite.config.ts

@@ -9,12 +9,12 @@ export default defineConfig({
 
   server: {
     port: 4200,
-    host: 'localhost',
+    host: '0.0.0.0',
   },
 
   preview: {
     port: 4300,
-    host: 'localhost',
+    host: '0.0.0.0',
   },
 
   plugins: [react(), nxViteTsPaths()],

docker-compose.dev.yml

@@ -0,0 +1,26 @@
+services:
+  web:
+    build:
+      context: .
+      dockerfile: ./apps/web-app/Dockerfile.dev
+    volumes:
+      - .:/app
+      - /app/node_modules
+    ports:
+      - '4200:4200'
+    environment:
+      - NODE_ENV=development
+    depends_on:
+      - api
+
+  api:
+    build:
+      context: .
+      dockerfile: ./apps/api/Dockerfile.dev
+    volumes:
+      - .:/app
+      - /app/node_modules
+    ports:
+      - '3333:3333'
+    environment:
+      - NODE_ENV=development

docker-compose.prod.yml

@@ -0,0 +1,20 @@
+services:
+  web:
+    build:
+      context: .
+      dockerfile: ./apps/web-app/Dockerfile.prod
+    ports:
+      - '4200:80'
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - api
+
+  api:
+    build:
+      context: .
+      dockerfile: ./apps/api/Dockerfile.prod
+    ports:
+      - '3333:3333'
+    environment:
+      - NODE_ENV=production

libs/features/src/lib/navigation/header/header.view.tsx

@@ -1,4 +1,3 @@
-import { pokeshopLogo } from '@pokemon-pet-shop/assets';
 import { useRenderStyles } from '@pokemon-pet-shop/hooks';
 import {
   UiElementLayout,
@@ -19,6 +18,7 @@ import { UiSwitchTheme } from '../component/switch.theme';
 
 import { NAV_FEATURE_FLAG } from './header.const';
 import { styles } from './header.module';
+import pokeshopLogo from './pokeshop-logo.png';
 import useHeaderLogic from './use.header.logic';
 
 const Header = () => {

libs/ui/src/lib-base/ui/modal/modal.module.css

@@ -15,6 +15,7 @@
   height: 100%;
   background: var(--theme-netural-100-mode);
   position: relative;
+  border-radius: var(--theme-radius-8);
 }
 
 .center {

package.json

@@ -3,9 +3,12 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "postinstall": "sh ./tools/scripts/postinstall.sh",
     "prepare": "husky",
-    "lint-staged": "npx lint-staged --verbose"
+    "lint-staged": "npx lint-staged --verbose",
+    "docker-web-build:dev": "docker-compose -f docker-compose.dev.yml build",
+    "docker-web-up:dev": "docker-compose -f docker-compose.dev.yml up",
+    "docker-web-build:prod": "docker-compose -f docker-compose.prod.yml build",
+    "docker-web-up:prod": "docker-compose -f docker-compose.prod.yml up"
   },
   "private": true,
   "lint-staged": {