I have created a nx workspace with 2 react app (client/admin) et 1 server with node.
For each, I have created a DockerFile and at the root of the project I have my docker-compose.yml.
My issue : when I use the command docker-compose up --build, the 3 app runs but for the react-app, I have a blank page whereas with the command nx serve <name_app>, we can see the app. Here is my code :
Dockerfile
FROM node:14-alpine
WORKDIR /home/node/app
COPY ./apps/front-client/src .
COPY ./package.json package.json
RUN npm install --production
EXPOSE 3000
USER node
CMD ["npx", "serve", "-s", ".", "-l", "3000"]
docker-compose.yml
services:
client:
build:
context: .
dockerfile: ./apps/front-client/Dockerfile
ports:
- 3000:3000
volumes:
- ./apps/front-client/src:/app/src
...
The root div doesn't have anything inside. Do you know why ?
Your WORKDIR is set to /home/node/app, which means that the source is placed in /home/nome/app/src.
The npx server -s . -l 3000 is executed in the /home/nome/app/src.
When you mount the volume in docker-compose, you are mounting the application on /app/src, but there is no npx serving from this folder.
Align both folders. By an unwritten convention the proper place is /app/src so change the build file to be WORKDIR /app
Related
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/
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
So I have this working as expected with flask where I used...
volumes:
- ./api:/app
And any files that I change in the api are picked up by the running session. I'd like to do the same for the frontend code.
For node/nginx, I used the below configuration. The only way for the file changes to be picked up is if I rebuild. I'd like for file changes to be picked up as they do for python but a bit stuck on why similar set up is not working for src files. Anyone know why this might be happening?
local path structure
public\
src\
Dockerfile.client
docker--compose.yml
docker file...
FROM node:16-alpine as build-step
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY ./src ./src
COPY ./public ./public
RUN yarn install
RUN yarn build
FROM nginx:alpine
COPY --from=build-step /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf
docker-compose
client:
build:
context: .
dockerfile: Dockerfile.client
volumes:
- ./src:/src
restart: always
ports:
- "80:80"
depends_on:
- api
This is happening because you are building the application.
...
RUN yarn build
...
and them using your build folder:
FROM nginx:alpine
COPY --from=build-step /app/build /usr/share/nginx/html
I believe that what you are looking for is a live reload. You can find a good example here.
But basically what you need is a Dockerfile like this:
# Dockerfile
# Pull official Node.js image from Docker Hub
FROM node:12
# Create app directory
WORKDIR /usr/src/app
# Install dependencies
COPY package*.json ./
RUN npm install
# Bundle app source
COPY . .
# Expose container port 3000
EXPOSE 3000
# Run "start" script in package.json
CMD ["npm", "start"]
your npm start script:
"start": "nodemon -L server/index.js"
and your volume:
volumes:
- ./api:/usr/src/app/serve
I am currently setting up a Docker container that will be used to Debug a NodeJS application. This container needs to support live-reloading (using nodemon) and needs to be a Linux container (my workstation is a Windows machine).
My current setup is the following:
Dockerfile.debug
FROM node:current-alpine
VOLUME /app
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production --registry=http://172.16.102.123:8182/repository/npm/
RUN npm install -g nodemon
ENV NODE_ENV=test
EXPOSE 8000
EXPOSE 9229
CMD [ "nodemon", "--inspect=0.0.0.0:9229", "--ignore", "dist/test/**/*.js", "dist/index.js" ]
docker-compose.yml
version: '3'
services:
app:
build:
context: .
dockerfile: Dockerfile.debug
volumes:
- .:/app
- /app/node_modules
ports:
- 8000:8000
Everything works fine except the dependencies because some of these are plattform specific. That means, it is not possible to simply mount the node_modules directory into the container (like I do with the rest of the codebase). I tried setting up my files in such a way, that the dependencies are different for each platform but I either end up with an empty node_modules directory or with the node_modules directory from the host (the current set up gives me an empty directory). Does anybody know how to fix my problem? I have looked at other solutions (like this one) but they did not work.
I've been working with docker some weeks ago and I was able to hold this issue, stop docker containers and start them over again to see the changes that I had made in my code but now is really anoying because every single change I do have to kill docker and then "docker-compose up".
However my friend is using the same container on his apple machine but when he makes changes to any server side code he does not have to restart his app.
I can see the changes when I go into the container but those changes are not reflected on live(browser).
My Dockerfile
FROM node:8.11.3
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
# Copy application files
COPY tools ./tools/
COPY migrations ./migrations/
COPY seeds ./seeds/
# Attempts to copy "build" folder even if it doesn't exist
COPY .env build* ./build/
RUN npm install -g nodemon
RUN git clone https://github.com/vishnubob/wait-for-it.git
EXPOSE 8080
CMD ["nodemon", "-L", "server"]
My docker-compose.yml
api:
build: ./
hostname: api
container_name: api
ports:
- "${APP_PORT}:3000"
volumes:
- ./:/usr/src/app
env_file:
- ".env"
command: node tools/run.js
Any sugestion?