Skip to content

feat(docker): add Docker support for frontend and backend with development and production configurations #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 4 commits into from
Jul 29, 2025
Merged

feat(docker): add Docker support for frontend and backend with development and production configurations #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c143fca
feat(docker): add Docker support for frontend and backend with develo…
md-asharaf Feb 20, 2025
b482d19
remove unnecessary fields from package.json
md-asharaf Feb 21, 2025
eb2535c
feat(docker): update Dockerfiles to use npm instead of yarn and restr…
md-asharaf Feb 22, 2025
b0be39e
Merge branch 'main' into feature
md-asharaf Jul 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .dockerignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
backend
node_modules
dist
build
.gitignore
.git
.env.*
.github
yarn.lock
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Node modules
node_modules/
package-lock.json
*/yarn.lock
yarn.lock
# Logs
logs
*.log
Expand Down
14 changes: 14 additions & 0 deletions Dockerfile.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
FROM node:20-alpine

WORKDIR /app


COPY package.json .

RUN npm install

Comment on lines +6 to +9
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Lock-file omitted – builds will be slow and non-reproducible

Identical to the backend dev image, copy the lock-file and prefer npm ci:

-COPY package.json .
-RUN npm install
+COPY package*.json ./
+RUN npm ci
🤖 Prompt for AI Agents 
In Dockerfile.dev around lines 6 to 9, the lock-file (package-lock.json or
yarn.lock) is missing, causing slow and non-reproducible builds. Copy the
lock-file into the image alongside package.json and replace `npm install` with
`npm ci` to ensure faster, consistent, and reproducible installs.

COPY . .

EXPOSE 5173

CMD ["npm","run","dev"]
44 changes: 44 additions & 0 deletions Dockerfile.prod
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Stage 1: Build the frontend
FROM node:20-alpine AS build

# Set the working directory
WORKDIR /app

# Copy package.json
COPY package.json .

# Install production dependencies using Yarn
RUN npm install --production
# Copy the rest of the application files
COPY . .

# Build the frontend using Yarn
RUN npm run build

Comment on lines +10 to +17
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Build will fail – --production strips devDependencies needed for vite build

The build stage installs only production deps, but the vite CLI lives in devDependencies; npm run build will therefore exit with ENOENT.

-# Install production dependencies using Yarn
-RUN npm install --production
+# Install all deps required for the build
+COPY package*.json ./
+RUN npm ci

If you want a slim final image, keep npm ci here and afterwards do a separate, lighter stage (or npm prune --production) after the build completes.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# Install production dependencies using Yarn
RUN npm install --production
# Copy the rest of the application files
COPY . .
# Build the frontend using Yarn
RUN npm run build
# Install all deps required for the build
COPY package*.json ./
RUN npm ci
# Copy the rest of the application files
COPY . .
# Build the frontend using Yarn
RUN npm run build
🤖 Prompt for AI Agents 
In Dockerfile.prod around lines 10 to 17, the build fails because `npm install
--production` removes devDependencies, including the `vite` CLI needed for the
build. To fix this, install all dependencies (including devDependencies) before
running `npm run build`, then create a separate lighter stage or run `npm prune
--production` after the build to remove devDependencies for the final image.

# Stage 2: Serve the application with Nginx
FROM nginx:alpine

# Copy the build output from the previous stage to Nginx's serve directory
COPY --from=build /app/dist /usr/share/nginx/html

# Remove the default Nginx configuration file
RUN rm /etc/nginx/conf.d/default.conf

# Create a new Nginx configuration file
RUN echo $'\
server { \n\
listen 3000; \n\
server_name localhost; \n\
root /usr/share/nginx/html; \n\
index index.html; \n\
\n\
location / { \n\
try_files $uri $uri/ /index.html; \n\
} \n\
}' > /etc/nginx/conf.d/default.conf

# Expose port 3000
EXPOSE 3000

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]
5 changes: 5 additions & 0 deletions backend/.dockerignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
.gitignore
.git
.env.*
yarn.lock
20 changes: 20 additions & 0 deletions backend/Dockerfile.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Use a lightweight Node.js Alpine image
FROM node:20-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and yarn.lock files for dependency installation
COPY package.json ./

# Install all dependencies using Yarn
RUN npm install

Comment on lines +7 to +12
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Copy the lock-file and switch to npm ci for deterministic, cache-friendly installs

package-lock.json is not copied into the image, and npm install is used.
Without the lock-file Docker-layer caching breaks whenever only lock data changes, and builds are no longer reproducible.

-# Copy package.json and yarn.lock files for dependency installation
-COPY package.json ./
-
-# Install all dependencies using Yarn
-RUN npm install
+# Copy manifest + lock-file for proper layer caching
+COPY package*.json ./
+
+# Faster, deterministic install
+RUN npm ci
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# Copy package.json and yarn.lock files for dependency installation
COPY package.json ./
# Install all dependencies using Yarn
RUN npm install
# Copy manifest + lock-file for proper layer caching
COPY package*.json ./
# Faster, deterministic install
RUN npm ci
🤖 Prompt for AI Agents 
In backend/Dockerfile.dev around lines 7 to 12, the Dockerfile copies only
package.json but not the package-lock.json, and uses npm install which is less
deterministic. To fix this, copy both package.json and package-lock.json into
the image, then replace npm install with npm ci to ensure deterministic,
cache-friendly installs and better Docker layer caching.

# Copy the rest of the application files
COPY . .

# Expose the port for the application
EXPOSE 5000

# Start the server in dev mode using Yarn
CMD ["npm","run", "dev"]
20 changes: 20 additions & 0 deletions backend/Dockerfile.prod
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Use a lightweight Node.js Alpine image
FROM node:20-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and yarn.lock files for dependency installation
COPY package.json ./

# Install production dependencies using Yarn
RUN npm install --production

Comment on lines +7 to +12
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Production image installs without lockfile and misses NODE_ENV

  1. Lock-file is not copied – image layers break whenever dependencies drift.
  2. npm install --production is fine, but set NODE_ENV=production to ensure downstream libs behave correctly.
  3. Comment still says Yarn.
-# Copy package.json and yarn.lock files for dependency installation
-COPY package.json ./
-# Install production dependencies using Yarn
-RUN npm install --production
+# Copy manifest + lock-file
+COPY package*.json ./
+
+# Install only prod deps in a reproducible way
+ENV NODE_ENV=production
+RUN npm ci --only=production
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# Copy package.json and yarn.lock files for dependency installation
COPY package.json ./
# Install production dependencies using Yarn
RUN npm install --production
# Copy manifest + lock-file
COPY package*.json ./
# Install only prod deps in a reproducible way
ENV NODE_ENV=production
RUN npm ci --only=production
🤖 Prompt for AI Agents 
In backend/Dockerfile.prod around lines 7 to 12, fix the Dockerfile by copying
the lockfile (e.g., yarn.lock or package-lock.json) alongside package.json to
ensure consistent dependency versions. Update the comment to reflect the correct
package manager used (npm, not Yarn). Also, set the environment variable
NODE_ENV=production before running npm install --production to ensure proper
production behavior of dependencies.

# Copy the rest of the application files
COPY . .

# Expose the port for the application
EXPOSE 5000

# Start the server in production mode using Yarn
CMD ["npm","run", "start"]
3 changes: 2 additions & 1 deletion backend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "nodemon server.js",
"dev": "nodemon server.js",
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
Expand Down
70 changes: 70 additions & 0 deletions docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
services:
frontend:
image: frontend
container_name: frontend-container
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "5173:5173"
env_file:
- .env
volumes:
- .:/app
- /app/node_modules
depends_on:
- backend
networks:
- app-network-1
profiles:
- dev
backend:
image: backend
container_name: backend-container
build:
context: ./backend
dockerfile: Dockerfile.dev
ports:
- "5000:5000"
env_file:
- ./backend/.env
volumes:
- ./backend:/app
- /app/node_modules
networks:
- app-network-1
profiles:
- dev
frontend-prod:
image: frontend-prod
container_name: frontend-prod-container
build:
context: .
dockerfile: Dockerfile.prod
ports:
- "3000:3000"
env_file:
- .env
depends_on:
- backend-prod
networks:
- app-network-2
profiles:
- prod
backend-prod:
image: backend-prod
container_name: backend-prod-container
build:
context: backend
dockerfile: Dockerfile.prod
ports:
- "5000:5000"
env_file:
- backend/.env
networks:
- app-network-2
profiles:
- prod
networks:
app-network-1:
app-network-2:
13 changes: 8 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
"preview": "vite preview",
"docker:dev":"docker compose --profile dev up --build",
"docker:prod":"docker compose --profile prod up -d --build"
},
"dependencies": {
"@emotion/react": "^11.11.3",
Expand All @@ -22,7 +24,10 @@
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.3.0",
"react-router-dom": "^6.28.0"
"react-router-dom": "^6.28.0",
"postcss": "^8.4.47",
"autoprefixer": "^10.4.20",
"tailwindcss": "^3.4.14"
Comment on lines +28 to +30
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Duplicate autoprefixer entry

autoprefixer now appears in both dependencies and devDependencies, causing npm/yarn warnings and a larger prod image.

@@
-    "postcss": "^8.4.47",
-    "autoprefixer": "^10.4.20",
-    "tailwindcss": "^3.4.14"
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14"
@@
-    "autoprefixer": "^10.4.20",

Move it to one block (usually devDependencies for build-time CSS processing).

Also applies to: 41-41

🤖 Prompt for AI Agents 
In package.json around lines 28 to 30 and line 41, the package "autoprefixer" is
listed in both dependencies and devDependencies, causing duplication warnings
and increasing production image size. Remove the "autoprefixer" entry from the
dependencies section and keep it only in devDependencies, as it is typically
used for build-time CSS processing.

},
"devDependencies": {
"@eslint/js": "^9.13.0",
Expand All @@ -44,9 +49,7 @@
"jasmine": "^5.9.0",
"passport": "^0.7.0",
"passport-local": "^1.0.0",
"postcss": "^8.4.47",
"supertest": "^7.1.4",
"tailwindcss": "^3.4.14",
"vite": "^5.4.10"
}
}