Heroku react dev Dockefile with permissions issue - reactjs

Question

I'm deploying a dockerized React app to Heroku (via Travis CI, but I don't think that matters). Heroku recommends not running as root in dev, since in production they don't run as root, by adding
RUN adduser -D myuser
USER myuser
However, this Dockerfile, which was running fine until I added that chunk (or similar), now fails:
# pull official base image
FROM node:13.12.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install && npm audit fix --force
# add app
COPY . ./
### ------------------- works without this section ------------------- ###
RUN addgroup -g 1001 -S appuser && \
adduser -u 1001 -S appuser -G appuser && \
chown -R appuser ./
USER appuser
### ------------------------------------------------------------------ ###
# start app
CMD ["npm", "start"]
Docker Desktop outputs:
> react-scripts start
ℹ ｢wds｣: Project is running at http://172.18.0.2/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
Failed to compile.
EACCES: permission denied, open '/app/.eslintcache'
It all points to issues with users and permissions but I don't know if my syntax is wrong or if this is just not what Heroku is actually recommending, but it doesn't work for me.

Answer 1

Still new to Docker so I don't know if this is all conceptually correct but I think I solved it.
First, I thought I got it to work by removing the .:/app volume in docker-compose.yml but then I realized that, by de-linking the host with the image, I lost React's hot reloading. So docker-compose.yml has to look like this:
version: '3.8'
services:
frontend:
container_name: poeclient
stdin_open: true
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app' # required for hot reloading, needs Dockerfile user = local user
- '/app/node_modules'
ports:
- 3001:3000
environment:
- CHOKIDAR_USEPOLLING=true
Also, because my local user id is 1000 I have to use that id in the Dockerfile. Since that Apline image comes with a user named 'node' with that id, I don't have to create one in the Dockerfile:
# pull official base image
FROM node:13.12.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install && npm audit fix --force
# add app with non root owner
COPY . ./
# switch to non-root user 'node' (uid: 1000), which comes with alpine image
# switch now instead of earlier to allow for other commands to be run as root
# for react hot reloading needs to be 1000 because host user is also 1000
USER 1000
# start app
CMD ["npm", "start"]
Despite all this, the .eslintcache file still showed up in the container as belonging to root. So one last thing that was needed was, in my local folder, to chown the .eslintcache from root to my local user (1000) and then the Dockerfile was able to show an .eslintcache that belonged to 1000.