The WKND Site is an Adobe Experience Manager sample reference site. We’ll be using the sample Weekend React app that is an AEM headless app, so the majority of the content on this app is powered by content fragments over AEM’s GraphQL APIs. Developer. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. js (JavaScript) AEM Headless SDK for. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM Headless GraphQL Video Series. AEM GraphQL API requests. The use of AEM Preview is optional, based on the desired workflow. 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. js. Clients can send an HTTP GET request with the query name to execute it. js, that calls the AEM GraphQL end point, and returns the adventure data. Populates the React Edible components with AEM’s content. Each persisted query has a corresponding function in src/lib//aem-headless-client. Topics: GraphQL API View more on this topic. It’s ideal for getting started with the basics. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. View the source code on GitHub. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Core Components View more on this topic. // src/lib/aem-headless-client. AEM GraphQL API requests. 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. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that. Learn about deployment considerations for mobile AEM Headless deployments. Modeling data in the real world can be complex. The ImageRef type has four URL options for content references: _path is the referenced path in AEM. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context. The examples below use small subsets of results (four records per request) to demonstrate the techniques. Getting Started with AEM SPA Editor and React Create your first React Single Page Application (SPA) that is editable in Adobe. // src/lib/aem-headless-client. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). json to be more correct) and AEM will return all the content for the request page. Author in-context a portion of a remotely hosted React. Scroll to the bottom and click on ‘Add Firebase to your web app’. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. infinity. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Each function in turn invokes the aemHeadlessClient. iOS SwiftUI app with AEM Headl. Last update: 2023-05-17. Documentation AEM AEM Tutorials AEM Headless Tutorial CORS configuration for AEM GraphQL. Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. Cloud Service; AEM SDK; Video Series. Developer. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js (JavaScript) AEM Headless SDK for Java™. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. 5: The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Learn how to model content and build a schema with Content Fragment Models in AEM. Chapter 4 - Defining Content Services Templates. @adobe/aem-react-editable-components v2: provides an API for building custom SPA components and provides common-use implementations such. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. Dispatcher filters. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. AEM Headless as a Cloud Service. Developer tools. js application is as follows: The Node. See full list on experienceleague. Organize and structure content for your site or app. AEM Headless GraphQL Video Series; AEM Headless GraphQL Hands-on Tutorial. Deploy all of the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa. Documentation AEM AEM Tutorials AEM Headless Tutorial Managing AEM hosts Last update: 2023-04-26 Topics: GraphQL API Created for: Intermediate. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Documentation AEM AEM Tutorials AEM Headless Tutorial GraphQL Endpoints. Once headless content has been translated,. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. From the command line navigate into the aem-guides-wknd-spa. Set up headless content delivery and management in AEM by Jeremy Lanssiers Overview We set up headless content delivery and headless content management by using AEM’s GraphQL to deliver and Assets API to manage content (via Content Fragments). Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. It’s ideal for getting started with the basics. Created for: Beginner. Wrap the React app with an initialized ModelManager, and render the React app. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. Once headless content has been translated, and. Checkout Getting Started with AEM Headless - GraphQL. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Tutorials by framework. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. @adobe/aem-spa-component-mapping: provides the API that map AEM content to SPA components. js (JavaScript) AEM Headless SDK for. Content Fragment Models Basics and Advanced features such as different Data types and respective usages. GraphQL API View more on this topic. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Tutorials by framework. AEM GraphQL API requests. iOS SwiftUI app with AEM Headl. runPersistedQuery(. js. NOTE. 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 chapter, we enable two dynamic Adventure Detail routes to support editable components; Bali Surf Camp and Beervana in Portland. Documentation AEM AEM Tutorials AEM Headless Tutorial CORS configuration for AEM GraphQL. AEM Headless Overview; GraphQL. js (JavaScript) AEM Headless SDK for. Each function in turn invokes the aemHeadlessClient. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. The use of AEM Preview is optional, based on the desired workflow. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 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. Last update: 2023-04-21. The use of Android is largely unimportant, and the consuming mobile app. Dispatcher filters. View the source code on GitHub. Populates the React Edible components with AEM’s content. AEM projects can be implemented in a headful and headless model, but the choice is not binary. Each function in turn invokes the aemHeadlessClient. ), executing the persisted GraphQL query. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. The <Page> component has logic to dynamically create React components. Each persisted query has a corresponding function in src/lib//aem-headless-client. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. runPersistedQuery(. Content authors cannot use AEM's content authoring experience. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Introduction to Headless AEM. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. It contains the following artifacts: The Quickstart jar - an executable jar file that can be used to set up both an author and a publish instance. This Android application demonstrates how to query content using the GraphQL APIs of AEM. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Welcome to the documentation for developers who are new to Adobe Experience Manager. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. The AEM SDK is used to build and deploy custom code. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. View the source code on GitHub. AEM Headless mobile deployments. 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. AEM WCM Core Components 2. Created for: Intermediate. Clone and run the sample client application. Select Edit from the mode-selector in the top right of the Page Editor. 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. 4. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Getting Started with AEM Sites - WKND Tutorial; Getting Started with AEM Headless; Getting Started with AEM. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. The AEM Headless client, provided by the AEM Headless Client for JavaScript, must be initialized with the AEM Service host it connects to. Locate the Layout Container editable area beneath the Title. Browse the following tutorials based on the technology used. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. 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. Merging CF Models objects/requests to make single API. Prerequisites. runPersistedQuery(. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access. It is the main tool that you must develop and test your headless application before going live. AEM Headless as a Cloud Service. For publishing from AEM Sites using Edge Delivery Services, click here. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. // src/lib/aem-headless-client. // src/lib/aem-headless-client. Explore tutorials by API, framework and example applications. Last update: 2023-04-21. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. An end-to-end tutorial illustrating how. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. AEM Headless applications support integrated authoring preview. In today’s series, we’re going to take a look at modeling basics in Adobe Experience Manager by first looking at the WKND Site. AEM Sites; AEM Assets; AEM Forms; AEM as Cloud Service; AEM Foundation; Tutorials for AEM Guides; AEM multi-step tutorials. Navigate to the Software Distribution Portal > AEM as a Cloud Service. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Documentation AEM AEM Tutorials AEM Headless Tutorial AEM Headless mobile deployments. AEM’s WCM Core Components have built-in functionality to support a normalized JSON schema of exported Pages and Components. AEM Headless as a Cloud Service. This guide uses the AEM as a Cloud Service SDK. By the way, since I asked my original question, I found out that the "AEM Headless Developer Journey" will be probably a good starting point for me to get an overview of some available headless features. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Developing View. This iOS application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Developer. Developer. Adobe Experience Manager Tutorial For Beginners. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Example server-to. Tutorial Set up. In this tutorial, we’ll take a look at how we can export content fragments from AEM to Adobe Target in order to personalize headless experiences. AEM 6. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Topics: GraphQL API View more on this topic. The WKND Site is an Adobe Experience Manager sample reference site. Build a React JS app using GraphQL in a pure headless scenario. 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. . AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. AEM WCM Core Components 2. Open the Page Editor’s side bar, and select the Components view. How to use AEM provided GraphQL Explorer and API endpoints. AEM tutorials. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular. AEM GraphQL API requests. Learn to author content and embed referenced content using a multi-line rich text editor with Adobe Experience Manager Content Fragments, and how rich text is delivered by AEM's GraphQL APIs as JSON to be consumed by headless applications. : Guide: Developers new to AEM and headless: 1. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The SPA is implemented using: The SPA is implemented using: Maven AEM Project ArchetypeAEM Headless as a Cloud Service. The Single-line text field is another data type of Content. To learn more about authenticating requests to AEM as a Cloud Service, review the token-based authentication tutorial. AEM Headless mobile deployments. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. npm module; Github project; Adobe documentation; For more details and code. The following configurations are examples. // src/lib/aem-headless-client. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Dynamic routes and editable components. The front-end developer has full control over the app. Deploy all of the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Created for: Intermediate. The WKND Site is an Adobe Experience Manager sample reference site. The code is not portable or reusable if it contains static references or routing. react $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Enable developers to add automation. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Experience League. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Let’s take a look at the learning objectives for this tutorial. . AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. Learn how AEM can go beyond a pure headless use case, with. Created for: Beginner. Core Components View more on this topic. Rich text with AEM Headless. 5. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Modifications have been made to the project code in order to. AEM Preview is intended for internal audiences, and not for the general delivery of content. Hello and welcome to the Adobe Experience Manager headless video series. Tutorial Set up. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In, some versions of AEM (6. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. View. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. In the last step, you fetch and. This involves structuring, and creating, your content for headless content delivery. Deploy the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. Developing View more on this topic. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. js) Remote SPAs with editable AEM content using AEM SPA Editor. Each function in turn invokes the aemHeadlessClient. In today’s series, we’re going to take a look at modeling basics in Adobe Experience Manager by first looking at the WKND Site. Command line parameters define: The AEM as a Cloud Service Author. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js, that calls the AEM GraphQL end point, and returns the adventure data. The preview experience links the AEM Author’s Content Fragment editor with your custom app (addressable via HTTP), allowing for a deep link into the app that renders the Content Fragment being previewed. 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. adobe. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Repeat the above steps to create a fragment representing Alison Smith:Resource Description Type Audience Est. AEM Preview is intended for internal audiences, and not for the general delivery of content. . To learn more about authenticating requests to AEM as a Cloud Service, review the token-based authentication tutorial. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. AEM Preview is intended for internal audiences, and not for the general delivery of content. ), executing the persisted GraphQL query. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Learn about Headless in Adobe Experience Manager (AEM) with a combination of detailed documentation and headless journeys. Learn how to create GraphQL queries to return content from Adobe Experience Manager (AEM) and how to use the GraphiQL tool to quickly test, refine, and debug queries. AEM provides AEM React Editable Components v2, an Node. Ensure you adjust them to align to the requirements of your project. Each persisted query has a corresponding function in src/lib//aem-headless-client. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. The preview experience links the AEM Author’s Content Fragment editor with your custom app (addressable via HTTP), allowing for a deep link into the app that renders the Content Fragment being previewed. // src/lib/aem-headless-client. 4+ and AEM 6. Create Content Fragment Models. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. 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. // src/lib/aem-headless-client. The benefit of this approach is cacheability. Explore AEM’s GraphQL capabilities by building out a React App that consumes Content. This tutorial uses a simple native Android Mobile App to consume and display Event content exposed by AEM Content Services. Anatomy of the React app. Cross-origin resource sharing (CORS) Last update: 2023-09-28. Install GraphiQL IDE on AEM 6. Let’s take a look at the learning objectives for this tutorial. js (JavaScript) AEM Headless SDK for. 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. Learn how features like Content Fragment Models, Content Fragments, and a GraphQL API are used to power headless experiences. Learn about headless technologies, why they might be used in your project, and how to create. Let’s create some Content Fragment Models for the WKND app. ), executing the persisted GraphQL query. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. npm module; Github project; Adobe documentation; For more details and code. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Headless AEM emerges as a modern architectural approach that revolutionizes content management, offering flexibility, scalability, and faster content. In the left-hand rail, expand My Project and tap English. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. js (JavaScript) AEM Headless SDK for Java™. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. $ cd aem-guides-wknd-spa. AEM Local Development Access Tokens are used to accelerate the development of integrations with AEM as a Cloud Service that programmatically interacts with AEM Author or Publish services over HTTP. Typical AEM as a Cloud Service headless deployment architecture_. Typical AEM as a Cloud Service headless deployment. AEM Headless GraphQL Video Series AEM Headless GraphQL Hands-on Tutorial Explore AEM’s GraphQL capabilities by building out a React App that consumes Content. AEM Headless Developer Portal; Overview; Quick setup. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context of any. View the source code on GitHub. Ensure you adjust them to align to the requirements of your. x. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. View the source code on GitHub. Developer tools. Dynamic routes and editable components. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Author in-context a portion of a remotely hosted React application. Documentation AEM AEM Tutorials AEM Headless Tutorial AEM Headless mobile deployments. AEM's headless CMS features allow you to employ many technologies to provide content across all channels. Developer. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Clone and run the sample client application. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This tutorial uses a simple Node. It’s ideal for getting started with the basics. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. Author in-context a portion of a remotely hosted React. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted. Learn. In this tutorial i will show you how to integrate PWA with AEM using headless CMS (content as service) concept of AEM. In today’s rapidly evolving digital landscape, delivering content seamlessly across multiple channels and devices has become essential for businesses. Create a folder on your system and paste the downloaded zip file (hello-world-pwa) attached above. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Hello and welcome to the Adobe Experience Manager Headless Series. AEM Headless as a Cloud Service. Create Content Fragment Models. This iOS application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Developer. ), executing the persisted GraphQL query. X. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Topics: GraphQL API View more on this topic. react $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. Create Content Fragments based on the. From the command line navigate into the aem-guides-wknd-spa.