Skip to main content

Introduction to Decoupled Drupal with Gatsby

Learn how Gatsby can provide better performance and security to your Drupal site by decoupling the back end infrastructure of Drupal from the front end.

In this 2-day hands-on training workshop, we will cover how to leverage the powerful features of Drupal as a Content Management System to build the back end architecture and infrastructure to provide filtered content that lends itself to a component-based front end. We will then spin off a Gatsby website to serve as the front-end interface for this Decoupled architecture.

Training length:  2 Days

Syllabus

  • Setup Drupal’s JSON API and create new EndPoints for data retrieval
  • Use GraphQL to query data from Drupal at build time
  • How Gatsby and React make use of components
  • Building Gatsby Components and styling them Sass
  • Gatsby’s createPage function to build pages at build time
  • Gatby’s Link and Gatsby Image components which are two powerful features of Gatsby for building blazing fast websites
  • Install and configure Gatsby Plugins

Learning Objectives

  • Building a simple Gatsby site using any Gatsby started to discuss all the pieces involved in a typical gatsby site
  • How to plan for a decoupled architecture
  • Building Drupal’s infrastructure in such a way that it lends itself to a decoupled architecture
  • How to create one or multiple endpoints using Drupal Core’s JSON API module
  • Setup Gatsby to consume data from Drupal to build pages and components
  • How to build basic and complex Gatsby components from scratch while adding logic and flexibility to improve reusability of components
  • How to use GraphQL’s playground to query data from any source
  • In-depth understanding of Gatby Link and Gatsby Image components which are in part responsible for Gatsby’s great performance
  • Installing and configuring Gatsby plugins
  • How to setup Sass in Gatsby to style your projects

Who This Course is For

This training is targeted to beginners-to-intermediate audiences who are looking to learn the basics of a decoupled architecture.  This includes back-end and front-end developers as well as site-builders.  

In addition, managers or IT folks who wish to learn basic concepts of a decoupled architecture will find this training very insightful.

What You Can Expect From This Course

Best practices and standards are at the core of this course. This means you will be exposed to the latest trends, processes, and tools used on today's web development to build responsive, accessible websites. 

Prior to training

Our team of trainers has put a lot of effort into making sure your training experience is successful before you step foot in the door (or in these days of distance learning, before you log in to the training platform). This means we will provide guidance and support to ensure you are ready for training with your local environment and any questions you may have. In addition to providing a detailed set of instructions for setting up your local environment, we will hold a virtual call, prior to the training day, to assist anyone who needs help with their local setup.

During training

Since this will be virtual training, you will have our team at your disposal to answer questions and help you if you get stuck. You will be able to ask live questions and discuss issues related to the topic at hand. If necessary, you will be able to share your screen to help you debug your issues so other students can benefit from this opportunity to learn something new.

After training

In addition to providing you with world-class training material that can be accessed at any time, even after training has passed, we will share the recordings of each of the lessons we do. This is a great way to reference the training at your own pace afterward.

Course Requirements 

Environment:

  • macOS or Windows Pro
  • Latest Docker and DDEV
  • Latest stable (LTS), version of NodeJS with NPM
  • Github account

Technical:

  • Good understanding of HTML and CSS
  • Familiarity with running commands in a command-line tool is required
  • Basic understanding of JavaScript syntax
  • Knowledge of cloning a repository from Github
  • Basic knowledge of Dev tools
  • Familiarity with Drupal concepts such as Node, fields, relationships

Other requirements:

  • Access to Zoom webinars
  • Text editor of your choice(VSCode, PHP Storm, Coda, etc.)

Other Training Opportunities

Training is critical for the success of your team and organization, but training is not easy to come by as it can be a costly investment. Public training events like this one are a perfect middle-ground of cost and quality. We feel confident you will find in Mediacurrent a training partner you can trust.