Merge pull request #229 from wunderio/NEX-155

NEX-155: ddev support

.ddev/addon-metadata/elasticsearch/manifest.yaml

@@ -0,0 +1,9 @@
+name: elasticsearch
+repository: ddev/ddev-elasticsearch
+version: v0.3.2
+install_date: "2024-06-07T20:45:48+03:00"
+project_files:
+    - elasticsearch/
+    - docker-compose.elasticsearch.yaml
+global_files: []
+removal_actions: []

.ddev/commands/web/generate-oauth-keys.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+## Description: Helper script to generate oath keys as part of the next drupal starterkit setup.
+## Usage: generate-oauth-keys
+## Example: "ddev  generate-oauth-keys"
+
+cd drupal/oauth
+pwd
+openssl genrsa -out private.key 2048
+openssl rsa -in private.key -pubout > public.key
+chmod 600 public.key

.ddev/commands/web/install-recipe.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+## Description: Helper script to install a recipe with ddev.
+## Usage: install-recipe <directory name of recipe inside /recipes>
+## Example: "ddev  install-recipe wunder_next_setup"
+
+recipe_directory_name="$1"
+
+if [ $# -eq 0 ]; then
+ echo "Usage: specify the directory name inside of drupal/recipes/ that you want to install:"
+ cd drupal/recipes/
+ ls -d -- */
+ exit 1
+fi
+
+cd drupal/web
+
+php core/scripts/drupal recipe ../recipes/"$recipe_directory_name"
+
+../vendor/bin/drush cr

.ddev/config.yaml

@@ -0,0 +1,53 @@
+name: next-drupal-starterkit
+type: drupal
+docroot: drupal/web
+composer_root: drupal
+nodejs_version: "20"
+php_version: "8.2"
+webserver_type: nginx-fpm
+xdebug_enabled: false
+additional_hostnames: []
+additional_fqdns: []
+database:
+    type: mariadb
+    version: "10.11"
+use_dns_when_possible: true
+composer_version: "2"
+web_environment:
+  # This is the secret that is used by the backend to tell the frontend
+  # to revalidate specific paths. The values need to match both in frontend
+  # and backend.
+  - DRUPAL_REVALIDATE_SECRET=revalidate_secret_not_secure_used_only_locally
+  # This is the secret that is used by the frontend to issue calls to Drupal.
+  # The values need to match both in frontend and backend.
+  - DRUPAL_CLIENT_SECRET=drupal_client_secret_not_secure_used_only_locally
+  # The client id, specified in the consumer on the Drupal side.
+  - DRUPAL_CLIENT_ID=drupal-client-id
+  # The client id for the unprivileged user, specified in the consumer on the Drupal side.
+  - DRUPAL_CLIENT_VIEWER_ID=drupal-client-viewer-id
+  - DRUPAL_CLIENT_VIEWER_SECRET=drupal_client_viewer_secret_not_secure_used_only_locally
+  # URL OF THE FRONTEND SITE:
+  # This needs to match the proxy value for the node service
+  # so if you change it, remember to change it here as well.
+  - WUNDER_NEXT_FRONTEND_URL=https://next-drupal-starterkit.ddev.site:3000
+  - ENVIRONMENT_NAME=ddev
+  - HASH_SALT=notsosecurehashnotsosecurehashnotsosecurehash
+  - NEXT_PUBLIC_DRUPAL_BASE_URL=https://next-drupal-starterkit.ddev.site
+  - NEXT_IMAGE_DOMAIN=next-drupal-starterkit.ddev.site
+  - NEXT_PUBLIC_FRONTEND_URL=https://next-drupal-starterkit.ddev.site:3000
+    # Environment variables for next_auth:
+  - NEXTAUTH_SECRET=nextauth_secret_not_secure_used_only_locally
+  - NEXTAUTH_URL=https://next-drupal-starterkit.ddev.site:3000
+
+corepack_enable: false
+web_extra_exposed_ports:
+  - name: "Next.js"
+    container_port: 3000
+    http_port: 2999
+    https_port: 3000
+
+hooks:
+  post-start:
+    - exec: "elasticsearch-plugin install analysis-icu"
+      service: elasticsearch
+    - exec: "cd next && npm i"

.ddev/docker-compose.elasticsearch.yaml

@@ -0,0 +1,28 @@
+#ddev-generated
+services:
+  elasticsearch:
+    container_name: ddev-${DDEV_SITENAME}-elasticsearch
+    hostname: ${DDEV_SITENAME}-elasticsearch
+    image: elasticsearch:7.17.14
+    expose:
+      - "9200"
+      - "9300"
+    environment:
+      - cluster.name=docker-cluster
+      - discovery.type=single-node
+      - bootstrap.memory_lock=true
+      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
+      - VIRTUAL_HOST=$DDEV_HOSTNAME
+      - HTTP_EXPOSE=9200:9200
+      - HTTPS_EXPOSE=9201:9200
+    labels:
+      com.ddev.site-name: ${DDEV_SITENAME}
+      com.ddev.approot: $DDEV_APPROOT
+    volumes:
+      - elasticsearch:/usr/share/elasticsearch/data
+      - ".:/mnt/ddev_config"
+    healthcheck:
+      test: ["CMD-SHELL", "curl --fail -s elasticsearch:9200"]
+
+volumes:
+  elasticsearch:

.ddev/docker-compose.elasticsearch8.yaml

@@ -0,0 +1,6 @@
+#ddev-generated
+services:
+  elasticsearch:
+    image: elasticsearch:8.10.2
+    volumes:
+      - ./elasticsearch/config/elasticsearch8.yml:/usr/share/elasticsearch/config/elasticsearch.yml

.ddev/docker-compose.elasticsearch_extras.yaml

@@ -0,0 +1,9 @@
+#ddev-generated
+services:
+  elasticsearch:
+    environment:
+      http.cors.enabled: "true"
+      http.cors.allow-origin: "'*'"
+      # Disable authentication in local development
+      xpack.security.enabled: "false"
+      xpack.security.enrollment.enabled: "false"

.ddev/docker-compose.elasticvue.yaml

@@ -0,0 +1,16 @@
+services:
+  elasticvue:
+    image: "cars10/elasticvue:1.0.4"
+    #command: /docker-entrypoint.sh nginx -g 'daemon off;'
+    container_name: ddev-${DDEV_SITENAME}-elasticvue
+    labels:
+      com.ddev.site-name: ${DDEV_SITENAME}
+      com.ddev.approot: ${DDEV_APPROOT}
+    environment:
+     - 'ELASTICVUE_CLUSTERS=[{"name": "dev cluster", "uri": "http://${DDEV_SITENAME}.ddev.site:9200/", "password": "", "user": ""}]'
+     - VIRTUAL_HOST=$DDEV_HOSTNAME
+     - HTTP_EXPOSE=9003:8080
+  web:
+    links:
+      - elasticvue:elasticvue
+      - elasticsearch:elasticsearch

.ddev/elasticsearch/config/elasticsearch8.yml

@@ -0,0 +1,15 @@
+#ddev-generated
+# This file contains the configuration settings for Elasticsearch 8.
+# For more information, see https://www.elastic.co/guide/en/elasticsearch/reference/current/settings.html
+
+# https://www.elastic.co/guide/en/elasticsearch/reference/current/important-settings.html#cluster-name
+cluster.name: "docker-cluster"
+
+# https://www.elastic.co/guide/en/elasticsearch/reference/current/important-settings.html#network.host
+network.host: 0.0.0.0
+
+# Disable security features
+# https://www.elastic.co/guide/en/elasticsearch/reference/current/security-settings.html#general-security-settings
+xpack.security.enabled: false
+xpack.security.autoconfiguration.enabled: false
+xpack.security.enrollment.enabled: false

.ddev/elasticsearch/docker-compose.elasticsearch8.yaml

@@ -0,0 +1,15 @@
+#ddev-generated
+services:
+  elasticsearch:
+    image: elasticsearch:8.10.2ss
+    environment:
+      ES_JAVA_OPTS: "-Xms512m -Xmx512m"
+      discovery.type: "single-node"
+      bootstrap.memory_lock: "true"
+      http.cors.enabled: "true"
+      http.cors.allow-origin: "'*'"
+      # Disable authentication in local development
+      xpack.security.enabled: "false"
+      xpack.security.enrollment.enabled: "false"
+    volumes:
+      - ./elasticsearch/config/elasticsearch8.yml:/usr/share/elasticsearch/config/elasticsearch.yml

.gitignore

@@ -19,4 +19,5 @@
 node_modules
 
 # Ignore start.sh script status file
-.last_successful_command
+.last_successful_command_ddev
+.last_successful_command_lando

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
+## [2.5.0] 10.6.2024
+
+- Add DDEV support
+- Drupal 10.2.6 and Drush 1.5.2
+- Update the graphql_compose module to 2.1.0
+- Add a paragraph to display an arbitrary list of articles
+- Update npm dependencies
+- Run graphql-codegen with build/dev scripts, rather than committing the result
+
 ## [2.4.0] 22.5.2024
 
 - Add separate consumer for previewing, prevent anonymous access to the GraphQL endpoint

README.md

@@ -17,24 +17,25 @@ The template includes all you need to have a working multi-language decoupled Dr
 
 This example is meant to be used together with the [Silta](https://wunderio.github.io/silta/) hosting system by [Wunder](https://www.wunder.io), but it can be used with any hosting system.
 
-## 🤓 The only requirement: local development with Lando
+## 🤓 Lando or DDEV? Your choice!
 
-Local development is handled by [Lando](https://lando.dev/). Both frontend and backend are covered by the Lando setup, so that is the only real requirement. The frontend site can be run in either dev or prod mode,
-and it will be proxied by Lando. The default URL for the frontend is [https://frontend.lndo.site](https://frontend.lndo.site), but it can be changed by editing the `.lando.yml` file.
+This starterkit can be used either with [Lando](https://lando.dev/) or with [DDEV](https://www.DDEV.com/). The only requirement is to have either one of those installed.
 
 ### Lando minimum version
 
 The minimum version of lando required is 3.21.
 
 > Check the `version` property in the `.lando.yml` file to see which version of Lando is currently supported.
 
-### ⚠️⚠️ NOTE: Use npm inside Lando!
+### ⚠️⚠️ NOTE: Using npm
 
-Instead of running npm operations in your host machine, _this template requires you to use npm inside Lando_: this ensures the same node version is used by all developers participating in the project, and also that the node process has the right environment variables to connect to the backend (these are defined in the `.lando.yml` file in the root of the project).
+Instead of running npm operations in your host machine, _this template requires you to use npm inside Lando or DDEV_: this ensures the same node version is used by all developers participating in the project, and also that the node process has the right environment variables to connect to the backend without the need of additional configuration steps.
 
-**Just prefix all npm operations with `lando`.**
+**Just prefix all npm operations with `lando` or `ddev`.**
 
-So instead of `npm install`, run `lando npm install`, instead of `npm run dev` run `lando npm run dev`, etc.
+So instead of `npm install`, run `lando npm install` or `ddev npm install`, instead of `npm run dev` run `lando npm run dev` or `ddev npm run dev`, etc.
+
+> ⚠️⚠️ For DDEV, when using npm commands you have to make sure that you are in the `next` directory.
 
 #### Stopping a running npm operation running inside the Lando node container
 
@@ -44,57 +45,62 @@ If you have closed the terminal window where you were running the server with `l
 
 Follow this guide to get the backend and frontend up and running. You can either do it all in one go, or step by step to understand better what's going on.
 
-### 🏎️ Option 1: Quick one command setup
+### 🏎️ Quickstart
 
-All you need to do is run the setup script like this:
+1. Clone this repository
+2. Choose which local environment you want to use: **Lando** or **DDEV**.
+3. Run the setup script corresponding to your chosen local environment:
 
 ```bash
-./setup.sh
+./setup-lando.sh
+```
+or 
+
+```bash
+./setup-ddev.sh
 ```
 
 The script will execute a series of commands in sequence. If an error occurs, you can run the script again, and it will pick up where it left off.
 
 If the script has failed on some step, and instead of continuing you want to start from scratch, you can run the script with the `-c` flag:
 
 ```bash
-./setup.sh -c
+./setup-[lando/ddev].sh -c
 ```
 
 > NOTE: the script will install the site from scratch. Export your database if you have started working with the template, and you have something valuable in it. :)
 
-## 🪜 Option 2: Step-by-step setup
+## 👨‍💻Urls
+
+After the setup is complete, you can access the site at the following URLs:
 
-### Backend Drupal setup
+### With Lando
 
-All Drupal code and configuration is in the `drupal` directory.
-All needed module dependencies have been added to the `composer.json` file.
-Part of the setup process is automated using [Drupal recipes](https://www.drupal.org/project/distributions_recipes).
-You will need to have a recent installation of [Lando](https://lando.dev/) running on your development machine.
+Lando has two separate containers for the backend and frontend, so the URLs are different:
 
-Follow these steps to get started:
+| Backend | Frontend                     |
+|--|--|
+| https://next-drupal-starterkit.lndo.site/ | https://frontend.lndo.site/  |
 
-1. `lando start` (this will create the environment, and run `composer install` for you.)
-2. Generate the needed oauth keys using the command `lando generate-oauth-keys`. The keys will be created in the `drupal/oauth` directory.
-3. Install Drupal as usual. You will have to **use the minimal installation profile**. You can do it via the UI or using this command: `lando drush si minimal`.
-4. Run the `lando install-recipe wunder_next_setup` command to set up all necessary modules, content types and configuration.
-5. Run `lando drush eshs` to set up elasticsearch indexes.
-6. Execute the command: `lando drush wunder_next:setup-user-and-consumer`
-7. If you are starting your own project, and not just testing the template, you can now export your Drupal configuration the usual way: `lando drush cex`.
+You can get a more detailed list of all the services and their urls with the command:
 
-### Next.js setup
+```bash
+lando info
+```
+
+### With DDEV
 
-All Next.js code is in the `next` directory.
+DDEV has a single container for both the backend and frontend, so the URLs differ only by the port:
 
-For frontend development, prefix npm commands with `lando`, so for example to start the local node server in development mode, you can use `lando npm run dev`. All needed environment variables are already set for backend and frontend in the Lando file, so you will not need to touch any .env files for the frontend to get up and running.
+| Backend | Frontend                                       |
+|--|--|
+| https://next-drupal-starterkit.ddev.site| https://next-drupal-starterkit.ddev.site:3000  |
 
-Follow these steps to get started, **after you have set up the backend**:
+You can get a more detailed list of all the services and their urls with the command:
 
-1. Run `lando npm install`
-2. Run `lando npm run dev`
-3. If you want to populate the backend site with the provided example content, you can now run (in another terminal window): `lando drush en wunder_democontent && lando drush mim --group=demo_content --execute-dependencies`, otherwise you can log into the backend with `lando drush uli` and create some content.
-4. Visit `https://frontend.lndo.site` and you should see your content displayed by the frontend.
-5. When viewing a piece of content inside Drupal, you should be able to preview it in the frontend, including unpublished content and revisions.
-6. The template includes automatic setup of [On demand revalidation](https://next-drupal.org/learn/on-demand-revalidation), so saving a piece of content will automatically revalidate the corresponding path in Next.js.
+```bash
+ddev describe
+```
 
 ## 📦 What's included?
 
@@ -161,15 +167,15 @@ TypeScript is setup quite loosely by default to minimise friction and make it ac
 
 The project uses GraphQL to fetch data from the backend. The queries are defined in the `next/lib/graphql` directory. The queries are typed using the `graphql-codegen` package, which generates TypeScript types from the queries. The types are then used to type the data fetched from the backend.
 
-When adding or modifying queries and fragments, the codegen script needs to be run to generate the corresponding types from the schema. Though you can always run `lando npm run graphql-codegen` yourself if needed, you shouldn't normally need to: `lando npm run build` will run the codegen before the build, and `lando npm run dev` will start the codegen in watch mode alongside starting Next.js in development mode. The output of the codegen is gitignored, as the same step will be run on the CI server.
+When adding or modifying queries and fragments, the codegen script needs to be run to generate the corresponding types from the schema. Though you can always run `lando npm run graphql-codegen` or `ddev npm run graphql-codegen` yourself if needed, you shouldn't normally need to: `lando npm run build` or `ddev npm run build` will run the codegen before the build, and `lando npm run dev` or `ddev npm run dev` will start the codegen in watch mode alongside starting Next.js in development mode. The output of the codegen is gitignored, as the same step will be run on the CI server.
 
-Note that when there are changes on the GraphQL server schema itself, you will need to stop and start the command again to fetch the new schema definition (it will keep watching your changed files, but will only re-fetch the schema from the server when the codegen command first runs). Also, you might need to run `lando drush cr` to clear the Drupal cache.
+Note that when there are changes on the GraphQL server schema itself, you will need to stop and start the command again to fetch the new schema definition (it will keep watching your changed files, but will only re-fetch the schema from the server when the codegen command first runs). Also, you might need to run `lando drush cr` or `ddev drush cr` to clear the Drupal cache.
 
 #### Typesafe environment variables
 
 The environment variables used by the frontend are also checked for type safety. If used correctly, a Zod error will prevent the frontend from building if the environment variables are not set according to the schema defined in `next/env.ts`. To add a new environment variable:
 
-1. Add it to `.lando.yml`, under services > node > overrides > environment.
+1. Add it to `.lando.yml`, under services > node > overrides > environment. or to `.ddev/config.yaml` for DDEV.
 2. Add it to `next/env.ts`. Note that it must be added twice there - once under server/client to define its schema, and once under `runtimeEnv` to read the actual value.
 3. Import it in the file where it's used with `import { env } from "@/env";` and use it like `env.MY_ENV_VAR`. At this point, your environment variable should be working locally.
 4. To ensure it also works in CircleCI and Silta, also add it to`.circleci/config.yml` and `silta-next.yml`.