Drupal & Gatsby Demo
The Drupal repo is at https://github.com/stewest/GatsbyDrupalSectorDemo
And the Gatsby REPO is https://github.com/stewest/GatsbySectorDemo.git and demo URL on https://gatsbysectordemomaster.gatsbyjs.io/
Setup
Drupal
cd drupal
ddev config
(See ddev config example below- use the name drupalsector)ddev composer require drupal/gatsby:^2.0.x-dev
(enable this)ddev composer require jsonapi_menu_items
(enable this) ##TODO##ddev start
ddev drush sqlc < demodb.sql
(if you want to you the demo db)ddev drush uli
Enable Drupal Modules:
- If you're using the example demodb.sql this will already be installed.
- Gatsby
- Gatsby JSON:API Extras
Notice:
You must enable the Content Moderation, Workflows, JSON:API Extras, JSON:API modules to install Gatsby. (I had to enable this via drush to get it to work properly)
Add Preview Webhook URL(s)
http://localhost:8000/
Add Preview Webhook URL(s)
http://host.docker.internal:8000/__refresh
GATSBY Frontend
cd gatsby
nvm install 19
nvm use 19
yarn install
yarn setup
(see .env.EXAMPLE)yarn start
You'll notice that we've set gatbsy develop to use http. To allow connection without a ssl certificate: enable NODE_TLS_REJECT_UNAUTHORIZED=0 (this has proven to be a pain - locally)
For live preview we need ENABLE_GATSBY_REFRESH_ENDPOINT=true enabled.
These vars are in the .env.development file.
Note: for Preview to work locally, we needed to add the following -H 0.0.0.0
to gatsby develop
"develop": "gatsby develop -H 0.0.0.0",
Are you doing this from Scratch?
clone https://github.com/gatsbyjs/gatsby.git GatsbySource
-
mkdir drupal
-
mkdir gatsby
-
copy the folder
examples/using-drupal
into your projectsgatbsy
folder
name: drupalsector
type: drupal9
docroot: web
php_version: "8.1"
webserver_type: nginx-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
type: mariadb
version: "10.4"
nfs_mount_enabled: false
mutagen_enabled: false
use_dns_when_possible: true
composer_version: "2"
web_environment: []
nodejs_version: "18"
REFERENCES
- https://www.drupal.org/docs/contributed-modules/gatsby-integration/2x-module-setup-guide
- https://www.gatsbyjs.com/plugins/gatsby-source-drupal/
- https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-drupal/
- https://www.gatsbyjs.com/docs/how-to/local-development/running-a-gatsby-preview-server/