Building a Decoupled Site with Drupal 8 and Gatsby Part 2

Submitted by galactus on Thu, 04/30/2020 - 08:30

Today I'm going to discuss how to create a Gatsby recipe for Lando and in this tutorial, you will learn how to configure Lando file and add some additional spice in the recipe.

This is the second part of the blog post I created Building a Decoupled Site with Drupal 8 and Gatsby Part 1


  • Lando

  • Docker

  • Data to display from Part 1 of this blog post.

Let's get started!

  1. Create a project folder for the Gatsby Lando environment. 
    mkdir gatsbymobilelegend

  2. Navigate inside the project folder and create .lando.yml file with this content.
    name: gatsbymobilelegend
        type: node:10
        port: '8000'
        #command: gatsby develop --host
          - yarn global add gatsby-cli
          - yarn
        service: appserver
        service: appserver
        service: appserver
        service: appserver

    Let's discuss what this line means in the .lando.yml file.

    First, we define the name of our application gatsbymobilelegend, the second line we define the proxy for the application this is not required though we define it as our gatsby app needs to run in port 8000 so we need to define the proxy and port. More detailed information here:

    services, here we define node as our web service and open port 8000, we also define yarn and gatsby-cli as installation dependencies. More detailed information here:

    tooling, we define yarn, gatsby, node, and npm as tooling. 

     provides a nice way to: Emulate the experience of a "native" command but inside of a container. Chain multiple commands running on multiple services together. Provide dynamic routing so one command can be used on multiple services. More detailed information here:

    Now that we are done creating our .lando.yml file we can now proceed in the next step.

  3. Run this command.

    lando start

    lando start

    After running lando start you'll see this output

    result output

    We are now ready in the next step in configuring our Gatsby application.

  4. Install gatsby plugin gatsby-source-drupal

    lando npm install --save gatsby-source-drupal
  5. Install gastby theme gatsby-plugin-theme-ui
    lando npm install theme-ui gatsby-plugin-theme-ui
  6. Open gatsby-config.js file and add this line under plugins [] section.
        resolve: `gatsby-source-drupal`,
        options: {
        baseUrl: ``,
        apiBase: `jsonapi`, // optional, defaults to `jsonapi`

    In the first line, we add the gatsby-plugin-theme-ui in the second line we resolve the gatsby-source-drupal and configure the backend endpoint.

  7. Run this command.
    lando gatsby develop --host

    lando start

  8. Visit the site ​

    gatsby site


Now that we have configured our Gatsby site get ready on the third part of the tutorial. Stay tuned on the third part!