Adobe Experience Manager Tutorials

Thursday, 10 January 2019

The need of AEM Admins and developers to understand Docker - AEM with Docker

Now a days distributed deployment is becoming common and Agile DevOps highly depends on containerized deployments. It was started with Microservice s and now stretching its wings.

The advantage of using AEM with docker
AEM With Docker fastens the deployment process. Any latest PRODUCTION environment could be imported to local file path as images. Say the TEST environment is crashed by some means, we can replace/repair this with docker images. These imported images can be exported to any Docker systems and will be useful to expand instances on-demand basis.

What is docker?

Docker allows you to run applications in an isolated environment with its own CPU, memory and network stack.

Docker needs a docker file to create an image from AEM and its dependencies. This image is then deployed to a new environment where code deployments are configured. This setup ensures the new environment is up and ready in few minutes.

AEM WITH DOCKER- Click on Image to see it big

Is AEM Docker combination a good pair?

There are arguments that AEM is state-ful where in repositories holds the content, still a brand new environment of AEM can be made available quickly. There are also reports that Adobe is working to make AEM Compatible with Docker and AEM builds are coming as docker images.

How does it impact the AEM Admins/ developers who work with AEM?

Since docker is the new deployment trend, it is highly recommended that AEM admins/ developers need to get a good understanding on docker and containerization techniques.

Tuesday, 18 December 2018

AMP with AEM - Demonstrating the ability of Content Fragments in AEM

AMP integration with AEM - CaaS Model(Content as a service) demo

I was receiving requests for writing sample code to showcase Third party AMP page which retrieve data from AEM (Content as a service).

What is AMP?

The AMP Project is an open-source Google-run website publishing technology initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. More details on https://www.ampproject.org/

How can I develop AMP websites?

You need to refer the above url for implementing AMP Projects, which has detailed information about syntax of AMP.

AMP integration with AEM

Step 1: To work with AMP and AEM, create an AMP file as shown below and deploy it on any server.
(You can refer PWA implementation & deployment article for the same: Set-up PWA running environment).

A sample AMP Structure is given below.

Save below file as 'Sample_AMP.html'

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>AMP demo with AEM</title>
<link rel="canonical" href="index.html" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
         <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
</head>
<body>
<amp-list width="auto"
height="100"
layout="fixed-height" src="test.json">
<template type="amp-mustache">
    <div class="url-entry">
      <a href="{{url}}">{{title}}</a>
    </div>
</template>
</amp-list>
</body>
</html>

It takes a JSON input file(src="test.json") and publish data on page.

Step 2: Author a content fragment in AEM which has JSON format as below.
Follow this link for Creating & Authoring Content Fragments: Create & Author Content Fragments in AEM

{
"items": [
   {
     "title": "AMP YouTube",
     "url": "https://www.youtube.com/"
   },
   {
     "title": "AMPproject.org",
     "url": "https://www.ampproject.org/"
   },
   {
     "title": "AEM Tutorial Blog",
     "url": "http://aem-cq-tutorials.blogspot.com/"
   },
   {
     "title": "Solr with AEM Totorial",
     "url": "http://aemsolr.blogspot.in/"
   }
]
}

Step 3: Now, update the 'Sample_AMP.html' for src="test.json"with publish url of content fragment authored page

Step 4: Ensure CORS is enabled in AEM. (Confused? Refer https://aem-cq-tutorials.blogspot.com/2018/12/integrate-pwa-aem-and-retrieve-aem.html to updated CORS)

Step 5: Now invoke the AMP file, from server, you can see that data is appearing as shown below.

AMP with AEM - click on it to see big

*(I haven't done styling just Functionality is tested).

Notes:
AMP - uses specific tags and syntax which needs to be validated after each change in code. You can use online AMP validator(https://validator.ampproject.org/) for this purpose.

Related Posts

>Step 1: Set-up PWA running environment
>Step 2: How to create & Deploy a Progressive Web Application
>Step 3: Create & Author Content Fragments in AEM
>Step 4: Integrate PWA & AEM and retrieve the AEM content from PWA.

AEM Content Fragments Demo: Integrate AMP with AEM

Friday, 14 December 2018

Working with Content Fragment Model in AEM 6.4

We know that AEM Content Fragments helps to describe and manage structured content, where in Content Fragment Model helps to Define the structure of Content Fragment

Steps to work with AEM Content Fragment Models

Enable use of content fragment models in configuration manager.
Apply the configuration to Assets folder.
Creating a Content Fragment Model.
Update the definition of Content Fragment Model.
Publish it.
Delete it.

In this video we will see how to work with Content Fragment Model in detail.

Related Posts
https://aem-cq-tutorials.blogspot.com/2018/12/steps-to-create-custom-content-fragment.html

https://aem-cq-tutorials.blogspot.com/2018/06/create-content-service-end-point-in-aem.html

https://aem-cq-tutorials.blogspot.com/2018/05/aem-64-content-fragment-output-as-json.html

Integrate PWA & AEM and retrieve the AEM content from PWA.

Previous post on this topic

Create & Author Content Fragments in AEM

Hope the Content Fragment and related changes are published already.

Now let us enable CORS, Anonymous access in publish environment.

Step 1: Add CORS details:

Since we are going to access the Content Fragment from external application, we may get CORS error(Cross-origin resource sharing). To enable the CORS access, we need to make some changes in AEM publish instance.

Go to AEM system > Console > ConfigManager > Apache Sling Main Servlet

Click on (+) icon and add new property for 'Additional response headers' as 'Access-Control-Allow-Origin=http://localhost:5000'

[AEM CORS ISSUE RESOLVED] - click on image to see it big

The new Content Fragment Model is now anonymously accessible on AEM Publish.

Now go back to PWA home page and click on the button, you can see that data is retrieved from AEM as shown below.

[Content Fragment Output to third party PWA application]

We now created a sample PWA and pulled content from AEM.

If you face any issue and need help in running this demo, please let me know through the comments.

Demo

Create & Author Content Fragments in AEM

Previous post on this topic
How to create & Deploy a Progressive Web Application

Login to AEM, go to Assets > Files.
Let us create a folder now called 'My Samples' by clicking the create button.

Create CF Folder - click on it to see it big

Now go inside the folder and click on create > Content Fragment.

Then Select the Simple Fragment template. Enter title and description and then click on create.

Create Content Fragment AEM

In next dialog click on open and edit content fragment as shown below.

[Author CF]

To access the content fragment, we need to author it on a page. Let us author it on a sample we-retail page.

Now go to sites> we-retail > us >en > Men, open it for editing.

From component browser, drag and drop 'Content Fragment' component on the page.

[Author Content Fragment AEM 6.2 onwards

Click on Configure and add the newly created Content Fragment and save it.

[Authoring and landing]

We have the authored Content Fragment now. We can access it over the JSON Exporter API by invoking the '.model.json' in author instance, For me it was below URL.

http://localhost:4502/content/we-retail/us/en/men/jcr:content/root/responsivegrid/contentfragment.model.json

Note: This URL needs to be updated in file "retrieve_content_fragment.js" at line '$("button").click(function(){ $.ajax({url:'

The sample output is given below.

[AEM 6.4 Content Fragment Output]

Now Publish the page where Content Fragment is authored. So that all data is available in AEM Publish

Demo

Next post:
Integrate PWA & AEM and retrieve the AEM content from PWA.

How to create & Deploy a Progressive Web Application

Previous post on this tutorial
Setting up an environment to run Progressive Web Applications

Here I will showcase how to create a very minimal sample PWA and deploying it.

Step 1 : Create a folder 'my-aem-pwa-sample'
Step 2 : Go inside the folder
Step 3 : Create a file called 'index.html' and paste below content.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#008000"/>
    <title>PWA demo with AEM</title>
    <link rel="stylesheet" type="text/css" href="my-aem-pwa-style.css" media="all">
    <link rel="manifest" href="manifest.json">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="retrieve_content_fragment.js"> </script>
</head>

    <div class="content">
        <h1>-Progressive Web App demo with AEM-</h1><br>
        <button class="button">Retrieve Content Fragment Data</button>
        <h3><div id="div1" align="center" style="background-color: #FF9800"></div></h3>
    </div>

<script>
     if('serviceWorker' in navigator) {
       navigator.serviceWorker.register('/serviceworker.js')
         .then(function() {
               console.log('Service Worker Registered');
         });
     }
   </script>
</body>
</html>

Step 4 : Create a file called 'manifest.json' and paste below content.

{
    "name": "PWA demo with AEM",
    "short_name": "PWA",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#FF9800",
    "theme_color": "#FF9800"
}

Step 5 : Create a file called 'my-aem-pwa-style.css' and paste below content.

body {
#background-color: #ffcc00;
color: black;
}

.content {
#    max-width: 1000px;
    margin: auto;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    #background-color: #ffcc00;
}

.button {
    background-color: #008000;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0px 0px;
    cursor: pointer;
}

.vertical-container {
height: 300px;
display: -webkit-flex;
display:         flex;
-webkit-align-items: center;
          align-items: center;
-webkit-justify-content: center;
          justify-content: center;
}

h1.vertical-container {
font-size: 275%;
}

Step 6 : Create a file called 'retrieve_content_fragment.js' and paste below content.
You need to update the blue color line of code based on your content fragment created

$(document).ready(function(){
        $("button").click(function(){

            $.ajax({url: "http://localhost:4503/content/we-retail/us/en/men/jcr:content/root/responsivegrid/contentfragment_1847490508.json", dataType: "json", success: function(result){
                $("#div1").html("Sorry! Unable to retrieve data; Please try again!");
                var obj = JSON.stringify(result);
                var strresultParsed= JSON.parse(obj);
                $("#div1").html(strresultParsed.text);
            }});
        });
});

Step 7 : Create a file calles 'serviceworker.js' and paste below content.

var cacheName = 'my-aem-pwa-demo';
var filesToCache = [
'/',
'/index.html',
'/my-aem-pwa-style.css'
];

self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
);
});

self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
);
});

Now the folder looks as below.

PWA Folder structure - click on this to see it big

Step 8 : Now open a command prompt inside folder 'my-aem-pwa-sample' and run below command

'serve .'

You can see below response.

serve

Step 9 : Open the browser and hit the url 'http://localhost:5000' (This is the url of application deployed and stared as seen in above screenshot).

Now the PWA sample application is running on port 5000.

PWA UI

Next post
Create & Author Content Fragments in AEM

demo

Setting up an environment to run Progressive Web Applications

Previous post on this topic

AEM With Progressive Web Apps - Demonstrating the ability of Content Fragments in AEM - Display AEM Content to Third Party Applications

We need Node Package Manager for running this tutorial. Follow below steps to install node and related tools.

Step 1: Install npm, Node
As part of deploying PWA, we will use Node js & Node Package Manager(npm). While installing Node.js, we will automatically get npm installed on computer.

Use this link for node js download. https://nodejs.org/en/

List of all Operating System installers : https://nodejs.org/en/download/package-manager

Once npm and node is installed, ensure below commands are returning respective versions to confirm the installation was successful.

cmd> node -v

cmd> npm -v

Step 2: Install Serve

Serve helps developing a static PWA project, When ever there is a single page application or just a static file needs to be deployed, we can use 'serve' module.

Follow below steps to install serve. More details here [https://www.npmjs.com/package/serve]

Execute below command to install serve.

cmd> npm install -g serve

Once serve package is installed, please ensure installation was successful by running below command.

cmd> serve -v

Once server module is installed, you can go inside any folder and just run below command to start the server and deploy the single page.

cmd> serve .

Demo

Next post
How to create & Deploy a Progressive Web Application