Recommended Docker Workflow?

[Buuntu]

It would be good to have a recommended workflow using Docker, for example when working on a full stack application (both frontend and backend). I know Docker is outside of the scope of create-react-app but feel like this is a pretty common workflow, and judging by the popularity of some Stackoverflow threads I think this is common enough that it might warrant a discussion:

https://stackoverflow.com/questions/30043872/docker-compose-node-modules-not-present-in-a-volume-after-npm-install-succeeds
https://stackoverflow.com/questions/38425996/docker-compose-volume-on-node-modules-but-is-empty
https://stackoverflow.com/questions/38758361/create-react-app-with-docker

None of these threads have very clean solutions, since they often significantly increase start/build times or have edge cases when building from scratch and/or updating packages.

I myself am having issue setting this up with docker-compose and hot reloading without jumping through a lot of hoops . Many of the issues stem around node_modules and the fact that create-react-app expects these in src and doesn't allow you to use absolute paths for NODE_PATH to keep node_modules outside of your mounted volume. Basically this old issue: #4928

It would be great if there was a short section in documentation or a README describing how to do this, or if it's too complicated, maybe describing why you shouldn't develop in Docker at all.

[avindra]

@Buuntu the NODE_PATH trick may not work, but the jsconfig / tsconfig option should work for you, it's documented here:

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

[Buuntu]

@Buuntu the NODE_PATH trick may not work, but the jsconfig / tsconfig option should work for you, it's documented here:

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

Setting this breaks all of the imports in the app. They now have to be:

import App from '/src/App';

instead of

import App from 'App';

[Buuntu]

@Buuntu the NODE_PATH trick may not work, but the jsconfig / tsconfig option should work for you, it's documented here:

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

That's for importing libraries in code, it still doesn't solve most of the common issues (linked above) around Docker workflows and node_modules though.

[Vanuan]

I'd say that node_modules is the issue only in OS X, due to the well known performance issue with osxfs.
If you're using ubuntu, just don't try to put node_modules inside the volume, let it be in src.

# docker/docker-compose.yml

  node:
    build: ./node
    volumes:
      - ../:/src
    working_dir: /src
    ports: ["127.0.0.1:3000:3000"]

# docker/node/Dockerfile

FROM node:12.13.0
RUN curl --compressed -o- -L https://yarnpkg.com/install.sh | bash

# docker/start

#!/bin/bash
set -e
cd $(dirname $0)
docker-compose -f docker-compose.yml build node
docker-compose -f docker-compose.yml run --rm --service-ports node yarn start $@

# docker/run

#!/bin/bash
set -e
cd $(dirname $0)
docker-compose -f docker-compose.yml build node
docker-compose -f docker-compose.yml run --rm --no-deps node $@

Usage:

./docker/run yarn install
./docker/start

[Buuntu]

@Buuntu what do you mean "out of source"? You mount the entire source folder. And run yarn install so that node_modules are created inside the mounted folder.

I meant outside of the src folder, sorry.

[Buuntu]

@Buuntu what do you mean "out of source"? You mount the entire source folder. And run yarn install so that node_modules are created inside the mounted folder.

The problem when you mount the node_modules directory as part of the same volume is outlined here: https://stackoverflow.com/questions/30043872/docker-compose-node-modules-not-present-in-a-volume-after-npm-install-succeeds.

[Vanuan]

@Buuntu You don't run npm install from the Dockerfile. You run it from the docker-compose. So no need to mount node_modules at all.

[Buuntu]

@Buuntu You don't run npm install from the Dockerfile. You run it from the docker-compose. So no need to mount node_modules at all.

Wouldn't you have to rebuild node_modules every time on run then?

[Vanuan]

@Buuntu
Nope, because node_modules is stored in your source folder which you mount in docker-compose

[brettmcintosh]

@Vanuan Can you be more specific? How do you run npm install from docker-compose without using it in the container's command and therefore reinstalling each time the container starts?

Even if that works, I'd like to install dependencies at build time so I can take advantage of docker's caching.

[Vanuan]

Given the service is named node:

docker-compose run node npm install

Even if that works, I'd like to install dependencies at build time so I can take advantage of docker's caching.

Good luck with that. It's not the intended use case of docker images.

[Vanuan]

I don't know how to be more specific. I provided docker-compose.yml, Dockerfile and the exact command line. Are you sure you fully understand it? Perhaps you need some docker 101 tutorial

[brettmcintosh]

Thanks for your help @Vanuan. With other languages like Python and Ruby, application dependencies are installed in the image at build time, which allows developers to build the application with just docker build. I realize it's possible to run extra commands afterwards to install dependencies in the source directory, and then mount the directory with those dependencies in the container, but that adds extra complexity and is not the convention with these other languages. What makes javascript/react different?

[Vanuan]

@brettmcintosh JavaScript is different in that changing the node_modules path is generally not supported.

Also, I'm not sure how you would achieve docker build caching without also changing the location of Gemfile and/or requirements.txt. Changing the package.json path is not supported as well.

[brettmcintosh]

FWIW I already have a working config that does this.

# docker-compose.yml
  frontend:
    build:
      context: frontend
      dockerfile: frontend.dockerfile
    command: /frontend/app/run.sh start
    volumes:
      - "./frontend:/frontend/app:cached"

# frontend.dockerfile
FROM node:14

EXPOSE 8000 35729
WORKDIR /frontend
ENV NODE_PATH=/frontend/node_modules
ENV PATH=$PATH:/frontend/node_modules/.bin

COPY package.json /frontend
COPY package-lock.json /frontend
RUN npm install
WORKDIR /frontend/app

COPY ./ /frontend/app

# package.json
...
 "scripts": {
    "start": "NODE_PATH='../' && react-scripts start",
...

To get this running, you just have to run docker-compose up.

This works but has the following issues:

1. @Buuntu's issue with restarting the container. I'm unable to reproduce this issue on linux so maybe it's only an issue on mac.
2. The app's dependencies are stored in /frontend/node_modules but there's a second node modules directory in the working directory (/frontend/app/node_modules) that's created at runtime that contains a .cache directory for eslint-loader and babel-loader. I assume there's a way to configure the location of these cache directories but I don't know how.
3. Using the NODE_PATH env var is deprecated, but I don't know how to use the suggested tsconfig/jsconfig settings to get the same behavior without being forced to use absolute imports.