OpenSense Labs: Blazing fast websites with Gatsby and Decoupling Drupal

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Blazing fast websites with Gatsby and Decoupling Drupal
Shankar
Fri, 01/04/2019 – 12:31

F. Scott Fitzgerald’s ultra-modernist novel about jazz-age America, The Great Gatsby, has been regarded as one of the best books ever written. It has fascinated the readers by creating a sort of aftermath of wonder. Enter the digital age, there is another ‘Gatsby’ which is getting a wondrous reception and is in the reckoning for being a great tool when it comes to web development.

The emergence of the static site generation, where views are rendered in advance for mitigating the burden on APIs and other backend systems, is proving to be a remarkable solution for great web performance. Gatsby, as a static site generator, can dramatically metamorphose the web performance. It can be a magnificent option in combination with Drupal as the backend for building an enriching single page applications.

No wonder Kyle Mathews, the founder of GatsbyJS, tweeted in 2017:

GatsbyJS: Explained
Gatsby Usage Statistics | Source: BuiltWithCurrently, GatsbyJS is on the rise when it comes to its usage as can be seen in the graph above. So, what is it? GatsbyJS, an open source static site generator, stitches together the best of ReactJS, Webpack, routing, GraphQL and other front-end tools into one very enjoyable developer experience.

Gatsby leverages powerful pre-configuration for developing a website. It has out-of-the-box capabilities for spectacularly fast page loads, data prefetching, asset optimisation, code splitting, server-side rendering, service workers, and intelligent image loading.

Features of Gatsby
Source: Gatsbyjs.org Following are the reasons that should be considered while choosing Gatsby:

Well-architected plugin system

With Gatsby, content is written as React components and is rendered at build time to the Document Object Model (DOM) as static HTML, CSS and JavaScript files. With a rich data plugin ecosystem, the static content rendered can be sourced from a plethora of sources and formats constituting markdown, CSV (Comma-separated values), and from content management systems (CMS) like Drupal.

Magnificent Scalability

Gatsby can scale to the entire internet as it builds the site as static files that can be deployed with ease on numerous services. It helps in letting go of intricate deploys involving databases and servers, their time-intensive setup costs, maintenance among others.

Performance and Progressive Web Apps out-of-the-box

Gatsby enforces best practices and optimises your site by default. When the build process runs, static HTML files are created for individual pages to offer swift initial load times.

When the page is loaded by the browser, Gatsby boots up React and navigates around your site as if you were navigating through a single page application with near-instant transitions without page reloads.

Gatsby prefetches adjacent/related page content in the background which nullifies any chances of delay when the user clicks on a link. The client-side experience is awesome with JavaScript enabled as there is no loss of content or navigation if the user has JavaScript disabled.

Gatsby can offer offline support as well with the addition of a single plugin thereby making your site into a full-blown progressive web app (PWA).

JAMstack setup

A paradigm shift has been occurring in the web development arena with JAMstack setup taking the centre stage. The amalgamation of client-side JavaScript, reusable APIs, and prebuilt Markup is the future of web development. Gatsby can be a stupendous JavaScript framework for a JAMstack-powered web application.

Merits of Integrating Gatsby and Drupal

Drupal is great for its provision of intricate page layouts or content modelling with numerous sections per page. It is an amazing solution for the teams with multi-stage content creation and assessment processes. Decoupled Drupal is an astounding solution for building enterprise-grade websites and has the deep-rooted support of Drupal Community leaders. 

Leveraging the benefits of Drupal with Gatsby is an amazing approach towards getting an enterprise-level CMS for free in addition to modern development experience and the merits of JAMstack such as security, scalability and performance. One of the great examples of implementation of decoupled Drupal and Gatsby can be seen through the demo site of Umami Food Magazine which is powered by Contenta CMS, headless Drupal distribution, and GatsbyJS.

Incorporating Gatsby in a decoupled Drupal setup enables you to access the impressive content architecture and access workflow capabilities of Drupal 8 in addition to the splendid UI creation and performance toolset of Gatsby. Moreover, both Drupal and Gatsby are open source, have a huge and active community presence and a wonderful ecosystem of add-on modules or plugins. To add to that, the built-in web services of Drupal 8 streamlines the integration process.

Demonstration

To integrate Gatsby to a new or existing Drupal site, gatsby-source-drupal plugin is added to the Gatsby site. Gatsby-source-drupal plugin is a source plugin that is used to pull data into Gatsby from Drupal sites and it does so with the help of JSON:API module. It is followed by configuration of the plugin with your Drupal credentials and hosted URL. You can, then, access the Drupal data with the help of GraphQL queries.

A digital agency exhibited a demonstration that pulls Drupal content into a Gatsby site. It had a Drupal 8 site already installed and created a content type named Coffee with three fields: Title, Body and Image. Drupal was made into an API server with the installation of JSON:API and JSON:API Extras modules. For accessing the JSON API resource list, anonymous user permission was given.

This was followed by building process of Gatsby site called coffees.gatsby by making sure that the node and npm are installed on the computer. Then, the content was fetched from the Drupal server. For this, a simple page was created to display all the coffee types from the Drupal site.

Then, gatsby_source_drupal plugin was used to read Drupal content from the default endpoint /jsonapi. GraphQL was utilised to query all the coffee nodes from Drupal. Finally, the Gatsby site was published by simply copying or pushing contents in /public to the server.

Conclusion

Gatsby is an incredible static site generator that streamlines the process of creating blazing fast websites. Gatsby extracts data from sources like Drupal and then uses that data for generating static pages at build time. The data sourced from numerous backends can even be merged. This technique helps in extracting the benefits of both static sites like speed, ease of deployment etc. and the content management systems like the easy update process, user-friendly editorial interface etc.

Coming together of Drupal and Gatsby renders incredibly fast static pages and then merges that with traditional React for user authentication and personalisation.

We are committed to the provision of ambitious digital experiences with our expertise in Drupal development.

Contact us at [email protected] to get the most out of Drupal + Gatsby integration.

blog banner

blog image

GatsbyJS
Gatsby
Decoupling Drupal
ReactJS
React
Drupal 8
Drupal
GraphQL
JAMstack
Progressive Web Application
Progressive Web App
PWA

Blog Type

Articles

Is it a good read ?

On


Source: New feed

Posted on April 17, 2019 in Denver Drupal Development

Share the Story

About the Author

This is the "wpengine" admin user that our staff uses to gain access to your admin area to provide support and troubleshooting. It can only be accessed by a button in our secure log that auto generates a password and dumps that password after the staff member has logged in. We have taken extreme measures to ensure that our own user is not going to be misused to harm any of our clients sites.