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?
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:
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.
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?
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:
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:
@donstephan Thanks for this! Just out of curiosity, does live reloading work for you in these containers?
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
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!
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.
@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.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.