About this training

A training workshop by Mediacurrent.

Getting Started

This repo will allow you to get the codebase to build a new Gatsby website which has been configured to pull its content from Drupal. Both Gatsby and Drupal run locally.

1. Requirements

Operating System:

• macOS 10.13 or later
• Windows 10 Pro+ or equivalent (eg Windows 10 Enterprise) with Hyper-V running
• Linux with kernel version 4.x or higher

Software (Must install):

• Docker - macOS or Windows 10
• Lando - macOs or Windows 10
• NVM
• NodeJS & NPM

Instructions for installing NVM, Node & NPM on macOS or Windows.

2. Clone the repo

You can clone or download the repo anywhere in your computer (i.e. Sites, Downloads, Documents, Desktop, etc.)

git clone https://github.com/mariohernandez/gatsby_training.git

3. Build the environments:

After cloning the repo, cd into the newly created directory:

cd gatsby_training

Start Lando

lando start

This will build your Docker containers needed to run Gatsby and Drupal. NOTE: Docker needs to be running before running lando start.

Build Gatsby

cd gatsby

Setup Node

nvm use

If you get errors, you can try running: nvm install then nvm use. This will use the version of node specified inside .nvmrc

Install all Node dependencies

npm install

The above command looks in package.json and will install all the dependencies listed there.

Install Gatsby CLI

Before you can run gatsby commands, you need to install the Gatsby CLI globally.

npm install -g gatsby-cli

Start your Gatsby site

gatsby develop

This will start Gatsby which should immediately connect to Drupal to pull all content.

4. Access your Gatsby and Drupal sites

Gatsby:

http://localhost:8000/

GraphQL

http://localhost:8000/___graphql

Drupal:

https://nitflex.lndo.site

Login to Drupal: (switch to http if https is not working)

https://nitflex.lndo.site/user/login

Your credentials are: username: admin, password: admin

Troubleshooting

Depending on your unique environment, the Drupal URL generated by Lando may be slightly different than the one listed in these instructions. If that is the case, update Gatsby's configuration to reflect your actual URL.

1. In your editor, open gatsby/gatsby-config.js
2. Change the baseUrl entry at the bottom of the file to use the Drupal URL shown when you ran lando start