Building a Decoupled Site with Drupal 8 and Gatsby Part 2

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

Prerequisites:

Lando
Docker
Data to display from Part 1 of this blog post.

Let's get started!

Create a project folder for the Gatsby Lando environment.
```
mkdir gatsbymobilelegend
```
Navigate inside the project folder and create .lando.yml file with this content.
```
name: gatsbymobilelegend

proxy:
  appserver:
    - gatsbymobilelegend.lndo.site:8000

services:
  appserver:
    type: node:10
    port: '8000'
    #command: gatsby develop --host 0.0.0.0
    install_dependencies_as_me:
      - yarn global add gatsby-cli
      - yarn

tooling:
  yarn:
    service: appserver
  gatsby:
    service: appserver
  node:
    service: appserver
  npm:
    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: https://docs.lando.dev/config/proxy.html#automatic-port-assignment

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: https://docs.lando.dev/config/services.html

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

Lando 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: https://docs.lando.dev/config/tooling.html

Now that we are done creating our .lando.yml file we can now proceed in the next step.
Run this command.
```
lando start
```
After running lando start you'll see this output

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

Install gatsby plugin gatsby-source-drupal

lando npm install --save gatsby-source-drupal

Install gastby theme gatsby-plugin-theme-ui

lando npm install theme-ui gatsby-plugin-theme-ui

Open gatsby-config.js file and add this line under plugins [] section.
```
`gatsby-plugin-theme-ui`,
{
    resolve: `gatsby-source-drupal`,
    options: {
    baseUrl: `http://your-site.lndo.site/`,
    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.
Run this command.
```
lando gatsby develop --host 0.0.0.0
```
Visit the site http://gatsbymobilelegend.lndo.site/

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