Error when running a typescript react app with docker compose

Question

I want to run a typescript monorepo with a nodejs backend and a create-react-app frontend. First i am trying to get the frontend running in a container. The application runs locally fine.

I want to change code in the host machine and have the code in the container update automatically.

When I run docker-compose up -d I see the error below.

> [email protected] start
> react-scripts start

Could not find a required file.
  Name: index.js
  Searched in: /app/src   

folder structure

repo
 - backend
 - frontend
   - Dockerfile
   - build
   - public
   - src
     - index.tsx
 - docker-compose.yaml

DockerFile

FROM node
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

docker-compose.yaml

version: "3.8"
services:
   frontend:
      builds: ./frontend
      ports:
       - '3000:3000'
      volumes:
       - './frontend/src:/app/src'
      stdin_open: true
      tty: true
volumes:
   data:
   logs:

edit1: docker-compose.yaml after trying suggested solution

version: "3.8"
services:
   frontend:
      builds: ./frontend
      ports:
       - '3000:3000'
      volumes:
       - './frontend:/app'
       - /app/node_modules
      stdin_open: true
      tty: true
 

error after running docker-compose up -d the container logs show

ENOENT: no such file or directory, open 'app/package.json'

note: Strangely, removing the workdir in the Dockerfile runs the container but installs everything in the top level and not in the /app directory. When I remove volumes entirely the container runs fine as well (still a deal breaker).

edit2: I feel the issue has something to do with the project folder structure and paths. If i place the docker-compose file in the frontend directory the container serves the react app and local code changes auto update in the container.

Answer 1

Assuming your tsconfig.json file is in frontend, it won't be present in your container so you'll be missing crucial parts like

"compilerOptions": {
  "jsx": "react-jsx"
}

A more typical approach is to volume mount the entire application directory and create an anonymous volume mount so as to not clobber node_modules

volumes:
  - ./frontend:/app
  - /app/node_modules # anonymous volume mount