Skill level: 
Florida Technical College - Orlando Campus - Room TBD

In this 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.


Topics covered during this training include:

  • 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

After completing this course you’ll come away with knowledge of:

  • 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 Gatsby Link and Gatsby Image components which are in part responsible for for Gatsby’s great performance
  • Installing and configuring Gatsby plugins
  • How to setup Sass in Gatsby to style your projects

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 login 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 a 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.

Who is the training 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.




For this hands-on training course, the following is recommended:


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


  • 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


About the instructor: 

Mario Hernandez, Head of Learning at Medicurrent

Tobias Williams, Director of Front End Development at Mediacurrent