How to get a React Project running in Docker?

Question

I'm trying to run my react project locally with Docker. Here are the configurations and folder structure of my project

  |- public
  | |- index.html
  |- src
  | |- Routes.jsx #can it be because this is not App.js?
  | |- index.js
  |- docker-compose.yml
  |- Dockerfile
  ...

docker-compose.yml

version: "3.7"
services:
  react-dev:
    container_name: sample_container
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3001:3000"
    volumes:
      - ".:/app"
      - "/app/node_modules"
    environment:
      - NODE_ENV=development

Dockerfile

FROM node:alpine
WORKDIR /app
COPY yarn.lock /app/yarn.lock
RUN yarn install --silent
RUN yarn add react-scripts@3.0.1 -g --silent
ENV PATH /app/node_modules/.bin:$PATH
COPY . /app
RUN yarn
CMD ["yarn", "start"]

I get the successfully build and successfully tagged along with the "Project is running at http....." but when I visit the link, my project is not rendered. I'm sure I am missing something in my Dockerfile for it not to run properly...

Answer 1

You mentioned that you visited the link. But that link was made by app inside the container.

For example The application is now running on http://localhost:3000, 3000 - is a port inside the container. And you mounted it on 3001 port on your machine:

# docker-compose.yml

ports:
  - "3001:3000"

So the correct link is http://localhost:3001