Loading Payload in a Docker Container

[joecaraccio]

I am trying to load payload in a docker container. I couldn't find any examples so I am writing it on my own.

In my compose I expose port 3005.

  # Payload CMS Container
  payloadcms:
    container_name: 'payloadcms_container'
    build: ./backend/payloadcms/.
    volumes:
      - ./backend/payloadcms:/app
      - /app/node_modules/
    ports:
      - 3005:3005
    expose:
      - "3005"
    depends_on:
      - "mongodb"
    external_links:
      - "mongodb"

This instance of payload launches fine. However when I attempt to load in the web browser my page remains blank.

The error message appears:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Does anyone know why this occurs? Does anyone know how to use Payload within a docker container?

[jmikrut]

Hey @joecaraccio — generally this error is caused by a React app having two copies of React somehow. Most often it's seen with npm link situations.

Do you have any custom Payload React components?

Can you think of why you might have two copies of React installed?

That's where I'd start.

Also, I'm not as familiar with Docker + Node (always just run Node apps locally) but the way you're configuring your node_modules within your container may have something to do with it. Maybe someone else could chime in there and / or get an example Docker container up and running for you to look at.

[joecaraccio]

Hmm can't see how that's the case. The docker container comes up, runs npm install on the payload package (which was just the template) and then launches.

I'm sure there is something simple here that I am missing.. I just can't figure out what. Anyone here every time payload in a docker container?

[donstephan]

Here's a functional compose file I have set up for local dev with payload:

version: '3'

services:

  # payload
  payload:
    image: node:14-alpine
    ports:
      - "3000:3000"
    volumes:
      - ./payload:/payload
      - ./payload/node_modules:/payload/node_modules
    working_dir: /payload
    command: sh -c "npm install && npm run dev"
    depends_on:
      - mongo
    environment:
      MONGODB_URI: mongodb://mongo:27017/payload
      PORT: 3000
      NODE_ENV: development
      PAYLOAD_SECRET: TESTING

  # mongo
  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    command:
      - --storageEngine=wiredTiger
    volumes:
      - data:/data/db
    logging:
      driver: none
  
volumes:
  data:

[joecaraccio]

@donstephan Thanks for this! Just out of curiosity, does live reloading work for you in these containers?

[joecaraccio]

ah I guess Nodedemon can be a little finicky over docker. You gotta use legacy watch.. heres the command I used which works

nodemon --legacy-watch --exec node server.js

[jmikrut]

Good stuff everyone. For my own knowledge, what's the reason you'd want to build with Docker locally? To be able to dodge having to have Mongo installed? Just curiosity is all!

[donstephan]

Main focus for me is that it's an expected environment. No matter what machine it's running on, it'll always be running the same version of node, npm, mongo, on the same base image. This also keeps all development environments the same as production environments. No weird gotchas because someones using a different version of node/mongo.

Plus it makes it a lot easier to add other services as well. The Payload compose file I'm playing around with also stands up a nextjs frontend as well as redis for a caching layer. It now just takes one command, docker-compose up to stand up all the services in question. The flexibility it provides is fantastic.

[alexbechmann]

@donstephan You might want to consider VSCode Dev containers

• https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
• https://code.visualstudio.com/docs/remote/create-dev-container#_use-docker-compose

We use this to run payload with mongodb & blob storage images added to the .devcontainer/docker-compose.yml which run when you open the project.

[denolfe]

The latest version of create-payload-app will create a docker-compose file that is ready to use for development 🎉

Here is what it looks like if you're wanting to adapt it to an existing project:

version: '3'

services:

  payload:
    image: node:18-alpine
    ports:
      - "3000:3000"
    volumes:
      - .:/home/node/app
      - node_modules:/home/node/app/node_modules
    working_dir: /home/node/app/
    command: sh -c "yarn install && yarn dev"
    depends_on:
      - mongo
    environment:
      MONGODB_URI: mongodb://mongo:27017/payload
      PORT: 3000
      NODE_ENV: development
      PAYLOAD_SECRET: TESTING

  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    command:
      - --storageEngine=wiredTiger
    volumes:
      - data:/data/db
    logging:
      driver: none

volumes:
  data:
  node_modules: