DEV Community

Cover image for Dockerize full stack React app
Thi Nguyen
Thi Nguyen

Posted on • Edited on

Dockerize full stack React app

Say you have finished your React project and you want to run it but you don't want to do it locally, what should you do? Your codebase is on github - great! We need to find a different way to publish the project remotely. This is useful if someone wanted to run the service from their machine, here comes Docker - arguably the most useful tool ever created haha jk. We just need to fetch the docker container, run it and we have our service ready .

This is the structure of my app

my-app
|_server
|__client
Enter fullscreen mode Exit fullscreen mode

We need to create separate Dockerfile for client and server app. I also used a postgresql database hence we need to set it up.

In the client, create a file called Dockerfile

FROM node:16

WORKDIR /usr/app

COPY package*.json ./

RUN npm ci -qy
RUN npm run build

COPY . .

EXPOSE 3000
Enter fullscreen mode Exit fullscreen mode

Next step is to build the image and push it to Dockerhub.
Run the following commands

docker build . -t username/my-app-react
docker push username/my-app-react
Enter fullscreen mode Exit fullscreen mode

Navigate to server folder, create another Dockerfile with the following content

FROM node:16
WORKDIR /usr/src/app

COPY package*.json ./

RUN npm ci --only=production
COPY . .
EXPOSE 8800
CMD [ "node", "server.js" ]
Enter fullscreen mode Exit fullscreen mode

Repeat the step to build and push the image

docker build . -t username/my-app-api
docker push username/my-app-api
Enter fullscreen mode Exit fullscreen mode

Now we need a docker-compose file to define and tell docker to launch all the necessary services for our full stack app, including the database.

Navigate to the root directory, in my case it was the server folder, create a docker-compose.yml file, add the following

version: '3.8'
services:
  pgdatabase:
    image: postgres:14.1-alpine
    restart: unless-stopped
    env_file: ./.env.development
    ports:
      - '5432:5432'
    volumes: 
      - db:/var/lib/postgresql/data
  backend:
    depends_on:
      - pgdatabase
    image: "username/my-app-api"
    env_file:
        "./.env.development"
    build:
      context: ./
      dockerfile: ./Dockerfile
    ports:
      - "8800:8800"
  frontend:
    depends_on:
      - backend
    image: "username/my-app-react"
    env_file:
        "./social-app-client/.env"
    build:
      context: ./client
      dockerfile: ./Dockerfile
    ports:
      - "3000:3000"
    links:
      - "backend:be"
volumes: 
  db:
Enter fullscreen mode Exit fullscreen mode

From the server folder, start up docker-compose

docker-compose -f docker-compose.yml up
Enter fullscreen mode Exit fullscreen mode

Image of Bright Data

Maintain Seamless Data Collection – No more rotating IPs or server bans.

Avoid detection with our dynamic IP solutions. Perfect for continuous data scraping without interruptions.

Avoid Detection

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay