Adobe Experience Manager Headless

I'm trying to build the WKND SPA React sample project and I'm getting the following error: [ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.12.0:install-node-and-npm (install node and npm) on project aem-guides-wknd-spa.react.ui.frontend: Could not download Node.js from: https://nodejs.org/dist/v12.22.7/win-x64/node.exe: Could not download https://nodejs.org/dist/v12.22.7/win-x64/node.exe: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target I'm aware this is an certificate issue, and it would normally be resolved by adding the nodejs cert to my Java certificate store. I've already done that though and I'm still getting the errors. On AEM 6.5.0, I was able to build the project successfully after adding the cert to the JDK cert store, but now that I'm working with 6.5.12, I'm having no luck. Hoping to get some suggestions on what to try next.

I am trying to access graphql ide from my AEM as cloud service on premise setup on below mentioned path but getting some error, could you please help me resolve this error. http://localhost:4502/content/graphiql.html.  

Hello, I am littered with errors and deprecated packages when using the WKND SPA repo and following the Adobe's documentation to implement an SPA. There are always issues either in the ui.frontend with package version collisions or packages in Maven that are not resolving. Are there any reliable resources to implement an up to dat SPA in AEM or are we stuck with deprecated packages and packages not resolving in the frontend? Any tutorials or repos with clean code and working packages would be greatly appreciated.  

There are many different AEM Headless Tutorials available on the following overview page: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/overview.html?lang=enThey cover many various use cases and frameworks: pure headless, remote editor, AEM SPA Editor, GraphQL, Content Services. - I would like to learn about the differences, advantages and disadvantages of all these possible options at a general level, in order to have an overview of them. I would also like to learn about the selected best and most popular options at a deeper level, but don't know which of them are the best. I would especially like to learn more about content fragments and experience fragments while doing these tutorials. I have a limited amount of time which I can invest in doing these tutorials. - I can do 2 or 3 of these tutorials in the current year. We use Vue.js as the frontend framework at our project (together with AEM 6.5 on-premise), but

I've been currently looking at the GraphQL API in the latest SDK and documented here: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/graphql/graphql-and-external-app.html?lang=en#prerequisites We currently still use an on-prem version of AEM and it looks like this functionality is currently only available in the Cloud Service solution.  Is there any plan to release a feature pack with the GraphQL API capabilities for 6.5 and the additional content fragment features (e.g. fragment reference types)?

Hello, all.I have received service credentials for our AEM Cloud service using the process described at https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/authentication/service-credentials.html. At one time, I was able to obtain an access token from our .NET application successfully using custom code to integrate with IMS. However, I am now receiving a 400 "bad request" error when trying to do this now. The error in the response is "JWT has no valid metascope claims." The credentials I received contained the metascope "ent_aem_cloud_api," and that still appears in the credentials when I view them now from the Developer Console. I am translating this into the claim "https://ims-na1.adobelogin.com/s/ent_aem_cloud_api" with a value of "true" before creating the encoded JWT token.Does anyone have an idea of what might be causing this error?

Hello,I was looking for Adobe LiveCycle Right management service to protect downloaded PDF document inside our application. I couldn't find how to start implementing the Rights Management serviceIs there any link where i can get API/sdkThank you 

The Experience League team is introducing a developer portal microsite designed to consolidate and centralize some of the best resources for getting started with AEM Headless:   https://experienceleague.adobe.com/landing/experience-manager/headless/developer.html   What other resources are developers expecting to see here? Feedback appreciated! 

Hi team,Whenever I modify the teaser component in 6.4, Text(of teaser comp) alignment was going towards left . But when I refresh the page, Text alignment was fine. But My client is not happy with refreshing the page (even auto refresh too). Is there any solution to alignment? I mean once I author the teaser component, it should work fine.Is this a known issue ,does this resolved in 6.5?Please answer currently I have given a fix with "afteredit" with "REFRESH_PAGE" option but they are not happy with this approach and "afteredit" with "REFRESH_SELF" option is not correcting the alignment.

I have created a component in AEM 6.5.8 and gave author permissions to users. When they try to edit the component it shows “Null” and where as user with admin access is able to view and edit component without any issue. When checked the log files it shows it’s treating author users as anonymous users. Can some one please help me with this issue, thank you 

The America’s AEM Expert Solution Consulting Team is growing.  We are looking for people that are passionate about the CMS technology space with deep product knowledge and domain thought-leadership that can bring unique value to our prospects in the AEM sales cycles. Feel free to apply to the link below:Developer First Solution Consultant Developer First Solutions Consultant with experience in App Builder / AIO / Serverless  and Front End Web / Headless CMS Development When applying make sure to (Add source-Adobe.com)

Headless Getting Started Guide by Adobe Abstract The Headless Getting Started Guides lay out a simple path for for creating, managing, and delivering experiences using AEM as a Cloud Service in five steps for users who are already familiar with AEM and headless technology. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. Creating a Configuration Creating a Content Fragment Model Creating an Assets Folder Creating a Content Fragment Accessing and Delivering Content Fragments Audience The tasks described in the Headless Getting Started Guides are necessary for a basic end-to-end demonstration of AEM’s headless capabilities. Anyone with administrator access to a test AEM instance can follow these guides to understand headless delivery in AEM, though someone with developer experience is ideal. Read Full Blog Headless Getting Started Guide Q&A Please use this thread to ask the related questions.

AEM Headless Developer Journey by Adobe Abstract Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to leverage them on your first headless development project. This journey provides you with all the AEM Headless Documentation you need to develop your first headless application. Introduction Headless implementation forgoes page and component management as is traditional in full stack solutions and focuses on the creation of channel-neutral, reusable fragments of content and their cross-channel delivery. It is a modern and dynamic development pattern for implementing digital experiences. AEM Documentation Journeys A Documentation Journey ties together many different and perhaps complicated topics and features by providing a narrative that helps the reader, who can be new to AEM, understand and solve a business problem from beginning to end, while assuming minimal prior topic or AEM knowledge. Documentation Journeys

Headless Development for AEM Sites as a Cloud Service by Adobe Abstract Learn how AEM as a Cloud Service’s powerful headless capabilities like Content Models, Content Fragments, and the GraphQL API work together to enable you to manage your experiences centrally and serve them across channels. Overview Headless implementation is increasingly becoming important for delivering experiences to your audience is, wherever they are and regardless of channel. Headless implementation forgoes page and component management as is traditional in full stack and hybrid solutions and focuses on the creation of channel-neutral, reusable fragments of content and their cross-channel delivery. It is a modern and dynamic development pattern for implementing web experiences. Comparing Headful and Headless This document focuses on the full headless implementation model of AEM. However headful versus headless need not be a binary choice in AEM. Headless features can be used to manage and deliver your cont

Headful and Headless in AEM by Adobe Abstract Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice isn’t binary. AEM offers the flexibility to exploit the advantages of both models in one project. This document provides and overview of the different models and describes the levels of SPA integration. Overview AEM offers powerful tools to manage both the creation of content and its delivery in one platform. This is a traditional “headful” model of content management, where the content authors and developers work on the same platform to deliver the experiences to the content consumers. AEM can also be used to simply manage content, allowing presentation and delivery of the content to be managed by another platform. This is the “headless” model of content management, where the content authors and developers work on different platforms to deliver experience to the content consumers. But this need not be a binary choice. AEM offers unp

Getting Started with AEM Headless - GraphQL by Adobe Abstract Video:https://images-tv.adobe.com/mpcv3/4981/e9fa4575-426f-4406-949c-95bff87e8c2d_1607125021.854x480at800_h264.mp4 AEM’s GraphQL APIs for Content Fragments supports headless CMS scenarios where external client applications render experiences using content managed in AEM. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Using a REST API introduce challenges: Large number of requests for fetching one object at a time Often “over-delivering” content, meaning the application receives more than it needs To overcome these challenges GraphQL provides a query-based API allowing clients to query AEM for only the content it needs, and to receive using a single API call. This video is an overview of the GraphQL API implemented in AEM. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deploymen

Token-based authentication to AEM as a Cloud Service by Adobe Abstract Video: https://images-tv.adobe.com/mpcv3/5040/23c900e0-7b81-4b1e-a0c9-5c625227846e_1610547841.854x480at800_h264.mp4 AEM exposes a variety of HTTP endpoints that can be interacted with in a headless manner, from GraphQL, AEM Content Services to Assets HTTP API. Often, these headless consumers may need to authenticate to AEM in order to access protected content or actions. To facilitate this, AEM supports token-based authentication of HTTP requests from external applications, services or systems. In this tutorial well explore how an external application can programmatically authenticate and interact with to AEM as a Cloud Service over HTTP using access tokens. External Application overview This tutorial uses a simple Node.js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. Read Full Blog Token-based authentication to AEM as a Cloud Service Q&A Ple

Getting Started with AEM Headless - Content Services by Adobe Abstract Video: https://images-tv.adobe.com/mpcv3/d1a4ed05-9dae-492f-8505-66c2cfdccbe3_1564765898.1920x1080at3000_h264.mp4 AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or reference, the content to expose on these endpoints. AEM Content Services allows for the same content abstractions used for authoring web pages in AEM Sites, to define the content and schemas of these HTTP APIs. The use of AEM Pages and AEM Components empowers marketers to quickly compose and update flexible JSON APIs that can power any application. Content Services Tutorial An end-to-end tutorial illustrating how to build-out and expose content using AEM and consumed by a native mobile app, in a headless CMS scenario. This tutorial explores how AEM Content Services can be used to power the experience of an Mobile App that displays Event information (music, performance, art,

iOS SwiftUI App - AEM Headless Example by Adobe Abstract Video: https://images-tv.adobe.com/mpcv3/6284/04eb7687-5921-47e2-9939-57e40a373487_1634775922.854x480at800_h264.mp4 Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This iOS application demonstrates how to query content using the GraphQL APIs of AEM. The Apollo Client iOS is used to generate the GraphQL queries and map data to Swift objects to power the app. SwiftUI is used to render a simple list and detail view of the content. How to use Clone the aem-guides-wknd-graphql repository: git clone git@github.com:adobe/aem-guides-wknd-graphql.git Launch Xcode and open the folder ios-swiftui-app Modify the file Config.xcconfig file and update AEM_HOST to match your target AEM Publish environment // Target hostname for AEM environment, do not include http:// or https:// AEM_HOST = localhost:4503 // GraphQL Endpoint AEM_GRAPHQL_ENDPOINT = /content/cq:graphql/wknd/endpoint

Android App - AEM Headless Example by Adobe Abstract Video: https://images-tv.adobe.com/mpcv3/6285/c09f070e-eafd-400b-a4b6-8c5eac6a47b2_1634842665.854x480at800_h264.mp4 Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). An Android application is provided that demonstrates how to query content using the GraphQL APIs of AEM. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. How to use Clone the aem-guides-wknd-graphql repository: git clone git@github.com:adobe/aem-guides-wknd-graphql.git Launch Android Studio and open the folder android-app Modify the file config.properties at app/src/main/assets/config.properties and update contentApi.endpoint to match your target AEM environment: contentApi.endpoint=http://10.0.2.2:4502 contentApi.user=admin contentApi.password=admin Download an Android Virtual Device (min API 28) Build and deploy the app using the Andro

React App - AEM Headless Example by Adobe Abstract React App Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). A React application is provided that demonstrates how to query content using the GraphQL APIs of AEM. The AEM Headless Client for JavaScript is used to execute the GraphQL queries that power the app. How to use Clone the aem-guides-wknd-graphql repository: git clone git@github.com:adobe/aem-guides-wknd-graphql.git Edit the aem-guides-wknd/react-app/.env.development file and ensure that REACT_APP_HOST_URI points to your target AEM instance. Update the authentication method (if connecting to an author instance). # Server namespace REACT_APP_HOST_URI=http://localhost:4503 REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json #AUTH (Choose one method) # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication ... Open a terminal and run the commands: $ cd aem-gui

Getting started with SPA Editor and Remote SPA - Overview by Adobe Abstract Video: https://images-tv.adobe.com/mpcv3/5258/2391dff6-584d-4b22-9ae2-faeb78a10505_1620845706.854x480at800_h264.mp4 Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next.js) Remote SPAs with editable AEM content using AEM SPA Editor. This tutorial builds upon the WKND GraphQL App, a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in-context authoring of SPA content. About the tutorial The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. These aspects include defining where the content is authored and stored in AEM and mapping SPA routes to AEM Pages. The tutorial is d

Create your first React SPA in AEM by Adobe Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The React app will be developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. Local Development Environment A local development environment is necessary to complete this tutorial. Screenshots and video are captured using the AEM as a Cloud Service SDK running on a Mac OS environment with Visual Studio Code as the IDE. Commands and code should be independent of the local operating system, unless otherwise noted. NOTE New to AEM as a Cloud Service? Check out the following guide to setting up a local development environment using the AEM as a

Create your first Angular SPA in AEM by Adobe Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The Angular app will be developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. The goal for this multi-part tutorial is to teach a developer how to implement an Angular application to work with the SPA Editor feature of AEM. In a real-world scenario the development activities are broken down by persona, often involving a Front End developer and a Back End developer. We believe it is beneficial for any developer who will be involved in an AEM SPA Editor project to complete this tutorial. Local Development Environment A local developm