React app refuses connection when dockerised - reactjs

Question

version: "1.0.0"
services:
########################################################################################################
############################################# VALIDLY #################################################
########################################################################################################
validly-studio:
build:
context: ./studio
dockerfile: Dockerfile
volumes:
- type: bind
source: ./studio
target: /app
- /app/node_modules
restart: unless-stopped
ports:
- 3000:3000
networks:
- validly
networks:
validly:
above is my docker-compose.yml file
FROM node:16.14-alpine
# set working directory
WORKDIR /app
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
# add app
COPY . ./
# start app
CMD ["npm", "start"]
this is my Dockerfile.
docker builds the react app and it prompts me to goto localhost:3000 where the app is running. But when I goto localhost:3000. I shows connection refused.

Answer 1

In your Dockerfile you copy in folder App everything to app/
And in your docker-compose you map /app to /app/node_modules.
This will not work.
Choose 1 of the two, and my instinct (and many error in the past) tell me that you should build everything in Dockerfile, including copying node_modules, and don't touch it in docker-compose.
Dockerfile
Template Dockerfile for React: (this one with NextJS environment, which makes it only more complex)
# Dependencies Container
FROM node:lts-alpine3.12 AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
# Here we create node_modules
COPY package.json ./
COPY package-lock.json ./
RUN npm install -g npm#7.24.0 --no-update-notifier
RUN npm --version
RUN npm ci --no-update-notifier
# Rebuild the source code only when needed
FROM node:lts-alpine3.12 AS builder
WORKDIR /app
COPY . .
# Here we copy node_modules from previous intermediate container
COPY --from=deps /app/node_modules ./node_modules
RUN npm install -g npm#7.24.0 --no-update-notifier
RUN npm --version
RUN node -v
RUN npm run build --no-update-notifier
# Production Image
FROM node:16-bullseye AS runner
WORKDIR /app
ENV NODE_ENV production
# Here we only copy. No building needed, keeps the image small.
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/package-lock.json ./package-lock.json
RUN addgroup -gid 1001 nodejs
RUN adduser -uid 1002 nextjs
RUN adduser nextjs nodejs
RUN chown -R nextjs:nodejs /app/.next
USER nextjs
docker-compose.yml
Here a template docker-compose.yml using the above Dockerfile
version: "3.9"
services:
webshop:
build:
context: ./build
dockerfile: Dockerfile_webshop
image: mywebshop
restart: "no"
container_name: MyWebshop
command: ["npm", "start"]
As you see, no volumes needed.