Dispatcher filters. directly; for example, The sample queries are based on the Sample Content Fragment Structure for use with GraphQL. zip: AEM 6. 1. Further Reference. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex components; Deployments. Each publisher is coupled to a single Apache instance equipped with the AEM dispatcher module for a materialized view of the content, serving as the origin for the Adobe-managed CDN. And until recently, it was only available for AEM-as-a-Cloud-Service users. AEM GraphQL API. This document describes how Akamai caches content on its edge servers and how you can control this caching. 5 also includes several digital experience platform features such as GraphQL support, built-in Adobe Target integration, and a new user interface for the AEM Screens device. To get the data stored in CFs, I have a GET request in my JS for the graphql persisted query. IO, and gRPC, we revisited the GraphQL client and built a development environment that is both simple and powerful. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. Once a query has been persisted, it can be requested using a GET request and cached at the. Ensure that the version of Dispatcher Tools is provided via the AEM SDK version matching the AEM as a Cloud Service version. GraphQL for AEM - Summary of Extensions. A quick introduction to GraphQL - Download as a PDF or view online for free. Last update: 2023-04-21. 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. Abstract. AEM Dispatcher is the first level cache within the AEM service, before CDN cache. Created for: Intermediate. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Learn how AEM automatically generates a GraphQL schema based on a Content Fragment model. Ensure you adjust them to align to the requirements of your project. Dispatcher filters. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. Network calls to persistent GraphQL queries are cached as these are GET calls. Unzip the downloaded aem-sdk-xxx. publish /(s) based on the protocol used— this will enable the forward mapping (resolve) — map the incoming URL to the content path (forward mapping. d":{"items":[{"name":"available_vhosts","path":"dispatcher/src/conf. dev. ReferrerFilter. Created for: Beginner. ) or getAdventureBySlug(. cloudpom. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Content Fragments are used, as the content is structured according to Content Fragment Models. In addition to pure AEM-managed content CIF, a page can. 2. Overview; Single-page app; Web Component; Mobile; Server-to-server; Configurations. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM GraphQL API requests. sh out docker. The pattern is: The pattern is: Each persisted query has a corresponding public func (ex. and thus make the content more reusable… In this design pattern, the SPA application is completely separated from AEM, and content from AEM is consumed through headless GraphQL APIs as needed. Before you begin your own SPA. In this chapter, you persist the queries to AEM and learn how to use cache control on persisted queries. It does not look like Adobe is planning to release it on AEM 6. Dispatcher filters. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. 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. Apollo client is a robust, production-ready, and mature client for GraphQL on the web. May 2020 - Present3 years 4 months. AEM GraphQL API is currently supported on AEM as a Cloud Service. The use of React is largely unimportant, and the consuming external application could be written in any framework. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. I get bundle name instead of query list. With the Next. The full code can be found on GitHub. apache. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) as a Cloud Service server. This is achieved using Content Fragments, together with the AEM GraphQL API (a customized implementation, based on standard GraphQL), to headlessly deliver structured content for use in your applications. The following tools should be installed locally: JDK 11;. Getting Started. The following configurations are examples. Get started with Adobe Experience Manager (AEM) and GraphQL. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Using GraphQL on the other hand does NOT have the extra unwanted data. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. Review existing models and create a model. Install an AEM package that contains several folders and sample images used to accelerate the tutorial. This document is part of a multi-part tutorial. Register now! SOLVEDThe Dispatcher is Adobe Experience Manager’s caching and/or load-balancing tool that helps realize a fast and dynamic Web authoring environment. In the next chapter, Explore GraphQL APIs, you will explore AEM’s GraphQL APIs using the built-in GrapiQL tool. The benefit of this approach is cacheability. Through GraphQL, AEM also exposes the metadata of a. 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. Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM. 5. Example: if one sets up CUG, the results returned will be based on user's session. Some of the key principles of Apache Sling is it’s web application framework, which is designed for content-oriented application development, which provides RESTful web API to JCR based application. 3 - Explore the AEM GraphQL API; 4 - Persisted GraphQL Queries; 5 - Client Application Integration; Headless First Tutorial. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. Not sure what the reason could be but this is happening even with untouched old persistent queries as well. Upload and install the package (zip file) downloaded in the previous step. By default, sample content from ui. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Get started with Adobe Experience Manager (AEM) and GraphQL. This is your 24 hour, developer access token to the AEM as a Cloud Service environment. Headless implementations enable delivery of experiences across platforms and channels at scale. 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. AEM as Cloud Service is shipped with a built-in CDN. 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. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. AEM’s GraphQL APIs for Content Fragments. With the ability to extract metadata from files uploaded to Experience Manager Assets, metadata management integrates. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex components; Deployments. Content Fragments are used, as the content is structured according to Content Fragment Models. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. 5. 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. Disadvantages: You need to learn how to set up GraphQL. A simple React app is used to query and display Team and Person content exposed by AEM’s GraphQL APIs. 1. Before calling any method initialize the instance with GraphQL endpoint, GraphQL serviceURL and auth if needed Typedefs Model: object . It is best practice and highly recommended to use persisted queries when working with the AEM GraphQL API. AEM Gem session Search forms made easy with the AEM querybuilder for a detailed overview of the. ”. The links in these attributes are run through the AEM Link Externalizer publishLink() to recreate the URL as if it was on a published instance, and as such, publicly available. Learn how AEM automatically generates a GraphQL schema based on a Content Fragment model. Notes WKND Sample Content. An aspiring Adobe AEM and Open Source developer with a passion for web development and a strong foundation in software development technologies. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. 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 Headless GraphQL Video Series Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Overview; Single-page app; Web Component; Mobile; Server-to-server; Configurations. Code examples Learning to use GraphQL with AEM - Sample Content and Queries; Cache Strategy. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. PersistedQueryServlet". The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Experience LeagueStep 2: Start the Dispatcher in a docker image with that deployment information. Once headless content has been translated,. ) that is curated by the. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to improve performance. properties file beneath the /publish directory. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA. Experience LeagueI added GraphQL to the bundle in the AEM and it caused bundle start failed. Further Reference. Click the Save All Button to save the changes. Experience LeagueAEM as a Cloud Service provides a Developer Console for each environment that exposes various details of the running AEM service that are helpful in debugging. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Explore AEM's GraphQL APIs using the built-in GrapiQL IDE. By default all requests are denied, and patterns for allowed URLs must be explicitly added. Include the JMX-related information in the Dictionary object that you use as an argument of the BundleContext. AEM Brand Portal. Developer. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. security. 5 the GraphiQL IDE tool must be manually installed. "servletName": "com. AEM 6. One of the core benefits of Akamai. In AEM 6. In this video you will: Learn how to create and define a Content Fragment Model. Tap the Local token tab. February 23, 2023 · 4 mins. Unpack the Dispatcher Tools into ~/aem-sdk/dispatcher. Since we get GrapghQL connector installed in AEM for Content fragment -Headless approach. TTL for the client (for example, a browser) 7200 seconds is the default (s-maxage=7200) TTL for the Dispatcher and CDN; also known as shared caches. for. Anatomy of the React app. The developer performs most of the technical configurations to enable Content Architect and Content Authors to produce headless content. AEM Sites as a Cloud Service; Notable Changes to AEM Sites in AEM Cloud Service; Authoring. But it’s no secret that Magento’s built-in CMS doesn’t go far when your business scales. Provides a link to the Global Navigation. The version of Dispatcher Tools is different from that of the AEM SDK. Magento (or Adobe Commerce as of April 2021) is a powerful ecommerce platform with its own content management system (CMS). They can be requested with a GET request by client applications. Unzip the SDK, which. Migrate from AEM 6. The AEM Commerce Add-On and CIF Core Components connect to the commerce GraphQL endpoint via the AEM server and directly via the browser. Along with the transition to Oak in AEM 6, some major changes were made to the way that queries and indexes are managed. Learn the recommended Best Practices for the setup and use of AEM GraphQL with Content Fragments. registerService method. AEM hosts;. The execution flow of the Node. I am using AEM as a Cloud Service and have created a component in which the data is rendered through the Content Fragments. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. In such cases there is the danger that multiple copies of the same JS library may be included in the final HTML output. To act on the change, we need a GraphQL server that supports introspection. Developer Console is accessed per AEM as a Cloud Service. You can enable caching for Persisted Queries in AEM. AEM GraphQL schemas are created as soon as a Content Fragment Model is created, and they can exist on both author and publish environments. Aem dispatcher – tips & tricks. Tap Get Local Development Token button. AEM code & content package (all, ui. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted queries can be cached. In this example, we’re restricting the content type to only images. The following file naming convention is used: dispatcher-<web-server>-<operating-system>-<dispatcher-version-number>. 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. See: GraphQL Persisted Queries - enabling caching in the. AEM Publish does not use an OSGi configuration. x. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that. 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. 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. AEM Publish service requires an AEM Dispatcher configuration to be added to the AEM Publish’s Dispatcher configuration. With AEM as a Cloud Service, your teams can focus on innovating instead of planning for product upgrades. json. 5. Ensure you adjust them to align to the requirements of your. Use the adventures-all query. 4 and later versions. The Single-line text field is another data type of Content. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Dispatcher changes not reflected in INT environment “AH01620: Could not open password file” in logs after configuring Basic Auth in AEM dispatcher; When are browsers counted in Analytics? Fine-Grained Priorities on Recommendations Activity; Recommendation is filtering criteria while creating activityIn this post, the most common used queries will be explored, using the most important predicates provided by the Query Builder API; following an incremental approach does not neglect the possibility of understanding how to build more complex queries. maven. js implements custom React hooks return data from AEM. CIF enables AEM to access an Adobe Commerce instance and communicate with Adobe Commerce via GraphQL. 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. Add a copy of the license. AEM HEADLESS SDK API Reference Classes AEMHeadless . 10. security. Locate the Layout Container editable area beneath the Title. Select the AEM as a Cloud Service development environment from the Eligible Deployment Environments. From the AEM Start menu, navigate to Tools > Deployment > Packages. In previous releases, a package was needed to install the GraphiQL IDE. The basic operation of queries with GraphQL for AEM adhere to the standard GraphQL specification. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Solved: Hi Team, AEM : 6. Select aem-headless-quick-setup-wknd in the Repository select box. View the source code on GitHub. As per Adobe's documentation you should use GraphQL when you're trying to expose data from Content Fragments. This configuration tells the Dispatcher to fetch this URL from it’s AEM instance it fronts every 300 seconds to fetch the list of items we want to allow through. Understand how the Content Fragment Model drives the GraphQL API. If product data changes, there is a need for cache invalidation. Developer. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. It stores it’s cache of the response in the /file argument so in this example /tmp/vanity_urlsUnderstand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. at org. graphql. AEM 6. GraphQL Query Editor. To address this problem I have implemented a custom solution. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. In this video you will: Learn how to create and define a Content Fragment Model. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. The following configurations are examples. It is the most popular GraphQL client and has support for major. 8 and above Steps to run the dispatcher in docker container Once the docker is installed in local start the docker using command line or using docker desktop. Metadata is the information that describes. I have a bundle project and it works fine in the AEM. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. Like previous versions of AEM, publishing or unpublishing pages clears the content from the Dispatcher cache. AEM Dispatcher configurations in generic and AEMaaCS changes like. #aem #cms #dispatcherAEM as a Cloud Service - Local Development Environment setup - @h9ioHow to use Re-Fetching Flush Agent in Adobe Experience Manager(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. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Build a React JS app using GraphQL in a pure headless scenario. Topics: GraphQL API View more on this topic. 3. User. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. 5 Serve pack 13. adobe. Documentation AEM AEM Tutorials AEM Headless Tutorial Dispatcher filters for AEM GraphQL. It includes support for Content. Bundle start failed. In the String box of the Add String dialog box, type the English string. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. They can also be used together with Multi-Site Management to. Repository Browser supports a read-only view of the resources and properties of AEM on Production, Stage, and Development, as well as Author, Publish, and Preview. Fill in the form: Choose a suitable display name (I chose Todo List ), The name will fill automatically with a suitable name, Select Synthetic GraphQL, Select the file that holds the GraphQL schema, Enter graphql as the API URL suffix. Deploying an AEM Headless application requires attention to how AEM URLs are constructed to ensure the correct AEM host/domain is. AEM Publish does not use an OSGi configuration. 1. 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 GraphQL API lets you perform (complex) queries on your Content Fragments; with each query being according to a specific model type. With CIF, AEM integrates seamlessly with Adobe Commerce, making it the easiest solution for creating. Unzip the downloaded aem-sdk-xxx. I added two demo classes to my project and reinstall bundle. The release information for the latest desktop app version 2. swift instantiates the Aem class used for all interactions with AEM Headless. Prerequisites The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. Code. Tap the Local token tab. The use of React is largely unimportant, and the consuming external application could be written in any framework. This is a core feature of the AEM Dispatcher caching strategy. Capture a series of thread dumps and analyze them. 4-linux-x86_64-ssl-4. 13+. New Dispatcher jobs added daily. Sling uses a Java Content Repository, such as Apache Jackrabbit, or in the case of AEM, the CRX Content Repository as its data store. A simple React app is used to query and display Team and Person content exposed by AEM’s GraphQL APIs. 3. Topics: GraphQL API View more on this topic. Persisted queries also in effect, define an API, and decouple the need for the developer to understand the details of each Content Fragment Model. Skip to content Toggle navigation. Select main from the Git Branch select box. 5 comes bundled with, which is targeted at working with content fragments exclusively. Learn how Experience Manager as a Cloud Service works and what the software can do for you. But the problem is the data is cached. A pre-compiled AEM package is available for easy installation on local environments using CRX Package Manager: aem-guides-wknd. GraphQL Query Language. Ensure you adjust them to align to the requirements of your project. Best Practices for Queries and Indexing. 2. Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM. Select Edit from the mode-selector in the top right of the Page Editor. For GraphQL queries with AEM, there are a few extensions: If you require a single result: use the model name; for example, city; If you expect a list of results: add List to the model name; for example, cityList Persisted GraphQL queries. Recommendation. jar file to install the Publish instance. If you require a single result: ; use the model name; eg city . Select Full Stack Code option. Further Reference. The touch-enabled UI is the standard UI for AEM. The configuration file contains a series of single-valued or multi-valued properties that control the behavior of Dispatcher: Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. AEM hosts;. I added GraphQL to the bundle in the AEM and it caused bundle start failed. In this video you will: Learn how to enable GraphQL Persisted Queries. Within AEM, the delivery is achieved using the selector model and . Last update: 2023-04-21. AEM makes an environment fast and dynamic, because it also serves as a load-balancing tool. DuoTone, Lab, and Indexed color spaces are not supported. TIP. When configuring CORS on AEM Publish, ensure: The Origin HTTP request header cannot be sent to AEM Publish service, by removing the Origin header (if previously added) from the. 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. AEM as a Cloud Service and AEM 6. The default cache-control values are:. Instead, CORS requests must be evaluated for allowed origins at the Dispatcher level. The following configurations are examples. Previous page. Open CRXDE Lite in your browser. API to client applications. This can be done by creating a new GraphQL servlet in the AEM configuration manager, and then adding the required GraphQL schema and queries to the servlet. It allows easier categorization and organization of assets and it helps people who are looking for a specific asset. The CIF Add-On provides a GraphQL proxy servlet at /api/graphql which can optionally be used for local development. Learn to use Dispatcher for caching, load balancing, and improving security for your AEM server. View the source code on GitHub. GraphQL Editor user interface does not let you scroll through all the persisted queries when there is a high number of queries (for example, more than. zip. If you don’t plan to use a local AEM Dispatcher, it is recommended to configure the GraphQL proxy servlet as well. Search for “GraphiQL” (be sure to include the i in GraphiQL ). By default all requests are denied, and patterns for allowed URLs must be explicitly added. APOLLO CLIENT. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. Dispatcher filters. The default cache-control values are:. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. any","path":"dispatcher/src/conf. This article assumes that your project’s Dispatcher configuration includes the file opt-in/USE_SOURCES_DIRECTLY. API to client applications. It is best practice and highly recommended to use persisted queries when working with the AEM GraphQL API. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. tunnel host. To share with the community, we talked to the AEM support team and found that it was an issue with 6. One could export an AEM page in JSON format via a REST call, however there are many fields in the JSON that the Spring Boot app does not use. Experience implementing WCM/CMS for. If you expect a list of results: Dispatcher: To allow required URLs; Mandatory; Vanity URL: To allocate a simplified URL for the endpoint; Optional; OSGi Configuration:. 5 service pack but you can reach out to Adobe Support from your organizations account and check if they have any plans. Recommendation. AEM Publish does not use an OSGi configuration. I noticed that my persistent queries are getting updated with Graphql introspection query. Enable developers to add automation. Learn about Akamai's caching. Explore AEM's GraphQL APIs using the built-in GrapiQL IDE. Sign up Product. One could export an AEM page in JSON format via a REST call, however there are many fields in the JSON that the Spring Boot app does not use. ViewsThe GraphQL endpoints are publicly accessible, but the content that they return depends on user's access. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. json*" } Also, please review if you would want to avoid caching of the GraphQL queries. The AEM GraphQL API is a customized version based on the standard GraphQL API specification, specially configured to allow you to perform (complex) queries on your Content Fragments. Tutorials by framework. AEM dispatcher: Filters, ignoreUrlParams, virtualhosts, rewrites by Aanchal Sikka Overview In this extensive blog post, we'll delve into the topics of filters, ignoreUrlParams, virtual hosts, and rewrites, providing a detailed examination of their best practices and simplifying their operational me. NOTE. Documentation AEM AEM Tutorials AEM Headless Tutorial Dispatcher filters for AEM GraphQL. The following subtypes of raster image file formats that are not supported in Dynamic Media: PNG files that have an IDAT chunk size greater than 100 MB. This feature is core to the AEM Dispatcher caching strategy. To avoid this and to allow logical organization of client-side libraries AEM uses client-side library. Persisted queries also in effect, define an API, and decouple the need for the developer to understand the details of each Content Fragment Model. Get started with Adobe Experience Manager (AEM) and GraphQL. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. 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. It is fully managed and configured for optimal performance of AEM applications. Created for: Intermediate. file.