Osio Labs, Inc
Use React and Drupal to create amazing decoupled applications.
×

Subscribe for updates

ReactForDrupal.com will use the information you provide on this form to send you newsletters and marketing by email. You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us or by contacting us at [email protected].

We use Drip as our newsletter platform. By clicking below, you acknowledge that the information you provide will be transferred to Drip for processing in accordance with their privacy policy and terms.




We'll never sell or give away your info. We hate spam too!

An Introduction to Drupal for React Developers

By Sia Karamalegos and Joe Shindelar

Drupal is one of the most popular open source content management systems (CMS) in the world. It's used by millions of people and organizations around the globe to build and maintain their websites. You probably use Drupal every day without knowing it, as many top businesses and government organizations use Drupal, including the Government of Australia, Red Cross, Harvard, The Economist, BBC, NBC News, Whole Foods, Cisco, Twitter, and many more.

Drupal’s standard features include easy content authoring, reliable performance, and excellent security. But what sets it apart is its flexibility; modularity is one of its core principles. Its tools help you build the versatile, structured content that dynamic web experiences need.

Started in 2000, Drupal encapsulates years' worth of lessons learned and best-practices codified, and a vibrant community of users and developers to support it. Historically Drupal has been best known for its monolithic approach to building sites, providing both the backend editorial tools, and the front end public user experience. This, however, is changing and as Drupal shifts to adopt modern API-first best practices it’s becoming a real contender for use in decoupled architectures.

Check out this Introduction to Drupal to learn more.

In this article we’ll explore Drupal from the perspective of a React developer looking to familiarize themselves with Drupal and its capabilities. Whether you’re evaluating Drupal as a possible CMS for your React front-end, or are already using Drupal and want to learn more about its value as an API-first CMS, read on.

Briefly stated, use Drupal for the backend and React for the front-end to get the best of both worlds: an interface for content creators, tailored to their needs, without developing it yourself from scratch; and the freedom to create a front-end experience, coded exactly to your unique specifications, using all your favorite features from React.

Why do I need a content management system (CMS)?

One question that can help to answer this question is, “Is your product—the value you’re providing to users—the application or the content?”

If you’re creating an online game, or an application whose main function is to perform some task like edit images, or provide a real-time chat experience, you probably don’t need a CMS. In these cases the data you store is a side effect of users interacting with the application, so an API that accepts CRUD requests for data might suffice. The application itself can take full control of creating, updating, and deleting data as needed.

However, if your product is content, written, edited, and moderated by humans, then you’ll need to provide an interface for them to perform that work. For some of the more basic use cases you can likely get by with flat files in a Git repository, and use the web editor on GitHub or similar to allow users to edit content. But this starts to break down when your project requires:

  • Complex editorial workflows
  • Categorizing, highlighting, and promoting content
  • Media asset management
  • Managing the relationships between content and media assets
  • Fine-grained permission control
  • And more

A CMS like Drupal provides a web-based interface for managing your content and editorial needs. It also allows you to customize both the interface used for creating content, and the underlying data model for that content, to fit your specific use case.

Think of this as a user interface on top of the database that stores your content that you don’t need to code yourself. It exposes not only the data, but also the processes used to create it.

Drupal is an API-first CMS

In addition to all the features listed above that you might expect from a CMS, Drupal can also provide a powerful web services API that can be used to retrieve and manage content, as well as perform all of the other actions that a CMS is expected to be able to do.

Since the release of Drupal 8 in 2015 the community has been heavily focused on improving the API features of Drupal and ensuring that all of the system’s features are available via the APIs it provides. Those might be managing users, configuring the application itself, or creating, updating, and listing content.

Combining a CMS with a full-featured API gives editorial teams a singular workflow, and interface, to produce content once, in an environment tailored to their needs, that then gets distributed efficiently to a variety of devices and online experiences. Using a COPE approach (Create once, publish everywhere) allows web (React) and mobile applications (React Native), desktop clients, and business partners, to all access your content.

Traditionally, Drupal is used to both manage content and present it. Your entire website sort of exists inside of Drupal. Decoupled drupal – or “headless Drupal” – is when Drupal is used strictly as a content backend without the inclusion of a presentation layer. There’s no public-facing part of the installation, only the content, the administrative UI, and a web services API for accessing it. If you’re looking to use Drupal as the backend for your React application then this is what you’re looking for.