I'm new to docker so I'm sure I'm missing something.
I'm trying to create a container with a react app. I'm using docker on a Windows 10 machine.
This is my docker file
FROM node:latest
EXPOSE 3000
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
COPY . /app
WORKDIR /app
CMD ["npm","run", "start"]
and this is my docker compose
version: '3.7'
services:
sample:
container_name: prova-react1
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- 3000:3000
environment:
- CHOKIDAR_USEPOLLING=true
- COMPOSE_CONVERT_WINDOWS_PATHS=1
When i start the container if I go on the browser everything is working fine but when i go back to Visual Studio Code and I make a modification to the files and save nothing occurs to the container and even to the website
Related
I am new to docker. I am trying to create a container for react and express and run both the containers on same network using docker compose.
Below is my dockerfile for frontend:
FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm","run","start"]
Below is my dockerfile for backend
FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN NODE_ENV=development npm install
COPY . .
EXPOSE 5000
CMD ["npm","run","server"]
Below is my docker-compose.yml
version: '3'
services:
client:
build:
context: './frontend'
dockerfile: Dockerfile
ports:
- 3000:3000
container_name: react_cont
environment:
- WATCHPACK_POLLING=true
networks:
- mern
volumes:
- ./frontend:/app
depends_on:
- server
server:
build:
context: './backend'
dockerfile: Dockerfile
ports:
- 5000:5000
container_name: express_cont
networks:
- mern
volumes:
- ./backend:/app
networks:
mern:
react container is getting is created and running successfully but the express container is not getting created with an error
sh: nodemon: not found
I had installed nodemon as my dev dependency.
Any help is appreciated. Thanks in advance.
Answering my own Question.
I had installed nodemon globally in my machine but forgot to install it as a dependency for my current project.
Since nodemon was installed globally in my machine i was not getting any errors while i was trying to run my server.js using nodemon. nodemon server.js in scripts did not throw any error while i was in developing my project locally prior moving it to docker container.
But since neither my package.json had nodemon as my dependency and i had not installed it separately in my container nodemon did not get installed and it gave me error.
You can try to delete node_modules folder in your source code and add flag --production=false explicitly to the npm install command. I think it's caching problem.
You may need to install nodemon package globally in your Docker:
RUN NODE_ENV=development npm install && npm --global install nodemon
I am pretty new to Docker, so in order to train it a bit i would like to fully dockerize my app. App consists of 3 main folders:
Folder - backend - where i have php backend of my app
Folder - frontend - where i have vue frontend of my app
File docker-compose.yml - nothing to add i guess :D
Folder - docker -> where i have folders with Dockerfiles for each system -> vue,php,nginx
Dockerfile for nginx:
FROM nginx:1.17.8-alpine
# Copy the public directory
COPY . /app/
# Copy the nginx config file
COPY ./docker/nginx/nginx.conf /etc/nginx/conf.d/default.conf
Dockerfile for php:
FROM php:7.4.3-fpm-alpine3.11
RUN docker-php-ext-install pdo pdo_mysql
COPY ./sunday_league_backend/ /app
VOLUME ["/app"]
And Dockerfile for vue:
FROM node:14.5.0-alpine
WORKDIR /sunday_league_frontend
# Install VueCLI
RUN npm install -g #vue/cli
# Copy project files
COPY . sunday_league_frontend
# Install dependencies
RUN npm install
# Expose the app port
EXPOSE 8080
# Start the app
CMD ["npm", "run", "serve"]
The server and backend part of code are working great. However when i try to add frontend to it i`m getting errno error. It says that the path is wrong npm ERR! path /sunday_league_frontend/package.json
PS What i discovered by trying multiple configurations if i switch Dockerfile for vue like this:
FROM node:14.5.0-alpine
RUN mkdir -p /app
WORKDIR /app
# Install VueCLI
RUN npm install -g #vue/cli
# Copy project files
COPY . /app/
# Install dependencies
RUN npm install
# Expose the app port
EXPOSE 8080
# Start the app
CMD ["npm", "run", "serve"]
And move all files from frontend file into main app folder, so it would be on same level as Folders for backend, docker and docker-compose.yml it will work just great. However it makes the architecture of files look terrible. What am i still missing :/
docker-compose file for better visualisation:
version: '3'
services:
web:
build:
context: .
dockerfile: docker/nginx/Dockerfile
ports:
- '8080:80'
volumes:
- .:/app/
links:
- php
- vue
php:
build:
context: .
dockerfile: docker/php/Dockerfile
volumes:
- .:/app/
vue:
build:
context: .
dockerfile: docker/vue/Dockerfile
ports:
- '8081:8080'
volumes:
- .:/app/
When I start up my docker container it can't find one of my installed dependencies. I've tried removing my build + node_modules folder, going into my docker container terminal and running yarn list and searching for the dependency there (it is). I've also tried running yarn add <dependency and it says it works, but still throws the error error TS2307: Cannot find module '<dependency>' or its corresponding type declarations.
It works fine locally, just not on docker.
Here is my Dockerfile
FROM node:16-alpine AS dev
WORKDIR /app
COPY yarn.lock ./
COPY package.json ./
COPY . .
WORKDIR /app/api
RUN yarn install
RUN yarn build
EXPOSE 8000
CMD ["yarn", "dev"]
And my docker compose:
services:
api:
profiles: ['api', 'web']
container_name: slots-api
stdin_open: true
build:
context: ./
dockerfile: api/Dockerfile
target: dev
environment:
NODE_ENV: development
ports:
- 8000:8000
- 9229:9229 # for debugging
volumes:
- ./api:/app/api
- /app/node_modules/ # do not mount node_modules
- /app/api/node_modules/ # do not mount node_modules
depends_on:
- database
command: yarn dev
My goal is to create docker dev environment for a full-stack app: React, NodeJS and MongoDb (with hot reloading). My current dev environment works, but I noticed that "docker compose up" will only work, if the node_modules are installed on my local machine - it otherwise returns an error that nodemon is not installed, or react-scripts not found. It seems like docker is looking for the node files in my local machine, but it should be installing them in the container during the compose, right?
docker-compose.yml
version: '3.8'
services:
server:
build: ./server
container_name: server_backend
ports:
- '7000:7000'
volumes:
- ./server:/app
client:
build: ./client
container_name: client_frontend
ports:
- '3000:3000'
volumes:
- ./client:/app
stdin_open: true
tty: true
Dockerfile (backend server)
FROM node:16-bullseye-slim
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm install
COPY . .
EXPOSE 7000
CMD ["node", "index.js"]
Dockerfile (frontend)
FROM node:16-bullseye-slim
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
app architecture
- MyApp
-- client
-- server
Can it be that you are copying the whole directory with the node_modules when you execute the COPY . . command, try and either specifiy the directory to copy or add a .dockerignore.
Found this in the documentation, https://docs.docker.com/language/nodejs/build-images/#create-a-dockerignore-file
Between the following tutorials;
Dockerizing create-react-app
Developing microservices - Node, react & docker
I have been able to convert my nodejs app to dockerized micro-services which is up and running and connecting to services. However, my app uses Sqlite/Sequelize and this was working perfectly prior to dockerizing.
With the new setup, I get error;
/usr/src/app/node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:31
throw new Error('Please install sqlite3 package manually');
Error: Please install sqlite3 package manually at new ConnectionManager
(/usr/src/app/node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:31:15)
My question is;
Is it possible to use Sqlite3 with Docker
If so, anyone able to share sample docker-compose.yml and Dockerfile combo that works for this please.
My docker-compose.yml
version: '3.5'
services:
user-service:
container_name: user-service
build: ./services/user/
volumes:
- './services/user:/usr/src/app'
- './services/user/package.json:/usr/src/package.json'
ports:
- '9000:9000' # expose ports - HOST:CONTAINER
web-service:
container_name: web-service
build:
context: ./services/web
dockerfile: Dockerfile
volumes:
- './services/web:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- '3000:3000' # expose ports - HOST:CONTAINER
environment:
- NODE_ENV=development
depends_on:
- user-service
My user/ Dockerfile
FROM node:latest
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
ADD package.json /usr/src/package.json
RUN npm install
# start app
CMD ["npm", "start"]
My web/ Dockerfile
FROM node:latest
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts#1.1.4
RUN npm install gulp -g
# start app
CMD ["npm", "start"]
Many thanks.
Got it. The issue was that my local node_modules were being copied to the host container. Hence in the sqlite3 lib/binding, node-v57-darwin-x64 was there instead of what is expected - node-v57-linux-x64. Hence the mess.
I updated the Dockerfiles and docker-compose.yml as follows:
My docker-compose.yml
services:
user-service:
container_name: user-service
build:
context: ./services/user/
dockerfile: Dockerfile
volumes:
- './services/user:/usr/src/app'
- '/usr/src/node_modules'
ports:
- '9000:9000' # expose ports - HOST:CONTAINER
web-service:
container_name: web-service
build:
context: ./services/web/
dockerfile: Dockerfile
volumes:
- './services/web:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- '3000:3000' # expose ports - HOST:CONTAINER
environment:
- NODE_ENV=development
depends_on:
- user-service
My user/ Dockerfile
FROM node:latest
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/node_modules/.bin` to $PATH
ENV PATH /usr/src/node_modules/.bin:$PATH
# install and cache app dependencies
ADD package.json /usr/src/package.json
RUN npm install
# start app
CMD ["npm", "start"]
Helpful posts
Getting npm packages to be installed with docker-compose