Set Up

We're so happy to have you here learning all about Gatsby, and in particular, with integrating Gatsby with Drupal as a headless CMS.

The central purpose of this first lab is to give everyone sufficient time to validate machine setup and get a local version of Gatsby and a headless Drupal instance created and running.

If you haven't already, start with the Set Up and Validation instructions here.

Once your environment has been validated, we can get up and running!

Setting up Drupal

This Drupal instance will be running on Digital Ocean, so you do not have to worry about getting a Drupal site setup locally.

If you want to replicate the same Drupal installation running locally you can follow the following instructions:

# Clone repository
git clone git@github.com:weknowinc/drupal-boina.git
# Copy .env file
cp .env.dist .env
# Add hostname entry in your /etc/hosts file
127.0.0.1    drupal-boina.develop
# Start containers
ahoy up
# Install Composer dependencies
ahoy composer install
# Install Boina distribution
ahoy drupal boina:install

Running Node.js and development server locally

Now that Drupal has been set-up and our dependencies have been installed, we can get to work on Lab 1!

First, just to validate that content hasn't changed upstream (e.g. in the parent repo), we can sync with upstream.

git fetch upstream master
git pull origin master --rebase

Next, run yarn to install all dependencies. Ensure you are in the root of the project (e.g. not the labs directory)

yarn

Next, change into the lab01 directory, like so:

cd labs/01-getting-started/

Setting up environment variables

We use environment variables to encapsulate secrets (values that we want exposed to our build process, but that we don't want prying 👀 to be able to access). We use a tool dotenv to provide these to our build process.

cat .env.sample > .env.development

This will take the contents of .env.sample and pipe them to .env.development. If you open up this file in your editor, you will see the hard-coded environment variables, and what needs to be changed!

Open up this file and replace the environment variables with the values you obtained when setting up the Drupal instance.

DRUPAL_USERNAME=your-usernmae
DRUPAL_PASSWORD=hunter2
DRUPAL_HOST=your-host-here.com

Almost ready! Now if you run

yarn start

you should be greeted with the following welcome screen.

Let's just make a simple change so you can get a little more familiar with the development server, file structure, and React! We want to take the footer content that is currently in src/components/layout.js and move it to its own component at src/components/footer.js.

Creating the Footer component

First - create the necessary component with:

touch src/components/footer.js

Next, we want to take the footer structure that is in layout, and encapsulate in the Footer component we created. Here's an empty structure you can use:

import React from 'react';
export default function Footer() {
  // TODO: replace with footer JSX
  return null;
}

Finally, import the newly created Footer component in src/components/layout.js and replace the existing footer content that was there.

The end result should look exactly as it did previously, just with a little nicer encapsulation now. You're now thinking in components 🎉 Feel free to edit any of the code in footer.js, e.g. perhaps add your name!

Wrap Up

Note that for every subsequent lab, the start steps will be the same. You will want to do the following for each lab:

• Copy over existing .env files from previous lab(s)--note these will not change, so feel free to just copy them!
• cd to the current lab, e.g. cd labs/01-set-up/
• Run yarn start to boot-up the local development server