Loading Payload in a Docker Container

default discord avatar
joecaraccio
last year
1 3

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.
image

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?

  • discord user avatar
    denolfe
    Payload Team
    11 months ago

    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:
    
  • discord user avatar
    jmikrut
    Payload Team
    last year

    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.

    1 reply
    default discord avatar
    joecaraccio
    last year

    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?

  • default discord avatar
    donstephan
    last year

    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:
    
    6 replies
    discord user avatar
    DanRibbens
    Payload Team
    last year

    I just tweaked your docker-compose.yml to work with a new create-payload-app setup. Thanks for sharing!

    version: '3'
    
    services:
    
      # payload
      payload:
        image: node:14-alpine
        ports:
          - "3000:3000"
        volumes:
          - .:/home/node/app
          - node_modules:/home/node/app/node_modules
        working_dir: /home/node/app/
        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:
      node_modules:
    default discord avatar
    joecaraccio
    last year

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

    default discord avatar
    joecaraccio
    last year

    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

    discord user avatar
    jmikrut
    Payload Team
    last year

    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!

    default discord avatar
    donstephan
    last year

    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.

    default discord avatar
    alexbechmann
    last year

    @donstephan You might want to consider VSCode Dev containers

    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.

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.