Is there any documentation of how to create nextjs drupal project in docker4drupal or docker containers?

[o771e]

I have managed to accomplish all steps of "Get started", I added into docker-compose:

  node:
    image: wodby/node:$NODE_TAG
    container_name: "${PROJECT_NAME}_node"
    working_dir: /app
    labels:
    - "traefik.http.services.${PROJECT_NAME}_node.loadbalancer.server.port=3000"
    - "traefik.http.routers.${PROJECT_NAME}_node.rule=Host(`node.${PROJECT_BASE_URL}`)"
    expose:
    - "3000"
    volumes:
    - ./:/var/www/html/app
    command: sh -c 'yarn install && yarn run start'
    networks:
      - shared
      - default

I created folder app/ so my file structure looks like this:

app
config
database
vendor
web
.env
.gitignore
composer.json
composer.lock
docker-compose.yml

I enter php container, run node server but I can not see anything at http://localhost:3000/ or drupal.docker.localhost:3000

I edited my traefik like so:

version: '3'

services:
  traefik:
    image: traefik:v2.0
    command: --api.insecure=true --providers.docker --providers.docker.network=shared 
    networks:
      - shared
    ports:
      - '80:80'
      - '8080:8080'
      - '3000:3000'
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

networks:
  shared:
    external:
      name: shared

What am I doing wrong?

[shadcn]

@o771e I'm not familiar with docker4drupal. Can you try the #nextjs channel on Drupal Slack? You might find other people that can help.

[renebakx]

A bit late to the party, but I use Lando as abstraction over Docker composer, and i've created a .lando.yml file that runs both Drupal and NextJS next to each other in a single enviroment.

name: drupal-next
recipe: drupal9
keys: false
config:
  webroot: backend/public
  xdebug: "debug"
  php: '8.1'
  drush: 11
  composer_version: 2
services:
  appserver:
    scanner: false
    excludes:
      - frontend
    overrides:
      environment:
        DRUSH_OPTIONS_URI: 'http://drupal-next.lndo.site'
        DRUSH_OPTIONS_ROOT: '/app/backend/public'
        DB_NAME: 'drupal9'
        DB_USER: 'drupal9'
        DB_PASSWORD: 'drupal9'
        DB_HOST: 'database'
        DB_PORT: '3306'
  nextjs:
      type: node:custom
      scanner: false
      ssl: false
      port: 3000
      dir: /app/frontend
      excludes:
        - backend
      overrides:
        image: node:18
        environment:
          DRUPAL_SITE: 'http://drupal-next.lndo.site'

events:
  post-start:
    - nextjs: npm install -g npm@latest

proxy:
  nextjs:
    - drupal-next-frontend.lndo.site:3000
tooling:
  composer:
    service: appserver
    dir: /app/backend
  drush:
    service: appserver
    cmd: "/app/backend/bin/drush"
  node:
    service: nextjs
    dir: /app/frontend
    description: Run node
  npm:
    service: nextjs
    dir: /app/frontend
    description: Run NPM
  npx:
    service: nextjs
    dir: /app/frontend
    description: Run NPX
  next-dev:
    service: nextjs
    description:  Run development version of your Next App
    dir: /app/frontend
    env:
      NODE_ENV: development
    cmd:
      - npm run dev
  next-build:
    service: nextjs
    description: Production build of your Next App
    dir: /app/frontend
    env:
      NODE_ENV: production
    cmd:
      - npm run build
  next-start:
    service: nextjs
    description: Start the production build of your Next App
    dir: /app/frontend
    env:
      NODE_ENV: production
    cmd: npm run start

This snippet assumes your Drupal site is in the 'backend' directory and the NextJS site is in the frontend directory.

The Environment overrides are just to satisfy my inner lazy child ;)

And for testing purposes I swapped out the 'Lando supported' Node version for the node:18 version. Lando uses the official Node containers straight from Docker hub. But you can safely swap out the nextjs declaration for something less experimental.

  nextjs:
      type: node:16
      scanner: false
      ssl: false
      port: 3000
      dir: /app/frontend
      excludes:
        - backend

[MXTcomunica]

@o771e did you find a solution at the end? I'm in the exact same situation as you...

[ghost]

@MXTcomunica nope, sorry

[2dareis2do]

I am using docker4drupal. If using the https://github.com/chapter-three/next-drupal it includes drupal and you can simply download the tar of docker4drupal, untar, remove the docker-compose.overide.yml there and then use this to launch drupal.

I have added some more info on how to set up on my site https://www.danlobo.co.uk/article/getting-started-drupal-10-and-docker

[2dareis2do]

One issue I see if using docker4drupal is you try to map port 3000 it will not be available to node.

ERROR: for traefik Cannot start service traefik: Ports are not available: listen tcp 0.0.0.0:3000: bind: address already in use

[2dareis2do]

I would recommend using docker4drupal as it has superior support for developers and debugging.

As this is headless it makes sense to run them separately but they can be in the same project or code base if preferred.

I have managed to set up the umami demo and am able to to login etc without issue although in theory the quickstart should allow you to set up very quickly to evaluate the site, but I had issues with freezing, connection reset and documentation.