Design and Development of a Headless Content Management System by IRJET Journal

Design and Development of a Headless Content Management System

Jigisha Kamal1

1Department of Information Science and Engineering, R.V. College of Engineering, Bangalore, Karnataka, India ***

Abstract - Website development has evolved to become a prominent and ever growing field in today’s world. Having an effective web presence is critical for achieving sustainable business growth. However, small scale businesses with limited budgets cannot afford to hire professionals to develop their website. In such a situation, a Content Management System is a cost effective solution as it allows non developers to build websites without the requirement of any coding knowledge. While in a traditional CMS, the frontend and backend are coupled together, in a headless CMS, the backend is completely separated from the frontend thus, making it more flexible and scalable. The purpose of this research paper is to design and develop a headless content management system and evaluate its performance.

Key Words: Web Development, Content Management System, Headless Content Management System, API, React, NodeJS, Docker

1. INTRODUCTION

The internet has grown exponentially in the past two decadesandwiththis,thenumberofbusinessesandusers ontheinternethasincreasedtremendously.Intoday’sday and age, most people prefer to use the internet for everythingfromresearchtobusiness.Thus,ithasbecome increasing important for businesses to enter the digital world.

A well developed website can have an incredible effect in complementing a business’s digital marketing efforts and caneffectivelydrive upsales.Thus,alotofcompanieshave increasedtheirinvestmentinwebdevelopmentsothatthey canenhancetheirbusinessesbymeetingtheneedsoftheir digital consumers. However, the process of developing a websiteisatime consumingtaskandrequiresprofessionals who have knowledge about various web development technologies. This can turn into an expensive affair for businessesthatarejuststartingup[15].Thisalongwiththe rapid developments in the field make it difficult for even developers to keep updated with the latest technologies. ThisiswhereaContentManagementSystem(CMS)comes intopicture.

ACMSisessentiallyasoftwarethatenablesthecreationand storage of contentina digital format. Thiscontent isthen usedtocreateawebsitebasedoncertaintemplates.Itdoes notrequiretheusertohaveanypriorknowledgeaboutweb developmentandcoding.Therearetwopartsthatmakeupa traditional CMS, i.e., a content management application

(CMA)thatenablesausertocreatethecontentandthatwill be displayed on the website and a content delivery application(CDA)thatdeliversthecontent tothe website oncetheusercreatesorupdatesthesame[8].Additionally, there are three types of architecture that are commonly used.Thefirstisthetraditionalormonolithicarchitecture, wherethebackendandfrontendarecoupledtogetherintoa single application. The most popular example of this is Wordpress [6]. A decoupled architecture comes next, in which the backend can either be integrated with the frontendorthecontentcanbepushedtothefrontendvia API calls. But the data from the backend is continuously pushedsomewhereeveniftherearenoAPIcallsbeingmade. Lastlycomestheheadlessarchitecture,wherethebackendis completelyseparatedfromthefrontendorthepresentation layer. The developed content is made accessible via REST APIorGraphQLandcanbedisplayedonanydevicepossible.

Due to the differences in architecture, the performance of these CMSs also varies. This research aims to develop a headless content management system using Javascript, NodeJS, Postgres, Redis, React and Docker, while also providinganinsightintotheadvantagesanddisadvantages of a headless CMS. Along with the headless CMS, an authenticationserviceisalsodevelopedinordertoprovidea levelofsecuritytotheCMSapplication.

2. RELATED WORKS

A comprehensive literature review was conducted with reference to numerous technical journals and writings publishedinstandardperiodicals.Mostoftheresearchdone in this field involves assessing and comparing the performanceofexistingContentManagementSystemslike Wordpress,Drupal,Jumla,etc.

In 2018, a research study [1] was done which involved developingahandcodedandaWordpresswebsitetorender thesamecontentandanalyzetheloadtimeforeach.Itwas foundthattheloadtimeforthehandcodedwebsiteislarger thanWordPressforimage,textandvideocontent,butmore APIcallsaremadeinWordpress.

Anotherresearchin2018wasdone[2]inordertoanalyze the impact of WordPress in website development. It was concludedthatWordpresspowers29%ofallwebsites.Itis backward compatible, provides a number of plug ins and themesfordevelopingwebsites.

| Page697

2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal

International Research Journal of Engineering and Technology (IRJET) e ISSN: 2395 0056

Theauthorsof[3]studiedtheuseofopen sourceCMSsfor creating and managing web content pertaining to all important Union government ministries in India. Their results showed that WordPress is the most prominent globally. In government ministries, Drupal is the most commonlyused.

A unique research done in 2015 [4], involved using data drivenandmobile driventechnologywhichusesduplication andmultiplicationincloudforcreatingastandardanduser friendlywebsite.TheauthorsdevelopedaCMSwhereusers can create and manage their website without pre install software.Itofferedsuperior performancethantraditional CMSs.

Inastudyconductedin2014[5],itwasfoundthatJoomla, Drupal and Wordpress are the top 3 CMSs amongst Comparing Alfresco, Typo3, Dotnetnuke, Drupal, Joomla, Wordpress and Plone, based on system requirements, performance,security,built infeatures,support.However, thereisnooneCMSthatprovidesallthebestfeaturesand the choice of which one to use depends on the user requirements.

Lastly, a 2013 study [6] compared 13 Java based open source CMSs available based on 29 features like admin control,autocodegeneration,multipleusersupport,etc,and concluded that Alfresco is the best available open source CMS.

3. DESIGN OF THE PROPOSED SYSTEM

Thissectiondescribesthedesignoftheoverallsystem.The system is broadly divided into 3 parts. These include the CMS service frontend, the CMS service backend and the Authentication service. In order to get a better understanding of the high level overview of the entire system,theoverall architectureoftheproposedsystemis showninFig 1.

Asseenintheabovefigure,therearetwoservices,the CMSserviceandtheAuthenticationservice.TheCMSservice has a frontend and a backend. Once a user logs into their account,theusercredentialsarestoredintheAuthentication service database and the username is used to generate a uniqueauthenticationtokenfortheuser,whichisstoredin theRediscachedatabase.Thisauthenticationtokenissent back to the CMS frontend and all requests to the CMS backend are authenticated using the token. If the token is valid, data is sent from the CMS service database to the frontend.TheCMSservicebackendandtheauthentication service are dockerized into their respective Docker containers.ADockerimageiscreatedcomprisingofthese twoDockercontainers.Inordertoruntheapplication,only thedockerimageneedstoberun,usingdocker compose.

In order to understand the system from the user’s perspective,anactivitydiagramwasdesignedwhichcanbe seeninFig 2.

Fig 1:ArchitecturefortheDesignandDevelopmentof aHeadlessCMS

Fig 2:ActivityDiagramfortheDesignand DevelopmentofaHeadlessCMS

As seen in the above figure, first, the user is prompted to login.Iftheuserhasanaccount,thecredentialsareaccepted otherwisetheuserisdirectedtotheregistrationpagewhere theycreateanewaccountwithwhichtheycanlogintothe CMS service. Once logged in, the user is directed to the Content Builder page where they can add, edit and delete contenttypesandtheirrespectivefields.Anychangesmade are saved to the collection and fields tables of the CMS servicedatabaserespectively.Sinceauniqueauthentication tokenisgeneratedforeachuserwhentheylogin,thereisa continuouschecktoseewhethertheauthenticationtoken hasexpired.Ifthetoken expires,theuserisautomatically logged out of their account and taken to the login page. Otherwise, the user can continue to make changes on the CMSpages.Iftheuserdoesn’twishtoadd,editordeletethe contenttypeorit’sfields,theycannavigatetotheCollection

International Research Journal of Engineering and Technology (IRJET) e ISSN: 2395 0056

Volume: 09 Issue: 07 | July 2022 www.irjet.net p ISSN: 2395 0072

Entries Page where they have the option to add, edit and delete entries for a particular content type. The changes made are saved to the entries table of the CMS service databaseandreflectedonthefrontendinrealtime.Allthe pages provide the user with a logout functionality, using whichtheusercanlogoutoftheiraccount.

4. METHODOLOGY

This section describes the development process that has beenfollowedtocreatetheheadlessCMS.Thedevelopment oftheentireapplicationhasbeendividedinto4tasks.The firstistodevelopanauthenticationservicewhichprovides functionalitiestoregisterandloginauserandenablesaccess control using an authentication token. Second comes the design and development of the headless CMS service that willenablecontentcreation,contentstorage.Thethirdtask includesintegratingtheauthenticationservicewiththeCMS service.Lastly,theentireapplicationisdockerized.

4.1 Development of the Authentication Service

Thisinvolvesdevelopingthefunctionalitiesthatwillallowa user to register and login to their CMS account. An authenticationtokenisgeneratedeverytimetheuserlogsin andthisisuniqueforeachregistereduser.Thisisstoredasa key valuepairinRedis,acachedatabase.Thistokenisused to maintain access to the CMS account and an expiration timeissetafterwhichthetokenbecomesinvalidandthus, theuserisloggedoutoftheiraccount.Theauthentication serviceisaccessedviaAPIcalls.

Asapartofthisservice,thedatabaseschemaforstoringthe user data is created and then the API endpoints for registration and login are created. The login is then integrated with Redis to generate unique authentication tokens for each user. For the login API, the credentials entered by the user would be sent as request body parameters in the API call. The login service would then makeaquerytocheckwhetherthecredentialshaveamatch inthedatabase.Ifthecredentialsmatch,asuccessmessage isreturnedbutiftheusernameiscorrectbutthepasswordis incorrectamessagestatingthesameisreturned.Lastly,if neither the username and password match, a message requeststheusertoregisterisreturned.Similarly,forthe registrationAPI,whereanewuseriscreated,thecredentials and details entered by the user would be sent as request bodyparametersintheAPIcallandaquerytoaddthedata tothePostgresdatabasewouldbemade.

4.2 Development of the CMS Service

This constitutes the core of the research and involves developing the frontend and backend for the Content Management System. This service should enable a user to create a new content type and dynamically update it by adding fields to that content type. Additionally, the user shouldbeabletocreatedataforagivencontenttypeinthe

formofentriesandthereshouldbefunctionalitythatgetsall the data for a given content type. Furthermore, the user shouldhavetheoptiontoeditanddeletethecontenttype anditsrespectivefieldsandentries.

Inordertoachievethis,firsttheCMSbackendisdeveloped which includes designing the database schema and developingtheAPIsthatwillhandlethecreation,editingand deletingofa contenttype,it’sfieldsanditsentries.Itwas decidedtostoreaparticularcollection’sfieldsandentriesin theJSONformatasasinglefield(fieldnameandfieldtype) andentry(entrydataandfield)wouldbeeasilyaccessible. Thereare2mainpagesasapartoftheapplication.These aretheContentBuilderpageandtheCollectionEntriespage.

TheContentBuilderpagethatenablestheusertoview,add, edit or delete different content types and their respective fields.Theusercanusetheuserinterfacetoaddacontent type and this is saved in the CMS service database which thenreturnsthelistofallthecontenttypes(includingthe newlyaddedcontenttype)andthisisdisplayedtotheuser. Theusercanthenaddfieldstoanewlycreatedoranexisting contenttype.Asapartfields,theuserisrequiredtheenter the name of the field and the data type it will accept. For example,‘Person’canbeacontenttypeand‘Name’canbea field that is added to it which takes the data type ‘String’. Furthermore, the user can edit or delete fields within a content type as well as edit and delete the entire content type. The changes made are reflected in the CMS service databaseaswellasontheuserinterface.

The Collection Entries page enables the user to add, edit entriesforaparticularcontenttype.Theuserisdisplayeda formwheretheyarepromptedtoprovideanentryforeach of the defined fields for that collection type, The data is stored as a JSON containing the entry value and the field name. For example, for the collection type, ‘Person’, a collection entry, ‘Jane Doe’ would correspond to the collection field, ‘Name’. The user can also edit and delete entries for a collection type. All the changes made are reflectedintheCMSservicedatabaseaswellasontheuser interface.

TheHTTPrequestfordataismadetothebackendviathe AxioslibrarywhichtakestheAPIendpointasaparameter andreturnsthedatafetchedfromthedatabase.

4.3 Integration of the Authentication Service with the CMS Service

The CMS service has a register and login page that is integratedwiththeauthenticationservicedeveloped.Thisis done so that all API calls from the CMS that access the databaseserviceareauthorizedviaauniqueauthentication tokenforeachuseroncetheyareloggedintotheiraccount. Theuserisautomaticallyloggedoutoncetheauthentication tokenexpires.Thisprovidesanadditionallayerofsecurity.

Page699

International Research Journal of Engineering and Technology (IRJET) e ISSN: 2395 0056

Volume: 09 Issue: 07 | July 2022 www.irjet.net p ISSN: 2395 0072

4.4 Dockerization of the Application

It is essential to ensure that there are no deployment or runtime issues that arise due to the change in the system that’s deploying the application. This is the reason why Dockerisusedinordertoperformcontainerizationofthe AuthenticationserviceandtheCMSservice.

AdockerfileiscreatedfortheAuthenticationserviceandthe CMSservicewhichdescribesallthecommandsauserwould callonthecommandlinetoassembleanimage.Sincethere are two different services, Docker Compose is used as it helpsindefiningandrunningmultipleDockercontainersas asingleservice.Oncethisisdone,theentireapplicationis presentwithinaDockerimageandcanberunwithasingle command.

5. RESULTS

Thissectioncontainsinformationabouttheresultsthatwere obtainedwhilecarryingoutthisresearch.Italsodiscusses theresultsofthetestingthatwascarriedoutonthesystem.

AheadlessCMSwassuccessfullybuiltthatenablescontent creation and storage. The system was tested extensively usingtheJesttestinglibrary.Unittesting,integrationtesting andsystemtestingwerecarriedouttoensurethateachofthe componentscarryouttheirrequiredfunctionalityaswellas tocheckthattheflowofdatabetweenvariouscomponents andtoensurethataparticularcomponentisnotimpactedby the presence or absence of another component. A code coverageofgreaterthan90%wasachievedforthesystem.

Thedesignedsystemisuserfriendlyandallowsthecreation of various content types, their fields and their respective entries.Thisdatacanthenbeeffectivelyutilizedtocreatea website via API calls. Since a headless CMS completely separated the backend from the frontend, there is no CDA thatisassociatedwiththeapplicationandthedatathathas been created can be accessed via API calls. The developed applicationsupportsthesame.

As a part of the research, a headless content management systemwasdeveloped.ThisdiffersfromatraditionalCMSas itcompletelyseparatesthebackendorthecontentcreation andstoragepartfromthefrontendorthepresentationlayer. Suchanarchitectureenablesmultichannelcontentdelivery asthedataisaccessedviaAPIcallsandthus,canbemodified as required before being displayed onto different devices. Thisalsoenablescontentreuseasthefrontendisdesigned independently. This is not possible in case of a traditional architecture as the frontend and backend are coupled togetherandthereisastructuredpresentationlayerthatgets itsdatafromthecontentdatabaseinthebackend.Unlikea traditionalCMS,withaheadlessCMS,therearenolimitations on the frontend technologies that will used to deliver the content and the technology best suited for the desired

applicationcanbeutilized.ThoughtaheadlessCMSperforms betterintermsoffasterpageloadtimeandprovidesmore customization options, it has a few drawbacks. It is more expensive to develop and does not provide pre built templatestodisplaycontentlikemosttraditionalCMSs.

6. CONCLUSION

Thisresearchdemonstratesthedesignanddevelopmentofa headlessCMS.Thedesignedsystemiseffectiveinproviding capabilitiesforcontentcreationandstoragehowever,itdoes notincludeworkflowmanagementtocontrolpermissions fordifferentlevelsofusersandtomanagevariousrolesand approvals.Theintroductionofthiscanhelpinmakingthe developed system ready for commercial use as workflow managementformsanimportantpartforanybusinessuse case. Furthermore, the introduction of drag and drop featurescanenablemarketerstomodeltheirowncontent based on certain templates. This could be useful for designing somecustomcomponents. Lastly,a featurethat enablesintegrationofdatafeedfromathirdpartylikeaS3 bucketcanreducethemanualworktobedonebytheuseras theywillnothavetomanuallyaddthecollectionsentries. Overall,itcanbeseenthataheadlesscontentmanagement system is more flexible and performs better in terms of fasterpageloadtime.Additionally,itisabetteroptioninthe longrunasthedecouplingofthefrontendandthebackend ensuresthattheentiresystemdoesn’thavetoberedesigned whenanychangesneedtobemade.Itisalsomoresecureas thereisnodirectaccesstothecontentthatisusedtocreate the website. Hence, the use of a headless CMS can have a greatimpactindevelopingagoodwebsiteforabusinessas itsexcellentperformanceintermsofloadtimecangreatly improveawebsite’sranking.

REFERENCES

[1] A. Kumar, A. Kumar, H. Hashmi and S. A. Khan, "WordPress: A Multi Functional Content Management System,"202110thInternationalConferenceonSystem Modeling&AdvancementinResearchTrends(SMART), 2021, pp. 158 161, doi: 10.1109/SMART52563.2021.9675311.

[2] G. Maragatham, S. N. A. Balaji, K. SaiKarthikeyan, V. Gokulakrishnan and M. Siddharth, "A Study on PerformanceAnalysisforDifferentWordpressandHand Code Webpages," 2018 International Conference on Smart Systems and Inventive Technology (ICSSIT), 2018,pp.191 204,doi:10.1109/ICSSIT.2018.8748564.

[3] A.Mirdha,A.JainandK.Shah,"Comparativeanalysisof opensourcecontentmanagementsystems,"2014IEEE InternationalConferenceonComputationalIntelligence and Computing Research, 2014, pp. 1 4, doi: 10.1109/ICCIC.2014.7238337.

2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified

Page700

Journal |

International Research Journal of Engineering and Technology (IRJET) e ISSN: 2395 0056

[4] C. C. Hoong and M. A. Ameeden, "Intuitive Content ManagementSystem,"2015InternationalConferenceon Computer, Communications, and Control Technology (I4CT), 2015, pp. 541 543, doi: 10.1109/I4CT.2015.7219637.

[5] M. Nath and A. Arora, "Content management system: Comparative case study," 2010 IEEE International Conference on Software Engineering and Service Sciences, 2010, pp. 624 627, doi: 10.1109/ICSESS.2010.5552271.

[6] Cabot,Jordi.(2018).WordPress:AContentManagement System to Democratize Publishing. IEEE Software. 35. 89 92.10.1109/MS.2018.2141016.

[7] A. Kumar, A. Kumar, H. Hashmi and S. A. Khan, "WordPress: A Multi Functional Content Management System,"202110thInternationalConferenceonSystem Modeling&AdvancementinResearchTrends(SMART), 2021, pp. 158 161, doi: 10.1109/SMART52563.2021.9675311.

[8] N. A. Khan and H. Ahangar, "Use of Open Content ManagementSystemsinGovernmentSector,"20185th International Symposium on Emerging Trends and Technologies in Libraries and Information Services (ETTLIS), 2018, pp. 183 187, doi: 10.1109/ETTLIS.2018.8485191.

[9] Yermolenko, Andrei & Golchevskiy, Yuriy. (2021). DevelopingWebContentManagementSystems from the Past to the Future. SHS Web of Conferences. 110. 05007.10.1051/shsconf/202111005007.

[10] H.LiduoandC.Yan,"DesignandimplementationofWeb ContentManagementSystembyJ2EE basedthree tier architecture: Applying in maritime and shipping business,"20102ndIEEEInternationalConferenceon Information Management and Engineering, 2010, pp. 513 517,doi:10.1109/ICIME.2010.5477670.

[11] C. Esperança and A. Pereira, "Content management system for e Government portals," 2016 11th Iberian ConferenceonInformation SystemsandTechnologies (CISTI), 2016, pp. 1 6, doi: 10.1109/CISTI.2016.7521369.

[12] D. Michelinakis, "Open Source Content Management Systems: An Argumentative Approach", Award MSc Electron.Bus.Manag,pp.113,2004.

[13] U.NaikandD.Shivalingaiah,"Opensourcesoftwarefor content management system", Proc. 7th Int. CALIBER PondicherryUniv.Pondicherry,pp.225 239,2009.

[14] X.CaoandW.Yu,"UsingContentManagementSystem Joomla!toBuildaWebsiteforResearchInstituteNeeds,"

2010 International Conference on Management and Service Science, 2010, pp. 1 3, doi: 10.1109/ICMSS.2010.5577465.

[15] P. Kiatruangkrai, P. Phusayangkul, S. Viniyakul, N. Prompoon and P. Kanongchaiyos, "Design and Development of Real Time Communication Content Management System for E Commerce," 2010 Second International Symposium on Data, Privacy, and E Commerce, 2010, pp. 111 116, doi: 10.1109/ISDPE.2010.24.

[16] Chang Liu, Kirk P. Arnett, “Exploring the factors associated with Web site success in the context of electronic commerce”, Information & Management, Volume38,Issue1,2000,Pages23 33,ISSN0378 7206, doi:10.1016/S0378 7206(00)00049 5.

[17] Martinez Caro, Jose Manuel, Antonio Jose Aledo Hernandez, Antonio Guillen Perez, Ramon Sanchez Iborra,andMaria DoloresCano.2018."AComparative Study of Web Content Management Systems" Information 9, no. 2: 27. https://doi.org/10.3390/info9020027