Scribd
Upload
13 views

I Have A Simple Web Project in React, Node Js And...

The document provides steps to upload a React, Node.js, and MongoDB project to Docker including creating Dockerfiles for the frontend and backend, building the images, and running the containers with options for separate or combined containers.

Uploaded by

Saad Mohamed Saad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

I Have A Simple Web Project in React, Node Js And...

The document provides steps to upload a React, Node.js, and MongoDB project to Docker including creating Dockerfiles for the frontend and backend, building the images, and running the containers with options for separate or combined containers.

Uploaded by

Saad Mohamed Saad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Uploading Your React, Node.

js, and MongoDB Project to Docker

Here's a detailed guide on uploading your project with client (React) and server (Node.js) sides,
along with running it on Docker:

Prerequisites:

● Docker installed: Follow the official instructions for your OS


(https://docs.docker.com/get-docker/).
● Basic understanding of Docker concepts (images, containers).

Steps:

1. Create a Dockerfile for the Node.js Backend:


○ In your project's root directory, create a file named Dockerfile.
○ Add the following content, replacing <your-image-name> with a desired name:
Dockerfile
FROM node:18 # Base image with Node.js 18

WORKDIR /app # Working directory within the container

COPY package*.json ./ # Copy package.json and other relevant


files
RUN npm install # Install dependencies

COPY . . # Copy all project files (except frontend build)

EXPOSE 3000 # Expose the port where your Node.js server listens
(usually 3000)

CMD [ "npm", "start" ] # Command to start your Node.js


application

2. Create a Dockerfile for the React Frontend (optional):


○ If your React frontend is a separate directory, create another Dockerfile within that
directory.
○ Add the following content, replacing <your-frontend-image-name> with a desired name:
Dockerfile
FROM nginx:latest # Base image with Nginx web server

WORKDIR /usr/share/nginx/html # Working directory within the


container

COPY build . # Copy the production build of your React app


(replace with your build command)

EXPOSE 80 # Expose port 80 for web traffic


CMD [ "nginx", "-g", "daemon off;" ] # Keep Nginx process
running

Building the React frontend (optional):


○ Navigate to your React frontend directory.
○ Build the production-ready version using your project's build command (e.g., npm run
build). This creates an out or build folder with optimized files.
3. Build the Docker Images:
○ Open a terminal in your project's root directory.
○ Build the Node.js backend image:
Bash
docker build -t <your-image-name> .

○ If you have a separate React frontend Dockerfile, build it in its directory:


Bash
cd frontend-directory # Navigate to your React frontend
directory
docker build -t <your-frontend-image-name> .

4. Run the Containers (Option 1: Separate Containers):


○ MongoDB: Run a MongoDB container (replace mongo:latest with a specific version if
needed):
Bash
docker run -d --name mongodb mongo:latest

The -d flag runs the container in detached mode, and --name assigns it a name for
easier management.
○ Node.js Backend:
Bash
docker run -d --name backend -p 3000:3000 <your-image-name>

The -p flag maps the container's port (3000) to the host's port (3000), making your
application accessible.
○ React Frontend (optional): If you have a separate frontend image:
Bash
docker run -d --name frontend -p 80:80 <your-frontend-image-name>

This maps the container's port (80) to the host's port (80), allowing access to the
frontend.
5. Run the Containers (Option 2: Multi-stage Build):
○ This approach combines frontend and backend into a single image, reducing size.
However, it requires modifications to your Node.js server to serve the React app's static
content.
○ Modify your Node.js Dockerfile to include these steps after installing dependencies:
Dockerfile
COPY . .
RUN npm run build # Build the React app within the container

RUN mv build/ /usr/share/nginx/html # Move the build output to


Nginx's document root

○ Rebuild the Node.js image.


○ Run the container with a single command, exposing ports 300

You might also like