Skip to main content

Setup

Prerequisites

Before proceeding with the installation, make sure you have the following prerequisites:

  • PHP
  • Composer
  • Lando
  • Docker

Installation

MacOS

If you're using a Mac, you can install Homebrew by running the following command in your terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

To install PHP, run the following command in your terminal:

brew install php

To install Composer, run the following command in your terminal:

brew install Composer

To install Lando, follow these steps:

  1. go to the Lando releases page on GitHub: https://github.com/lando/lando/releases

  2. Choose the appropriate version based on your Mac's processor architecture (Intel or Apple Silicon) download and install it:

    For Intel-based Macs: Download the lando-x64-xxxx.dmg file For Apple Silicon-based Macs: Download the lando-arm64-xxxx.dmg file

To install Docker please refer to Docker Desktop installation page for Mac: https://docs.docker.com/desktop/install/mac-install/

Windows

Usage & Configuration

note

Acro Commerce is working on creating recipes in order to automate these manual steps. For the time being you will need to configure drupal manually.

Setup Drupal

  1. Create a drupal application

    The first step is to create a Drupal instance locally. You can leverage the @acromedia/drupal-recommended package from the Acro Commerce Drupal Composer Repository:

    composer create-project acromedia/drupal-recommended /SOME_PATH/YOUR_PROJECT_NAME

    You may also need to update the php versions located in .lagoon:

    • in php.dockerfile, update to php-8.1-fpm:latest
    • in cli.dockerfile, update to php-8.1-cli-drupal:latest
  2. Start the lando app:

    lando Start
  3. Install Drupal:

    lando drush site-install

    Drupal Install

Install required modules

  1. Install the graphql and graphql_core_schema modules:

    lando composer require drupal/graphql drupal/graphql_core_schema drupal/entity_reference_revisions drupal/redirect drupal/paragraphs drupal/color drupal/color_field drupal/field_group drupal/layout_paragraphs drupal/restui drupal/svg_image_field drupal/allowed_formats
  2. Enable those modules

    lando drush pm-enable language graphql graphql_core_schema entity_reference_revisions redirect paragraphs media color color_field field_group layout_paragraphs restui svg_image_field allowed_formats
  3. Add the proper Acromedia composer packages from here

    • Ensure you add the proper access tokens first!
  4. Add/enable Gesso GraphQL

    lando composer require acromedia/gesso_graphql acromedia/gesso_paragraphs
    lando drush pm-enable gesso_graphql gesso_paragraphs
  5. Configure the graphql module on your drupal instance:

    Run lando drush uli command to get Drupal local application URL, then:

    1. Go to /admin/config/graphql/servers/create

    2. Select Core Composable Schema and add /graphql to the Endpoint field

    3. And hit save, and edit the server agains select the one you have created

    4. Enable the following extensions:

      Drupal GraphQL Server Configuration

    note

    Do not enable debug settings in production

    1. Toggle Enable value fields
    2. Expand "Enabled entity base fields" and enable all fields
    3. Expand "Enabled entity types" and enable the following:
      • entity_form_display
      • entity_view_display
      • file
      • image_style
      • media
      • media_type
      • menu
      • menu_link_content
      • node
      • node_type
      • paragraph
      • paragraphs_type
      • path_alias
      • redirect
      • taxonomy_term
      • taxonomy_vocabulary
      • user
      • user_role
    4. Enable fields, this part you can expose the fields you need.
    5. Save the form. If you encounter an error while saving, select the required types before attempting to save again
    6. Edit the server again
  6. Navigate in a new browser to acrobuild's demo of Gesso Open Acrobuild's demo of GessoGo: https://gesso-drupal.acrobuild.com/. Authentication details can be found in 1Password by searching for Gesso Drupal CMS

    1. Go to /admin/config/graphql/servers/ and pick the Core server
    2. On your local, check the same fields, and click save

Setup Pargraphs for use with Gesso

  1. Create a Paragraph type (Gesso Drupal comes with some default paragraph types)

    1. Go to /admin/structure/paragraphs_type
    2. Add a new paragraph type. You must add one field
  2. Create a Content Type (Gesso Drupal comes with field_components already defined)

    1. Go to /admin/structure/types
    2. Add a new content type, or edit an existing one
    3. Add a new field of type Paragraphs, typically called "Components" Note: Gesso is configured to use machine name field_components for the paragraph field. If you require a different field naming convention then you will have to overwrite the default paragraph query.
    4. Under "Which Paragraph types should be allowed" select "Include the selected below" the following under list of allowed paragraph types. (Any container type paragraph such as accordion but NOT accordion item this is because an accordion item can only be used within an accordion):
      • accordion
      • basic content
      • buttons
      • cards
      • divider
      • embed code
      • section
      • image
      • section block
      • slide carousel wrapper
      • spacer
      • modal
      • tabs
      • strap
    5. Under "Field Display" click the gear settings cog for field_components and enable "Require paragraphs to be added inside a layout"

Validate Setup

  1. Check the explorer and validation
    1. Go to /admin/config/graphql
    2. Click on the "Validate" tab, and ensure that you don't see a "missing document" error.
    3. Click on Explorer, and ensure that you can see a proper GraphQL Explorer page. Try running this simple query to ensure your configuration for paragraphs is correct.
      query MyQuery {
      entityQuery(entityType: NODE) {
      items {
      label
      id
      referencedEntities {
      label
      }
      }
      }
      }
  • Remember to run lando drush cr to clear the cache in order to ensure the app runs properly