Headless Wordpress + React

 1services:
 2  node:
 3    image: tugboatqa/node:14
 4    expose: 3000
 5    checkout: true
 6    depends: php
 7    commands:
 8      init:
 9        # Update with the frontend repo's .git URL.
10        - git clone https://github.com/example.git
11        - npm install -g serve
12      build:
13        - cd headless-wordpress-frontend && git pull
14        - echo "REACT_APP_GRAPHQL_URI=$TUGBOAT_DEFAULT_SERVICE_URL/graphql" > headless-wordpress-frontend/.env.local
15        - cd headless-wordpress-frontend && yarn install && yarn build
16      start:
17        - serve -s headless-wordpress-frontend/build -l 3000 &
18  php:
19    default: true
20    image: tugboatqa/php:8.2-apache
21    depends: mysql
22    commands:
23      init:
24        # Install prerequisite packages
25        - apt-get update
26        - apt-get install -y rsync
27
28        # Turn on URL rewriting.
29        - a2enmod rewrite
30
31        # Install PHP mysqli extension
32        - docker-php-ext-install mysqli
33
34        # Install wp-cli
35        - curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
36        - chmod +x wp-cli.phar
37        - mv wp-cli.phar /usr/local/bin/wp
38
39        # Link the docroot
40        - ln -snf "${TUGBOAT_ROOT}/docroot" "${DOCROOT}"
41
42        # Configure wordpress to work with tugboat
43        - wp --allow-root --path="${DOCROOT}" config create --dbhost=mysql --dbname=tugboat --dbuser=tugboat
44          --dbpass=tugboat --force
45
46        # Update permalinks to remove the index.php.
47        - wp --allow-root --path="${DOCROOT}" option set permalink_structure /%postname%/
48        - wp --allow-root --path="${DOCROOT}" rewrite flush --hard
49
50      update:
51        # Import uploads
52        - tar -C /tmp -zxf uploads.tar.gz
53        - rsync -av --delete /tmp/uploads/ "${TUGBOAT_ROOT}/docroot/wp-content/uploads/"
54
55        # Cleanup
56        - apt-get clean
57        - rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
58
59      build:
60        - |
61          set -e
62          if test -z "${TUGBOAT_BASE_PREVIEW}"; then
63            wp --allow-root --path="${DOCROOT}" search-replace example.com "${TUGBOAT_SERVICE_URL_HOST}" --skip-columns=guid
64          else
65            wp --allow-root --path="${DOCROOT}" search-replace "${TUGBOAT_BASE_PREVIEW_URL_HOST}" "${TUGBOAT_SERVICE_URL_HOST}" --skip-columns=guid
66          fi
67        - wp --allow-root --path="${DOCROOT}" plugin install wp-graphql --activate
68
69      clone:
70        - wp --allow-root --path="${DOCROOT}" search-replace "${TUGBOAT_BASE_PREVIEW_URL_HOST}"
71          "${TUGBOAT_SERVICE_URL_HOST}" --skip-columns=guid
72
73    urls:
74      - /
75      - /about/
76      - /contact/
77      - /tugboat-engines-typically-produce-680-to-3400-hp/
78
79    visualdiff:
80      threshold: 90
81
82  mysql:
83    image: tugboatqa/mysql:5
84    checkout: true
85    commands:
86      update:
87        - zcat database.sql.gz | mysql tugboat