im trying to start my dev react app in Docker and developing it with live reload.
My Dockerfile:
FROM node:16.8.0-bullseye
WORKDIR /usr/src/app
COPY ./package.json .
RUN npm install
RUN npm install -g nodemon
COPY . .
CMD npm run start
My docker-compsoe.yml
version: '3'
services:
app:
build:
dockerfile: ./Dockerfile.dev
volumes:
- ".:/usr/src/app"
- "/usr/src/app/node_modules"
ports:
- 3000:3000
environment:
- CHOKIDAR_USEPOLLING=true
It starts server, but when I edit source code, it doesn't reload. What am I doing wrong?
Start React app in Docker and live reload on file changes
try to use WATCHPACK_POLLING=true instead of CHOKIDAR_USEPOLLING=true
Related
I am trying to run a docker on my React app but it does not connect. Actually I see it is up at address 0.0.0.0:3000, but does not open in a browser. I am new to docker and still figuring out in how it works. How can I connect and open the app?
docker-compose.yml
version: "3"
services:
node:
build: .
image: node:16
container_name: myapp
tty: true
stdin_open: true
command: bash
restart: always
working_dir: /app
volumes:
- ./:/app
ports:
- 3000:3000
Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]
Running at port 3000
e810d9f622c0 node:16 "docker-entrypoint.s…" 5 minutes ago Up 5 minutes 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp
Your docker-compose file contains a number of misunderstandings
When you have both build: and image: docker-compose will build an image based on your dockerfile and tag it with the name you give in image:. However, you name yours node:16 which is not a good idea since that could be mistaken for the official node image.
you have both tty: and stdin_open: set to true. If you want to run node, then there's no need to run it interactively.
Your command: overrides the CMD defined in the Dockerfile, so your npm start command is no longer run.
Setting work_dir: to /app is superfluous since the WORKDIR is already set to /app in the Dockerfile.
Mapping a volume to /app hides everything in the /app path in the docker image. You've probably added this to get hot reload. Doing it this way is not a good idea, since it makes evereything in your Dockerfile that builds the /app directory irrelevant.
That leaves us with
version: "3"
services:
node:
build: .
container_name: myapp
restart: always
ports:
- 3000:3000
Run that and you should be able to go to http://localhost:3000/ and see your app.
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
I'm trying to build a React 16.13.0 app, running in a Docker container (alongside a Django app). I would like to mount my local React directory so that my React docker container reads its files from there so that if I change a file on my local file system, it's automatically picked up by my React docker container. I have this docker-compose.yml file ...
version: '3'
services:
...
client:
build:
context: ./client
volumes:
- /app/node_modules
- ./client:/app
ports:
- '3001:3000'
restart: always
container_name: web-app
environment:
- NODE_ENV=development
- REACT_APP_PROXY=http://localhost:9090
#command: npm run start
depends_on:
- web
...
This is the Dockerfile file in my React directory (client/Dockerfile) ...
FROM node:10-alpine AS alpine
# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /usr/src/app
# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./
# Installs all node packages
RUN npm install
# Finally runs the application
CMD [ "npm", "start" ]
Sadly, this doesn't seem to be working. Changes to my local file system are not getting reflected in my running Docker container. What else should I be doing?
Dockerfile seems ok. Here is portion of docker-compose.yml. Note env. variable CHOKIDAR_USEPOLLING=true at the bottom.
version: '3.7'
services:
react:
container_name: react
build:
context: react/
dockerfile: Dockerfile
volumes:
- './react:/app'
- '/app/node_modules'
stdin_open: true
ports:
- 3000:3000
environment:
- CHOKIDAR_USEPOLLING=true
I'm trying to make that every time a new change is made on the app I do not need to build the app, and then run the docker-compose file. What I'm trying to do is that when I change code in my application (ReactJs) to just go and run docker-compose file, so then docker-compose will build and run it using nginx.
Here's what my docker-compose.yml looks like:
version: '2'
services:
nginx:
image: 'bitnami/nginx:1.14.2'
ports:
- '80:8080'
volumes:
- ./build:/var/www/my-app
- ./nginx.conf:/opt/bitnami/nginx/conf/nginx.conf:ro
Right now with this code, I need to build the application myself running npm run build and then go and run the docker-compose file so it would take the changes.
I don't exactly know how to do it, so I assume I need to create a Dockerfile run npm run build and then call the bitmani/nginx:1.14.2 based on their docs: https://hub.docker.com/r/bitnami/nginx/
FROM node:8.7.0-alpine
RUN npm install
RUN npm run build
docker run --name nginx \
-v /path/to/my_vhost.conf:/opt/bitnami/nginx/conf/vhosts/my_vhost.conf:ro \
-v /path/to/nginx-persistence/nginx/conf/bitnami/certs:/bitnami/nginx/conf/bitnami/certs \
bitnami/nginx:latest
and in docker-compose.yml call build . instead of image: bitnami/nginx.
You should use a stage build for this. Your Dockerfile should look like this:
# Stage 1 - Building image
FROM node:8.7.0-alpine as node
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Stage 2 - Running image
FROM bitnami/nginx:1.14.2
COPY --from=node /usr/src/app/build /var/www/my-app
COPY ./nginx.conf /opt/bitnami/nginx/conf/nginx.conf
And your docker-compose:
version: '3.3'
services:
myApp:
image: myapp:1.0
container_name: my-app
build: .
ports:
- 80:8080
I adapted this from one of my projects so if you have any issues let me know and I'll check them.
I hope it helps.
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"]