Decoupled Drupal + Next.js

A Tugboat Preview for a decoupled site with Drupal powering the backend and Next.js powering the front-end, builds and connects the Node.js, PHP, and MariaDB services, then serves the site. The Preview is accessible via the secure Tugboat URL by anyone who has the link. No need for the viewer to configure a local environment.

This configuration and the accompanying Next.js config example addresses out-of-memory problems a project like this may encounter. This code should get you started, but you will need to customize and fill in details to get the configuration working on your project. See also 10 Tips for Writing Your Tugboat YAML Config.

Configure Tugboat

The Tugboat configuration is managed by a YAML file at .tugboat/config.yml in the git repository. Here’s an example decoupled Drupal + Next.js configuration you can use as a starting point, with comments to explain what’s going on:

In this example, we assume a monorepo with the Next.js frontend located in the front-end directory and the Drupal backend in the back-end directory. If the frontend and backend are in different repos, see also Headless Wordpress + React.

 1services:
 2  # The service for the Next.js frontend.
 3  # Located in the `front-end` directory.
 4  nodejs:
 5    image: tugboatqa/node:24
 6    default: true
 7    checkout: true
 8    expose: 3000
 9    depends: php
10
11    commands:
12      init:
13        - mkdir -p /etc/service/node
14        - echo "#!/bin/sh" > /etc/service/node/run
15        - echo "npm run start --prefix ${TUGBOAT_ROOT}/front-end" >> /etc/service/node/run
16        - chmod +x /etc/service/node/run
17
18      update:
19        - npm ci --prefix front-end
20
21      build:
22        - echo "NEXT_PUBLIC_DRUPAL_BASE_URL=$TUGBOAT_DEFAULT_SERVICE_URL" > front-end/.env
23        - npm run build --prefix front-end
24
25  # The service for the Drupal backend.
26  # Located in `back-end` directory.
27  php:
28    image: tugboatqa/php:8.3-apache
29    depends: mysql
30
31    commands:
32      init:
33        - ln -snf "${TUGBOAT_ROOT}/back-end/web" "${DOCROOT}"
34        - ln -snf "${TUGBOAT_ROOT}/.tugboat/settings.local.php" "${DOCROOT}/sites/default/"
35
36        - apt-get update
37        - apt-get install -y libzip-dev
38        - docker-php-ext-configure gd --with-freetype --with-webp --with-jpeg
39        - docker-php-ext-install gd opcache zip
40
41        - a2enmod headers rewrite
42        - service apache2 stop
43        - service apache2 start
44
45        - echo memory_limit=1024M >> /usr/local/etc/php/conf.d/php.ini
46        - echo upload_max_filesize=64M >> /usr/local/etc/php/conf.d/php.ini
47        - echo post_max_size=64M >> /usr/local/etc/php/conf.d/php.ini
48
49      update:
50        - composer -d back-end install --optimize-autoloader
51
52        - mkdir -p "${DOCROOT}/sites/default/files/"
53        - chgrp www-data "${DOCROOT}/sites/default/files"
54
55        - back-end/vendor/bin/drush deploy
56
57      build:
58        - composer -d back-end install --optimize-autoloader
59        - back-end/vendor/bin/drush deploy
60
61  # The service for the database.
62  mysql:
63    image: tugboatqa/mariadb:10.11
64
65    commands:
66      init:
67        - mysql -e "SET GLOBAL max_allowed_packet=536870912;"
68        - echo "max_allowed_packet=536870912" >> /etc/mysql/conf.d/tugboat.cnf
69
70      update:
71        - mysqladmin -f drop tugboat
72        - mysqladmin -f create tugboat
73        - scp example.com/database.sql.gz /tmp/
74        - zcat /tmp/database.sql.gz | mysql tugboat
75        - rm /tmp/database.sql.gz

Configure Next.js

Incorporate the following into your next.config.js.

 1const nextConfig = {
 2  ...
 3  experimental: {
 4    // Disable source maps on Tugboat.
 5    serverSourceMaps: !process.env.TUGBOAT_ROOT,
 6    // Limit CPU (and in turn, memory) usage on Tugboat.
 7    ...(process.env.TUGBOAT_ROOT && { cpus: 1 }),
 8  },
 9  // Disable ESLint and TypeScript on Tugboat.
10  eslint: {
11    ignoreDuringBuilds: !!process.env.TUGBOAT_ROOT,
12  },
13  typescript: {
14    ignoreBuildErrors: !!process.env.TUGBOAT_ROOT,
15  },
16}
17
18module.exports = nextConfig

Want to know more about something mentioned in the comments of this config file? Check out these topics:

Start Building Previews!

Once this Tugboat configuration file is committed to your git repository, you can start building previews!