I am using Docker 20.10.12 and docker-compose v2.2.3 and I want to enable hot reload in my react application, environment windows 11.
My Dockerfile
FROM node:alpine
WORKDIR /app
COPY ./package.json ./
COPY ./package-lock.json ./
RUN npm install
COPY ./ ./
CMD [ "npm", "run", "start" ]
My docker-compose.yml
version: "3"
services:
frontend:
build:
context: .
dockerfile: Dockerfile.dev
environment:
CHOKIDAR_USEPOLLING: "true"
volumes:
- /app/node_modules
- ./:/app
ports:
- 3000:3000
I've even tried to use this command docker run -it -p 3000:3000 -v /app/node_modules -v "$(pwd):/app" sha256:c20d9ef0854b483 but it didn't work.
If you know how I can achieve this, you can help me.
Related
I have some issues with docker. It's my first time and I don't understand everything.
I use it for my front: React and ViteJS, and for my backend express/MySQL. 1 folder for the front and 1 folder for the back.
If I understand correctly, I need 1 docker file for each folder, and in the parent one docker-compose.yml, right?
They are my docker file for front :
FROM node:16 as build
WORKDIR /src
COPY package*.json ./
RUN npm install --silent
COPY . .
RUN npm run build
FROM nginx
COPY --from=build /src/build /usr/share/nginx/html
EXPOSE 80
and the back :
FROM node:16 AS production
WORKDIR /node
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "start"]
The docker-compose :
version: "3.9"
services:
frontend:
build:
context: ./FindMeAStreamer
dockerfile: Dockerfile.prod
ports:
- "5173:80"
# env_file:
# - ./FindMeAStreamer/.env
environment:
- NODE_ENV=production
backend:
build:
context: ./FindMeAStreamer_server
dockerfile: Dockerfile.prod
ports:
- "3000:3000"
# env_file:
# - ./FindMeAStreamer_server/.env
environment:
- DB_HOST=db
- DB_USER=root
- DB_PASSWORD=secret-pw
- DB_DATABASE=findmeastreamer
restart: always
depends_on:
- db
db:
image: mysql:5.7
restart: always
environment:
- MYSQL_DATABASE=findmeastreamer
# - MYSQL_USER=root
# - MYSQL_PASSWORD=secret-pw
- MYSQL_ALLOW_EMPTY_PASSWORD='no'
- MYSQL_ROOT_PASSWORD=secret-pw
ports:
- "3306"
# volumes:
# - my-database:/var/lib/mysql
# networks:
# - mynetwork
adminer:
image: adminer
restart: always
ports:
- 8081:8081
When I do on local npm run build, viteJS make a new folder : dist, with minify code. Inside it's :
---dist
-assets (inside my .png and two index like index-e3d58a7f.js, same for CSS )
index.html
favicon.png
I use this command to launch the docker-compose : docker-compose -f docker-compose-prod.yml up -d --build
But when I check the front containers's logs, i see all my files, but index are not correct. For me, my dockerfile don't copy correctly my folder.. and nothing works. Can you help me to understand why docker doesn't work? :(
I try :
Modify my docker file in the frontend, and change workdir to other names.
Try to add a nginx.conf.
Im building out a docker dev environment and moving a bunch of existing apps into docker containers.
I have a an old react app which compiles using webpack, it seems no matter what I do in the docker compose file that it still remains unreachable from my host machine (MacOS)
running this works successfully, but not from the host
$ docker exec -it <container id> /bin/sh
# curl localhost:8080
<!DOCTYPE html>
<html>
...
</html>
Dockerfile
# syntax=docker/dockerfile:1
FROM node:16.16.0-buster as base
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY yarn.lock ./
COPY webpack.common.js ./
## import prod, because after install the build script tests if it can compile successfully
COPY webpack.prod.js ./
COPY . ./
RUN yarn install
EXPOSE 8080
FROM base as dev
CMD ["yarn", "run", "dev"]
Option 1) Doesnt Work
version: '3.8'
services:
backbone-ui:
network_mode: host
build:
context: .
container_name: backbone-ui
ports:
- target: 8080
host_ip: 127.0.0.1
published: 8080
protocol: http
mode: host
volumes:
- ./:/app
command: yarn run dev
Option 2) Doesnt Work
version: '3.8'
services:
backbone-ui:
network_mode: host
build:
context: .
container_name: backbone-ui
ports:
- 8080:8080
volumes:
- ./:/app
command: yarn run dev
Option 3) Doesnt Work
version: '3.8'
services:
backbone-ui:
build:
context: .
container_name: backbone-ui
ports:
- 8080:8080
volumes:
- ./:/app
command: yarn run dev
Failed Attempt
Dockerfile (paired with Option 2 compose.yml)
# syntax=docker/dockerfile:1
FROM node:16.16.0-buster as base
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY yarn.lock ./
COPY webpack.common.js ./
COPY webpack.prod.js ./
COPY . ./
RUN yarn install
FROM base as dev
EXPOSE 8080
CMD ["yarn", "run", "dev"]
Failed Attempt
updated package.json script
"dev": "webpack-dev-server --open --config webpack.dev.js --hot --host 0.0.0.0"
confirmed after rebuilding that the app is listening on 0.0.0.0:8080, but failed to respond on the host
$ docker exec -it <container id> /bin/sh
# curl 0.0.0.0:8080
<!DOCTYPE html>
<html>
...
</html>
I want to run my Next.js code using docker. Here is my code structure
When I build it, it returns success like this.
But, when I open it, I get this...
my docker.compose.yaml file contain this...
version: '3.8'
services:
web:
image: 'app'
ports:
- '3000:3000'
container_name: app-next
build:
context: web
dockerfile: Dockerfile
volumes:
- ./web:/usr/src/app
- /usr/src/app/node_modules
- /usr/src/app/.next
my Dockerfile contain this...
FROM node:12-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json yarn.lock /usr/src/app/
RUN yarn install
EXPOSE 3000
CMD ["yarn", "dev"]
my browser console contain this...
Anyone can fix this?
Thanks
it's my first time using Docker let alone docker-compose.
Could I get some insight on my docker-compose file to help me get both docker containers up and running.
Folder Structure
Both of my Dockerfiles work for running each application ( React or Flask ) separately. For example:
React Container
docker build -t wedding-client .
docker run -dp 3030:3030 wedding-client
Flask Container
docker build -t wedding-server .
docker run -dp 5030:5030 wedding-server
So I'm thinking my docker-compose file is the issue. Here are the docker files:
client/DockerFile
FROM node:alpine as build
WORKDIR /app
COPY . /app
RUN npm install
RUN npm run build
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=build /app/build .
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 3030
CMD ["nginx", "-g", "daemon off;"]
server/DockerFile
FROM python:3.9
WORKDIR /app
COPY . /app
RUN pip install -r requirements.txt
ENV FLASK_APP server.py
EXPOSE 5030
CMD ["python", "server.py"]
docker-compose.yml
version: '3'
services:
server:
container_name: wedding-server
build:
context: server/
dockerfile: Dockerfile
network_mode: host
ports:
- 5030:5030
client:
container_name: wedding-client
build:
context: client/
dockerfile: Dockerfile
network_mode: host
ports:
- 3030:3030
depends_on:
- server
Docker Output:
Client Docker File
# Stage 0, "build-stage", based on Node.js to build the frontend
FROM node:alpine as build
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . /app/
RUN npm run build
# Stage 1, based on NGINX to provide a configuration to be used with react-router
FROM nginx:alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/conf.d
# RUN apk update && apk add bash
EXPOSE 3005
CMD ["nginx", "-g", "daemon off;"]
Flask Docker File
FROM python:3.9
RUN mkdir /server
WORKDIR /server
COPY requirements.txt /server/requirements.txt
RUN pip install --upgrade pip && \
pip install -r requirements.txt
COPY . .
docker-compose.yml
version: '3'
services:
api:
build: server
command: "flask run --host=0.0.0.0 --port=5005"
environment:
- FLASK_ENV=production
- FLASK_APP=server.py
ports:
- "5005:5005"
client:
build: client
ports:
- '3005:3005'
links:
- api
depends_on:
- api
I am facing an issue with npm test not live reloading when running docker-compose up --build.
My current setup is Window 10 Home, running docker toolbox. With CHOKIDAR_USEPOLLING=true added to the .env file in my project root. Volumes were also mounted according.
I have two services web and tests, running npm start and npm test respectively. The web service live reload upon changes but not the tests service, when adding new test cases.
Testing npm test locally, it live reloads just fine upon adding new test cases.
docker-compose.yml:
version: '3'
services:
web:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- /app/node_modules
- .:/app
tests:
build:
context: .
dockerfile: Dockerfile.dev
volumes:
- /app/node_modules
- .:/app
command: ["npm", "test"]
Dockerfile.dev:
FROM node:alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
CMD ["npm", "start"]
In your docker-compose.yml, try replacing
command: ["npm", "test"]
for
command: ["npm", "run", "test"]