![]() Challenges: Configuring an Image PluginĬonsider the case of displaying content from Drupal in Gatsby that contains an image. ![]() Let’s look at a few specific examples in order to illustrate how this made working with data from Drupal more challenging than I initially expected. This is great for many use cases, but when using gatsby-source-drupal as a data source I found that a number of the plugins I attempted to utilize didn’t apply to data from Drupal. One issue that contributes to this is that many of the available Gatsby plugins are focused on dealing with data imported from the file system via the gatsby-source-filesystem plugin, or more specifically, data from Markdown files via the gatsby-transformer-remark plugin. Some of this is likely to balance out over time as people become more comfortable with Gatsby, but I think that the types of hurdles I’ve encountered on my personal site could also explain why I’m seeing more projects than I’d expect use Markdown rather than Drupal as a data source. I’ve also noticed that others in the Drupal community who are using Gatsby seem to be using it with Markdown files as data, rather than using Drupal. I’ve had to adjust my expectations as I’ve found that some features that are straightforward in other Gatsby configurations have required additional effort to achieve while using Drupal. I’ve been developing my personal site with Drupal and Gatsby since the beginning of the year, and while I’ve loved the process overall, I have run into some challenges related to using Drupal as a content source. (For a more detailed introduction to Gatsby, consult either the Gatsby tutorial or this post on Decoupling Drupal with Gatsby.) Gatsby and Drupal Finally, Gatsby has a robust ecosystem of plugins that allow you to easily pull in data from a wide variety of data sources, including Drupal. It also really is mind-blowingly fast thanks to optimizations like code splitting, lazy loading, and prefetching resources. Except that unlike Jekyll, it allows you to use the modern stack of Node, React, and GraphQL as opposed to Ruby and the Liquid templating engine. Similar to existing projects like Jekyll, Gatsby generates a completely static build of your site that can be hosted almost anywhere, including on a CDN or on services like Github Pages or Netlify. All of this eventually led me to Gatsby, a self-described “blazingly fast” static site generator for React. ![]() Personally, I’ve been focusing my efforts on using Drupal in combination with React, both due to a love for the un-opinionated and component-driven approach of the library, and also as a result of the momentum that React has within the Drupal community. ![]() When projects have called for it, we’ve found success using JavaScript frameworks like React and Vue alongside data provided by APIs from Drupal in order to enhance front-end user experiences. Editor’s Note: Brian presented “ Dealing with the Limitations of Gatsby Source Drupal” at Decoupled Drupal Days in New York on August 18, 2018, which elaborated on a number of concepts outlined in this post.Īs we continue to build sites powered by Drupal 8, we’ve increasingly been challenging our assumptions of how we can best render content provided by Drupal on the front end.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |