[docker] feat: Docker FE build

.github/workflows/frontend-system-tests.yml

@@ -44,7 +44,7 @@ jobs:
     - name: Install Playwright
       run: |
         cd ./playwright
-        npm install
+        npm ci
         npx playwright install chromium
 
     - name: Run Playwright Tests

.github/workflows/react-component-tests.yml

@@ -34,3 +34,18 @@ jobs:
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
         lcov-file: ./frontend/coverage/lcov.info
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+
+    - name: Login to DockerHub
+      uses: docker/login-action@v1 
+      with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - name: Build and push Docker image
+      run: |
+          npm run docker:build
+          docker tag notes-app:latest ${{ secrets.DOCKERHUB_USERNAME }}/notes-app-fe:latest
+          docker push ${{ secrets.DOCKERHUB_USERNAME }}/notes-app-fe:latest

backend/Dockerfile

@@ -11,7 +11,7 @@ WORKDIR /usr/src/app
 COPY package*.json ./
 
 # Install the application dependencies
-RUN npm install
+RUN npm ci
 
 # Required for prisma
 RUN apk add openssl3
@@ -34,7 +34,7 @@ RUN npx prisma generate
 RUN npm run build
 
 # Expose the port that the application will run on
-EXPOSE 5001
+EXPOSE 5000
 
 # Command to run the application
 CMD ["node", "dist/index.js"]

backend/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "note-app-be",
+  "name": "notes-app-be",
   "version": "1.0.0",
-  "description": "",
+  "description": "Notes App Express Backend",
   "main": "dist/index.js",
   "scripts": {
     "test:system": "npx vitest **/system/*.spec.ts",
@@ -18,7 +18,7 @@
     "prisma": "npx prisma migrate dev --name init",
     "seed": "npx ts-node prisma/seed.ts"
   },
-  "author": "",
+  "author": "Dave Gordon<[email protected]>",
   "license": "ISC",
   "devDependencies": {
     "@types/cors": "2.8.17",

frontend/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+build
+.dockerignore
+Dockerfile
+Dockerfile.dev

frontend/Dockerfile

@@ -0,0 +1,35 @@
+# Use an official Node.js runtime as the base image
+FROM node:14
+
+# Set the working directory in the Docker container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install the app dependencies
+RUN npm install
+
+# Copy the app source code to the working directory
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Use an official lightweight Node.js runtime as the final base image
+FROM node:14-alpine
+
+# Set the working directory in the Docker container
+WORKDIR /usr/src/app
+
+# Install serve to serve the app
+RUN npm install -g serve
+
+# Copy the build output from the previous stage
+COPY --from=0 /usr/src/app/build .
+
+# Expose port 5000 for the app
+EXPOSE 3000
+
+# Start the app
+CMD ["serve", "-s", ".", "-l", "3000"]

frontend/package.json

@@ -1,7 +1,8 @@
 {
-  "name": "notes-app",
+  "name": "notes-app-fe",
   "version": "1.0.0",
-  "private": true,
+  "description": "Notes App React Frontend",
+  "author": "Dave Gordon<[email protected]>",
   "dependencies": {
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "13.5.0",
@@ -10,9 +11,9 @@
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "axios": "1.6.5",
-    "react": "^18.2.0",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-loader-spinner": "^6.1.6",
+    "react-loader-spinner": "6.1.6",
     "react-scripts": "5.0.1",
     "typescript": "4.9.5",
     "undici": "6.2.1",
@@ -23,7 +24,10 @@
     "build": "react-scripts build",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "docker:build": "docker build -t notes-app-fe .",
+    "docker:up": "docker run -p 3000:3000 notes-app-fe",
+    "docker:down": "docker stop notes-app"
   },
   "eslintConfig": {
     "extends": [
@@ -44,7 +48,7 @@
     ]
   },
   "devDependencies": {
-    "@mswjs/data": "^0.16.1",
+    "@mswjs/data": "0.16.1",
     "@testing-library/jest-dom": "6.2.0",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "1.1.3",