Start React server container without Nginx [closed] - node.js

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 months ago.
Improve this question
I need advice from someone who really understands React app dockerization.
I will be as brief as I can.
We have 3 containers now -- DB, backend, frontend.
Our Frontend Dockerfile is below:
FROM node:16-buster-slim as builder
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# add app
COPY . ./
RUN yarn build
FROM nginx:1.21.1-alpine
RUN rm -rf /etc/nginx/conf.d
COPY localconf /etc/nginx
COPY --from=builder /app/build/ /usr/share/nginx/html/
WORKDIR /usr/share/nginx/html
COPY ./env-config.* ./
COPY ./env.sh .
RUN chmod +x env.sh
RUN apk add --no-cache bash openssl
RUN chmod +x env.sh
CMD ["/bin/bash", "-c", "env && /usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
The whole problem is that developers can't track changes in real time with this container. They run frontend on the host machine with yarn build && yarn start and when the changes are stable and ready, they build the container.
Now I need help to investigate why new container is not working.
I have reduced the Dockerfile to the following :
FROM node:16-buster-slim
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# add app
COPY . ./
RUN yarn build
CMD ["yarn", "start"]
And to watch changes in real time I added volume at docker-compose.yaml file:
frontend:
container_name: frontend
build:
context: ../../client/project
dockerfile: local.dockerfile
ports:
- "80:80"
- "443:443"
command: yarn start
env_file:
- ../../client/project/.env
volumes:
- ../../client/project:/app/
- /app/node_modules
restart: on-failure
depends_on:
- backend
I don't know why, but application doesn't respond on any request and refuse any connection to localhost:443, where it works fine with Nginx.
So, please, could you tell some best-practices to Deckerize React App without Nginx to check real-time changes?
I know for sure it is not an unusual task, but I didn't find anything with Docs or Google.

Answer 1

When the "yarn start" command is launched, it refers to your "package.json" -> "script" -> "start"
I suggest you install the "nodemon" package like this:
yarn add nodemon
nodemon allows the server to be restarted each time the files are updated
Create the following line in your package.json:
{
"scripts": {
"dev": "nodemon ./bin/www.js",
...
}
...
}
To replace "./bin/www.js" by the entry point of your application
In your Dockerfile change
CMD["yarn", "start"]
by
CMD["yarn", "dev"]
Which would give:
FROM node:16-buster-slim
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# add app
COPY . ./
RUN yarn build
CMD ["yarn", "dev"]