{"id":3039,"date":"2019-05-09T19:08:49","date_gmt":"2019-05-09T13:38:49","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=3039"},"modified":"2025-02-25T11:11:06","modified_gmt":"2025-02-25T05:41:06","slug":"decoupling-drupal-to-use-only-as-a-backend","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/decoupling-drupal-to-use-only-as-a-backend","title":{"rendered":"Decoupling Drupal to Use Only as a Backend"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.idslogic.com\/blog\/decoupling-drupal-to-use-only-as-a-backend\/#Steps_to_Create_a_Sample_API\" title=\"Steps to Create a Sample API:\">Steps to Create a Sample API:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.idslogic.com\/blog\/decoupling-drupal-to-use-only-as-a-backend\/#Some_Useful_Information_About_the_Same\" title=\"Some Useful Information About the Same:\">Some Useful Information About the Same:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.idslogic.com\/blog\/decoupling-drupal-to-use-only-as-a-backend\/#Some_extra_Ideas_to_Ponder\" title=\"Some extra Ideas to Ponder:\">Some extra Ideas to Ponder:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><span style=\"font-size: 18pt; color: #008000;\"><strong>Introduction:<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Let\u2019s be honest here. Drupal is not particularly known for its themes or its intuitive UI. The emergence of frameworks like Angularjs and Reactjs also doesn&#8217;t help this fact. Developers are opting for these frameworks for better site visuals that will eventually improve the site&#8217;s productivity.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">In this blog, we are going to see how to use Drupal purely as a backend framework that gives the data so that we can setup the frontend of the site using Angular or React.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Essentially, we are going to decouple Drupal and the frontend framework and maintain them separately.<\/span><\/p>\n<hr \/>\n<p><span style=\"font-size: 14pt; color: #008000;\"><strong>THINGS TO NOTE BEFORE STARTING<\/strong>:\u00a0<\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\">We are going to be listing the Events in the Drupal as a sample requirement.<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Also, we will be focusing more on Drupal part rather than Reactjs in this blog.<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">This blog assumes that you already have a considerable experience with Drupal and Reactjs to work individually with them.<\/span><\/li>\n<\/ul>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Steps_to_Create_a_Sample_API\"><\/span><span style=\"font-size: 18pt; color: #008000;\"><strong>Steps to Create a Sample API:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><span style=\"font-size: 14pt;\">First, we need Drupal and Reactjs environments already available in the machine<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">In Drupal, in the configuration page enables all the web services that are available.<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Use of services, RESTFUL API and Services Views modules are highly advised.<br \/>\n<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3040\" src=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal.png\" alt=\"Drupal\" width=\"800\" height=\"310\" srcset=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal.png 800w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-300x116.png 300w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-768x298.png 768w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-560x217.png 560w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\">Create a new View &#8220;sample view&#8221; or whatever name and select the provide REST export as an option. Also specify the URL endpoint for the API like &#8220;events\/list&#8221;.<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Add a filter criterion in the filter for content type as &#8220;Events&#8221;<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3041\" src=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-img.png\" alt=\"Drupal img\" width=\"800\" height=\"498\" srcset=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-img.png 800w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-img-300x187.png 300w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-img-768x478.png 768w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2019\/05\/Drupal-img-560x349.png 560w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/span><\/p>\n<ul>\n<li><span style=\"font-size: 14pt;\">Save the view.<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">That is all, a basic setup has been done to get the API response to the events listing in Drupal.<\/span><\/li>\n<li><span style=\"font-size: 14pt;\">Goto &lt;sitename&gt;\/events\/list to get the listing of all the events.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt;\">Use the above URL in the Reactjs setup that you have created to get the listing and you can use that response along with Reactjs template coding to get a better looking site.<\/span><\/p>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"Some_Useful_Information_About_the_Same\"><\/span><span style=\"font-size: 18pt; color: #008000;\"><strong>Some Useful Information About the Same:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">The Services, RESTFUL api modules and other modules that we enabled to give us a set of general API endpoints that can be used from the get Go. Refer to the respective project page to get the full set of APIs available. This is just the tip of the iceberg. This blog is to show the bare minimum required to decouple Drupal and use it as a backend of a site.<\/span><\/p>\n<div style=\"margin: 40px auto; border: 2px solid #f46f25; padding: 20px 25px; border-radius: 6px; background: 0;\">\n<div style=\"display: inline-block; vertical-align: middle; width: 62%;\"><span style=\"font-size: 14pt;\"><strong>Are You Looking to Hire Dedicated Drupal Developers for Your Project?<\/strong><\/span><\/div>\n<div style=\"display: inline-block; vertical-align: middle; width: 36%;\"><span style=\"font-size: 14pt;\"><a style=\"padding: 10px 22px; margin-bottom: 0; line-height: 1.3em; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; color: #ffffff; background-color: #f46f25; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: block;\" href=\"https:\/\/www.idslogic.com\/dedicated-drupal-developer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Call us today!<\/a><\/span><\/div>\n<\/div>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"Some_extra_Ideas_to_Ponder\"><\/span><span style=\"font-size: 16pt; color: #008000;\"><strong>Some extra Ideas to Ponder:<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">Other ideas include using Angularjs as a frontend. Using Angularjs along with Cordova, we can even create a neat Android and IOS app for our site.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">For more info Go to this link https: \/\/cordova.apache.org\/.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">https: \/\/ionicframework.com\/ is also another platform that can be used for this.<\/span><\/p>\n<blockquote>\n<p style=\"box-shadow: 0 0 16px #cccccc; padding: 10px;\"><span style=\"font-size: 14pt;\"><span style=\"color: #800000;\"><strong>Also Read:<\/strong><\/span>\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/blog\/drupal-modules-custom-or-contrib\">Drupal Module Development : Custom or Contributed?<\/a><\/span><\/span><\/p>\n<\/blockquote>\n<p><span style=\"color: #800000; font-size: 14pt;\"><strong>Contributed By:<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Anand Kumar<\/span><\/p>\n<div class=\"newsletter_form\">\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Let\u2019s be honest here. Drupal is not particularly known for its themes or its intuitive UI. The emergence of frameworks like Angularjs and Reactjs also doesn&#8217;t help this fact. Developers are opting for these frameworks for better site visuals&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3042,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256],"tags":[534,549],"class_list":["post-3039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms","tag-drupal-development","tag-drupal-development-company"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/3039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=3039"}],"version-history":[{"count":4,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/3039\/revisions"}],"predecessor-version":[{"id":10716,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/3039\/revisions\/10716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/3042"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=3039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=3039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=3039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}