Edge Delivery Services Code Structure
As part of this blog, we will do deep discussion around Edge Delivery Services project code structure. Follow link to checkout code in local for better understanding.
As we know, Edge delivery Services is server less architecture and completely depends on JavaScript, HTML and CSS.
Follow this link to checkout code repo in local.
It comprises of multiple folders and files. As part of this blog, we will try to cover most of the files and folders.
fstab.yaml → This is very important file which helps us to mount our project and content
head.html → This file allow us to load out-of-the-box aem.js, script.js and styles.css files. It also responsible for loading or display our content on page.
Styles → styles folder contains global and fonts CSS. styles.css gets loaded from head.html, fonts.css gets load from script.js
fonts and icon → fonts folder is mainly having fonts files which gets refer from CSS files. We can place icons in icons folder.
blocks → blocks folder contains multiple block which is nothing but components having respective JavaScript and CSS. For example, cards block folder having cards.css and cards.js which is responsible for loading cards on page.
In every block JavaScript file we have decorate function which allow us to manipulate and render DOM on the page.
scripts → scripts folder contains out-of-the-box JavaScript files. aem.js is out-of-the-box edge delivery services core file.
script.js is an important out-of-the-box file which helps us to render OOTB and custom blocks(components).
favicon.ico → It is responsible for loading favicon on page.
404.html → 404.html allow us to show error page if in case resource not found.
.hlxignore → There are some files in our repo that should not be served from our website, either because we wish to keep them private or they are not relevant to the delivery of the website (e.g. tests, build tools, build artifacts, etc.) and don’t need to be observed by the AEM bot. We can add those to a .hlxignore file in the same format as the well-known .gitignore file.
Edge Delivery Services Overview
Development
Personalized Google Drive
Sidekick Chrome Extension
Page Hierarchy
Local environment Setup
Page HTML Structure
Section Metadata
Metadata
Redirects
Response Headers
Access excel data in JSON format
Fragment
Forms
Indexing
Services Sitemap and robots.txt
Code Structure
Card Block Example
I hope you found out this article interesting and informative. Please share it with your friends to spread the knowledge.
You can follow me for upcoming blogs follow.
Thank you!
