💡[Feature]: Optimize Dockerfile for Production with Multi-stage Build

[shyam-medh]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

Currently, the Dockerfile in the repository is set up primarily for development. It labels itself as a builder but copies all source code and runs npm run dev directly. This results in a very large Docker image that includes dev dependencies and source files.

I would like to implement a true multi-stage Docker build:

1. Stage 1 (Builder): Use the Node.js image to install dependencies (npm ci) and build the Docusaurus static files (npm run build).
2. Stage 2 (Production): Use a lightweight web server image (nginx:alpine), copy only the compiled static files from the builder stage, and serve them.

Additionally, I will update the docker-compose.yml to explicitly target the builder stage so that local development with hot-reloading (npm run dev) continues to work seamlessly.

Use Case

This feature enhances the project infrastructure by making it production-ready. Anyone looking to deploy the recode-website to a cloud provider (like AWS, DigitalOcean, or Azure) using Docker will benefit from a highly optimized, fast, and secure image.

Benefits

1. Massive Reduction in Image Size: By dropping the source code and node_modules from the final image, the container size will drop significantly.
2. Better Security: The final container will only contain static files and an Nginx server, eliminating Node.js runtime vulnerabilities in production.
3. Improved Performance: Serving static files via Nginx is much faster and more efficient than running a Node.js development server (npm run dev) in production.

Add ScreenShots

No response

Priority

High

Record

• I have read the Contributing Guidelines
• I want to work on this issue
• I am a part of gssoc26

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[github-actions]

Thanks for opening this issue. To help maintainers review it faster, please add the missing details below:

• Steps to reproduce the issue or current behavior of the Dockerfile.
• Expected behavior after implementing the feature.
• Any technical constraints or specific requirements for the multi-stage build.
• Confirmation on the programming language and versions used (e.g., Node.js version).

[shyam-medh]

Here are the missing details requested:

• Current behavior of the Dockerfile: The Dockerfile currently builds a single-stage image based on node:20-alpine. It copies all source code, installs development dependencies, and runs npm run dev (a development server) instead of building and serving the static site. This results in a heavy image that isn't optimized for production.
• Expected behavior after implementing the feature: The Dockerfile will use a multi-stage approach. Stage 1 will use Node.js to run npm run build to generate the static files. Stage 2 will use nginx:alpine to serve only the build/ folder. The final Docker image will be drastically smaller, faster, and more secure.
• Any technical constraints or specific requirements: Since docker-compose.yml is used for local development with hot-reloading, it must be updated to explicitly specify target: builder. This ensures local development is not broken by the new production stages.
• Confirmation on the programming language and versions used:
  • Node.js v20 (as currently defined in the Dockerfile)
  • Nginx (alpine version for Stage 2)
  • React/Docusaurus 3

[aaniya22]

pls assign this to me under gssoc

[github-actions]

👤 Issue assigned to @shyam-medh.