Tutorial Set up. that consume and interact with content in AEM in a headless manner. be that AEM, a single page application, or a Mobile app, controls how the content is displayed to the user. 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. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. 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, etc. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted. Experience League. 4221 (US) 1. The value of Adobe Experience Manager headless. We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. Developer. First select which model you wish to use to create your content fragment and tap or click Next. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. 📱 Mobile Apps: With the majority of users accessing content via mobile apps, AEM's headless approach allows for efficient content distribution, ensuring your audience receives a uniform. The full code can be found on GitHub. You have complete control over how the content is displayed on several platforms, including desktop, mobile, IoT, and PIM systems. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. With respect to the tutorial, Events details alone is from AEM and the UI to display the events based on the desired look and feel is from the app. Populates the React Edible components with AEM’s content. AEM Headless tutorials - If you prefer to learn by doing and have existing knowledge of AEM, take our hands-on tutorials organized by API and framework, that explore creating and using applications built on AEM Headless. Create Content Fragments based on the. Following AEM Headless best practices, the Next. 3 and has been continuously improved since then, it mainly consists of the following components: Content Services: Provides the functionality to expose user-defined content through a HTTP API in JSON format. An end-to-end tutorial. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Navigate to Tools, General, then select GraphQL. Navigate to the folder you created previously. The Android Mobile App. 5 Forms; Tutorial. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. jar. Learn. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Wrap the React app with an initialized ModelManager, and render the React app. Tutorials by framework. Client type. Author in-context a portion of a remotely hosted React application. Developer. Headless AEM empowers businesses to deliver consistent and personalized experiences across multiple channels, such as websites, mobile apps, and connected devices. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible. Learn to use the delegation pattern for extending Sling Models and. Developer. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Looking for a hands-on. The most common deployment pattern with AEM headless applications is to have the production version of the application connect to an AEM Publish service. A hybrid CMS combines the concepts of traditional and headless CMSs into a single architecture, resulting in the best of both worlds while mitigating their disadvantages. AEM hosts; CORS;. The <Page> component has logic to dynamically create React components based on the. When authorizing requests to AEM as a Cloud Service, use. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The full code can be found on GitHub. Last update: 2023-08-31. Experience Fragments are fully laid out. Overview; Single-page app; Web Component; Mobile; Server-to-server; Configurations. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Navigate to the Software Distribution Portal > AEM as a Cloud Service and download the latest version of the AEM SDK. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Headless AEM finds its applicability in various use cases where flexible content delivery is crucial. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). In essence, I want to only accept requests from mobile applications. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Confirm with Create. This is your 24 hour, developer access token to the AEM as a Cloud Service environment. Topics: Content Fragments View more on this topic. Persisted queries. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. js application is as follows: The Node. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Open the Page Editor’s side bar, and select the Components view. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. Clone and run the sample client application. AEM WCM Core Components 2. Experience League. In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. AEM hosts; CORS;. 2. Headless AEM finds its applicability in various use cases where flexible content delivery is crucial. The following tools should be installed locally: JDK 11;. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Tap or click the folder that was made by creating your configuration. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. Rich text with AEM Headless. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Mobile deployments require minimal configuration, as HTTP connections to AEM Headless APIs are not initiated in the context of a browser. The Single-line text field is another data type of Content. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The ImageRef type has four URL options for content references: _path is the. Advanced Concepts of AEM Headless. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. The simple approach = SSL + Basic Auth. One major advantage is the ability to. Explore the power of a headless CMS with a free, hands-on trial. On Adobe headless CMS, modular content fragments can be easily reused across channels and devices and localized using Adobe Exchange’s translation capabilities. Learn. 3 - Explore the AEM GraphQL API; 4 - Persisted GraphQL Queries; 5 - Client Application Integration; Headless First Tutorial. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. How to use AEM React Editable Components v2. Jun 23, 2022 at 10:18 It is a mobile app. The full code can be found on GitHub. The full code can be found on GitHub. AEM container components use policies to dictate their allowed components. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL. As technology continues to evolve, new devices and platforms emerge, and organizations need to adapt quickly to stay relevant. 4. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. March 25–28, 2024 — Las Vegas and online. Level 2: In addition to level one: The RemotePage component can be used to embed the external SPA into AEM where AEM content can be viewed in-context. First, explore adding an editable “fixed component” to the SPA. This allows to deliver data to 3rd party clients other than AEM. Create Content Fragments based on the. In this tutorial I understood Content Fragment with Event Title, Even Image, etc. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. 7 - Consuming AEM Content Services from a Mobile App;. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. You struggle to find enough AEM developers for web-based projects but have a strong team of frontend developers. The multi-line text field is a data type of Content Fragments that enables authors to create. In the previous document of the AEM headless journey, Getting Started with AEM Headless as a Cloud Service you learned the basic theory of what a headless CMS is and you should now: ; Understand the basics of AEM's headless features. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. It is a query language API. They can author. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. In, some versions of AEM (6. Tutorial Set up. A primary use case for The Adobe Experience Manager as a Cloud Service (AEM) GraphQL API for Content Fragment Delivery is to accept remote queries from third-party applications or services. Also Related: Your 10-step Checklist for Migrating to a Headless CMS. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex components; Deployments. With a headless implementation, there are several areas of security and permissions that should be addressed. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . AEM provides robust content management capabilities and exposes Headless APIs that allow developers to access content and data stored in AEM through a variety of channels and applications. js (JavaScript) AEM Headless. The diagram above depicts this common deployment pattern. After reading it, you can do the following:This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Or in a more generic sense, decoupling the front end from the back end of your service stack. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Hello, I’m Tom primarily a retailer but also a technology delivery manager at BIG W. Following AEM Headless best practices, the Next. In this part of the AEM Headless Content Architect Journey,. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. These remote queries may require authenticated API access to secure headless content. 3. The latest version of AEM and AEM WCM Core Components is always recommended. js (JavaScript) AEM Headless SDK for. Created for: Beginner. 0 or later Included in the WKND Mobile AEM Application Content Package below; Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. Persisted queries. Adobe first introduced its headless capabilities in Adobe Experience Manager at the Adobe Developers Live conference for digital experience developers in 2021 and customers. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. The full code can be found on GitHub. With Headless Adaptive Forms, you can streamline the process of building. The navigation menu is driven by the AEM page hierarchy and will make use of the JSON model provided by the Navigation Core Component. Click Create and Content Fragment and select the Teaser model. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. aem: An AEM multi-module maven project that deploys the baseline application, content and configuration needed to begin the AEM Headless tutorial. Translating Headless Content in AEM. js (JavaScript) AEM Headless SDK for. In an experience-driven. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. Populates the React Edible components with AEM’s content. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). It represents what will be displayed on the mobile. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Documentation AEM AEM Tutorials AEM Headless Tutorial Web component/JS - AEM Headless Example. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. AEM Headless GraphQL Video Series. In a real application, you would use a larger. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. This Android application demonstrates how to query content using the GraphQL APIs of AEM. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Adobe Developer App Builder extends AEM capabilities providing dynamic content without load time lag and on single-page apps. Select Preview from the mode-selector in the top-right. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. react project directory. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. In the mobile-first era, delivering content to mobile applications is paramount. AEM Headless as a Cloud Service. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Resource Description Type Audience Est. Android Node. This enables AEM as a Cloud Service to accommodate your traffic patterns as they change. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The build will take around a minute and should end with the following message:In this part of the AEM Headless Developer Journey, learn about headless technology and why you would use it. React or Angular for frontend with AEM SPA Editor JS SDK Java and Sling Models for Back-end. Adobe Experience Manager headless CMS gives you all the tools you need to manage your content and make it available via APIs to any number of front ends via both JSON and GraphQL. Prerequisites. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Rather than delivering HTML or formatted content directly, a headless CMS decouples content from presentation, enabling content to be used by a variety of front-end technologies. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex components; Deployments. that consume and interact with content in AEM in a headless manner. The React WKND App is used to explore how a personalized Target. Developer. The power of AEM allows it to deliver content either headlessly, full-stack, or in both. AEM's headless CMS features allow you to employ many technologies to provide content across all channels. Headless AEM’s decoupled. Editable fixed components. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. AEM Headless as a Cloud Service. AEM GraphQL API requests. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Tap in the Integrations tab. A unique opportunity to acquire an established, fully rented, well maintained, 41 pad mobile home park in Sooke (45 mins west of Victoria) with excellent inc. AEM Headless as a Cloud Service. The benefit of this approach is cacheability. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Security and Compliance: Both AEM and Contentful prioritize security and. ) that is curated by the. AEM hosts; CORS; Dispatcher filters. Each environment contains different personas and with. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. Learn how to bootstrap the SPA for AEM SPA Editor. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. js (JavaScript) AEM Headless SDK for Java™. Server-to-server Node. Experience League. AEM incorporates caching mechanisms, CDNs, and a robust server infrastructure to handle high traffic and demanding workloads. The <Page> component has logic to dynamically create React components based on the. Adobe Experience Manager (AEM), one of the sought-after Content Management Solutions (CMS), is preferred by most companies across the globe. So that end user can interact with your website. Single-page app (SPA) Learn about deployment considerations for single-page apps (SPA). This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. This article provides insights into how Headless Adaptive Forms work, and how they can be integrated with different applications to simplify the form building process. The ImageRef type has four URL options for content references: _path is the referenced path in AEM. 5 or later. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The models available depend on the Cloud Configuration you defined for the assets. Tap the Technical Accounts tab. Using the GraphQL API in AEM enables the efficient delivery. Persisted queries. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries. The full code can be found on GitHub. AEM GraphQL API requests. @adobe/aem-react-editable-components v2: provides an API for building custom SPA components and provides common-use implementations such. This Android application demonstrates how to query content using the GraphQL APIs of AEM. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. AEM Headless as a Cloud Service. Finally, it would be great if the site had the option for highly interactive pages that didn’t require a refresh. AEM GraphQL API requests. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The headless CMS extension for AEM was introduced with version 6. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL. The latest version of AEM and AEM WCM Core Components is always recommended. Deliver content to various channels and platforms, including websites, mobile apps, IoT devices, chatbots, and more. The creation of a Content Fragment is presented as a wizard in two steps. Chapter 4 of the AEM Headless tutorial covers the role of AEM Editable Templates in the context of AEM Content Services. The examples below use small subsets of results (four records per request) to demonstrate the techniques. Enable developers to add automation to. Select Create. Last update: 2023-06-27. Tap Create new technical account button. Learn about the architecture of AEM Forms Headless Adaptive Forms and how it can help you quickly build forms for various platforms. View the source code on GitHub. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Prerequisites. In this part of the AEM Headless Developer Journey, you will understand the steps to implementing your first headless experience in AEM including planning considerations and also learn best practices to make your path as smooth as possible. js. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. Watch Adobe’s story. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. Adobe Experience Manager (AEM) It is another headless CMS solution that allows businesses to create, manage, and deliver digital experiences across multiple channels, including web, mobile, and social media. 5 Forms; Get Started using starter kit. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. AEM Headless mobile deployments are native mobile apps for iOS, Android™, etc. Select Create. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Included in the WKND Mobile AEM Application Content Package below. Name the model Hero and click Create. The multi-line text field is a data type of Content Fragments that enables authors to create. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. In AEM 6. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. Persisted queries. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. React is the most favorite programming language amongst front-end developers ever since its release in 2015. If. Prerequisites. Comprehensive Digital Experience Platform. Tap on the download button in the top-left corner to download the JSON file containing accessToken value, and save the JSON file to a safe location on your development machine. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Permissions and personas can broadly be considered based on the AEM environment Author or Publish. For publishing from AEM Sites using Edge Delivery Services, click here. Overview; Single-page app; Web Component; Mobile; Server-to-server; Configurations. In addition to offering robust tools to create, manage, and deliver traditional webpages in the full-stack fashion, AEM also offers the ability to author self-contained selections of content and serve them headlessly. This guide uses the AEM as a Cloud Service SDK. My team and I are accountable for our frontend, mobile, martech and content delivery technology, including AEM. js (JavaScript) AEM Headless SDK for. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. js app uses AEM GraphQL persisted queries to query. Select Edit from the mode-selector. js app uses AEM GraphQL persisted queries to query adventure data. that consume and interact with content in AEM in a headless manner. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. 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, etc. Created for: Intermediate. 4. 4. Select WKND Shared to view the list of existing. AEM hosts;. npm module; Github project; Adobe documentation; For more details and code. android: A Java-based native Android. AEM headless CMS allows you to customize websites according to your business needs through a third-party extensibility framework to easily build customized extensions. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. When authorizing requests to AEM as a Cloud Service, use. AEM Headless as a Cloud Service. The Create new GraphQL Endpoint dialog box opens. WKND Mobile (AEM Guides) The WKND Mobile repository supports the AEM Headless tutorial and contains two projects: wknd-mobile. From the command line navigate into the aem-guides-wknd-spa. Level 2: In addition to level one: The RemotePage component can be used to embed the external SPA into AEM where AEM content can be viewed in-context. Get a free trial. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Ensure only the components which we’ve provided SPA. Wrap the React app with an initialized ModelManager, and render the React app. Clients can send an HTTP GET request with the query name to execute it. This Android application demonstrates how to query content using the GraphQL APIs of AEM. This chapter will add navigation to a SPA in AEM. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 7 - Consuming AEM Content Services from a Mobile App;. The full code can be found on GitHub. The Story So Far. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. In this part of the AEM Headless Developer Journey, you can learn how to use GraphQL queries to access the content of your Content Fragments and feed it to your app (headless delivery). Ensure you adjust them to align to the requirements of your. The use of Android is largely unimportant, and the consuming mobile app could be written in. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. React environment file React uses custom environment files , or . Let’s explore some of the prominent use cases: Mobile Apps. Learn about deployment considerations for mobile AEM Headless deployments. Overview. Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. e ~/aem-sdk/author.