wknd tutorial aem. Adobe provides a Basic Site Template to…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. wknd tutorial aem

 
<i> Adobe provides a Basic Site Template to…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</i>wknd tutorial aem  The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters

A multi-part tutorial for developers new to AEM. Enabling CORS on AEM Publish (and Preview) services are different from the AEM Author service. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). From the command line, navigate into the aem-guides-wknd project directory. A multi-part tutorial for developers new to AEM. Review the Code. The dialog exposes the interface with which content authors can provide. It does not update the files - 544806. Getting Started Developing AEM Sites - WKND Tutorial; AEM Core Concepts; Structure of the AEM Touch-Enabled UI; Concepts of the AEM Touch-Enabled UI; AEM Development - Guidelines and Best Practices; Using Client-Side Libraries; Developing and Page Diff; Editor Limitations; The CSRF Protection Framework; Data. 0 authentication: Deployment Manager access to Cloud Manager. 5 or 6. Add the Hello World Component to the newly created page. 1. I recomended taking the class "Create AEM Project using Archetype" of the course "AEM as a Cloud Service: Developing for AEM" in that video created a new project using archetype with old code and create a simple page, but it is enough for start, don't is necessary build WKND for learn how build a new project, it is actually very easy and. I am using AEM as a cloud service. See the AEM WKND Site project README. 5. api>2022. This is a multi-part tutorial and it is assumed that you have reviewed the ‘ui. 10-11-2022 00:54 PST. $ cd aem-guides-wknd-spa. Documentation AEM AEM Tutorials AEM Sites WKND Tutorials Page templates. Getting Started with the AEM SPA Editor and React. 5 or 6. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. md for more details. If using AEM 6. A major aspect of this spirit that is. This is a multi-part tutorial and it is assumed that you have reviewed the ‘ui. Page templates. In the future, AEM is planning to invest in the AEM GraphQL API. Developer. Overview, benefits, and considerations for front-end pipelineto gain points, level up, and earn exciting badges like the newEnsure you have an author instance of AEM running locally on port 4502. Regardless of which model you choose to implement for SSR,, you need to specify to AEM how to access this remote rendering service. 5. Using the Navigation menu click Article > Hello World to navigate to the Hello World page created earlier. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). View. A multi-part tutorial designed for developers new to AEM. md for more details. 1. react project directory. This is a multi-part tutorial and it is assumed that the steps outlined in the Update Standard AEM Project have been completed. Select the Basic AEM Site Template and click Next. Next Steps. Developers using the React framework create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing tools. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 4, and Eclipse on my Windows 10 PC, but keep getting a BUILD FAILURE when I execute one of the first steps, which is. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. This opens a side panel with several tabs that provide a developer with information about the current page. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. The developer needs to be involved to customize the template and developing our own template. Create Byline component. 17" but do you have the service package also installed on AEM instance? Also, as per the tutorial link you shared it says, t his tutorial uses the Maven AEM Project Archetype 35. Prerequisites. Documentation AEM AEM Tutorials AEM Sites WKND Tutorials Get started with AEM Sites - Project Setup. Prerequisites. The Quick site creation through the Site Template (Site from Template) is currently enabled only in AEM as a Cloud but. You can expand the different categories within the palette by clicking the desired divider bar. This is a multi-part tutorial and it is assumed that you have reviewed the ‘ui. AEM must know where the remotely-rendered content can be retrieved. A corresponding tutorial is available where you can learn how to implement a website using the latest standards and technologies in AEM Sites. See moreView the live demo at Tutorial. I recomended taking the class "Create AEM Project using Archetype" of the course "AEM as a Cloud Service: Developing for AEM" in that video created a new project using archetype with old code and create a simple page, but it is enough for start, don't is necessary build WKND for learn how build a new project, it is actually very easy and. Option 3: Leverage the object hierarchy by. 0. AEM Publish does not use an. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). From the command line navigate into the aem-guides-wknd-spa. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development with Adobe Experience Manager Sites. Reload to refresh your session. 3, but can be set via the Apache Jackrabbit Query Engine Settings OSGi configuration and QueryEngineSettings JMX bean (property LimitReads). AEM full-stack project front-end artifact flow. Overview, benefits, and considerations for front-end pipelineWelcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). It’s important that you select import projects from an external model and you pick Maven. The hope is at the end of this tutorial you will understand the basic foundation of the AEM platform and knowledge of some of the common design patterns. To ONLY build and deploy the front-end resources from the ui. Implement an AEM site for a fictitious lifestyle brand, the WKND. This is the code companion for a series of tutorials designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Set up local AEM Author service: Create a folder. $ cd ~/code/aem-guides-wknd $ git checkout tutorial/pages-templates-start Deploy code base to a local AEM instance using your Maven skills: $ mvn clean install -PautoInstallSinglePackage NOTE. Under Site name enter wknd. Next Steps. $ cd aem-guides-wknd. WKND Developer Tutorial. Create a custom mapping. observe errors. The site is implemented using: Maven AEM Project. From the command line, navigate into the aem-guides-wknd project directory. Create your first React SPA in AEM. Prerequisites. This will bring up the Create Page wizard. The project was designed for Cloud service but after reading the description in github for AEM 6. Topics: AEM Project Archetype View more on this topic. Below are the high-level steps performed in the above video. geoffg59889438. $ cd ~/code/aem-guides-wknd $ git checkout tutorial/pages-templates-start Deploy code base to a local AEM instance using your Maven skills: $ mvn clean install -PautoInstallSinglePackage NOTE. 5 WKND finish website. Under Site Details > Site title enter WKND Site. Congratulations! Congratulations, you have learned how Adobe XD UI Kits can be used to map and plan an AEM Sites implementation. zip. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. To do this, I'm going to use an example of a WKND site from the Adobe tutorial, which. There are three project-related config changes and a style change to deploy for a test run, thus in total four specific changes in the WKND project to enable it for the front-end pipeline contract. The component uses the fragmentPath property to reference the actual. Set up local AEM Author service: Create a folder and inside the folder create another folder andname it Author. Reproduce Scenario (including but not limited to) Starting over in a new directory causes the problem to reproduce. Enable Front-End pipeline to speed your development to deployment cycle. Update Policies in AEM. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. Unit Testing and Adobe Cloud Manager. From the AEM Start screen click Sites > WKND Site > English > Article. Search for. It comes together with a tutorial that walks you through all important aspects of an AEM Sites project and teaches you the recommended best practices for AEM projects. However, you are using AEM archetype Version as 43; Correcting these should be solving the problem. On step 4 "Build Your. The three tabs are: Components for viewing structure and performance information. Under Site name enter wknd. For quick feature validation and debugging before deploying those previously mentioned environments,. After it is done thoroughly, you will notice AEM running on your browser at the 4502 port number,. The new WKND Tutorial explains step by step how to build such an app: Getting Started with the AEM SPA Editor - WKND Tutorial. maven. AEM Publish does not use an OSGi configuration. Choose the Article Page template and click Next. There are three project-related config changes and a style change to deploy for a test run, thus in total four specific changes in the WKND project to enable it for the front-end pipeline contract. Below is a high-level representation of the development, deployment, and delivery flow of the front-end artifacts in a full-stack AEM project. Project Setup. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. 393Z Deleting from RDE You can delete configurations and bundles that have previously been deployed to RDE by way of the CLI tooling. This represents the Component in AEM and implicitly defines the component’s resource type by its location in the JCR. There are three project-related config changes and a style change to deploy for a test run, thus in total four specific changes in the WKND project to enable it for the front-end pipeline contract. This tutorial covers the end-to-end creation of a custom Byline AEM Component that displays content authored in a Dialog, and explores developing a Sling Model to encapsulate business logic that populates the component’s HTL. which is. I recomended taking the class "Create AEM Project using Archetype" of the course "AEM a. In a real-world implementation “WKND Site” would be replaced by the brand name of your company or organization. AEM has a suite of commerce components, enabling a marketer to manage a commerce storefront using the AEM sites editor, Commerce features like a category landing page as well as product detail pages, shopping cart and more are standard features. In the next chapter a new page template is created based on the WKND Article design. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND. The following information is provided for each sample: Where to find the source code so that you can open it for learning purposes. AEM is developed following proven methodologies commonly practiced in large open-source projects. After download solution package, I installed chapter-8. See the AEM WKND Site project README. Last update: 2023-04-04. It includes an overview of the AEM development process and an introduction to core concepts. Getting started. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. 1. Templates are selected when creating a content fragmen and provide the new fragment with the basic structure, element, and variationRemote Renderer Configuration. The functionality is exposed through a Java™ API and a REST API. Getting Started Developing AEM Sites - WKND Tutorial; AEM Core Concepts; Structure of the AEM Touch-Enabled UI; Concepts of the AEM Touch-Enabled UI; AEM Development - Guidelines and Best Practices; Using Client-Side Libraries; Developing and Page Diff; Editor Limitations; The CSRF Protection Framework; Data Modeling - David Nuescheler’s. Next Steps. 5 or 6. This is the pom. A step-by-step tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND using the Quick Site Creation feature. The Site template generated a Header and Footer. Inspect the designs for the WKND Article template. Download the AEM as a Cloud Service SDK, Unzip the downloaded aemsdk-XXX. Getting Started Developing AEM Sites - WKND Tutorial; AEM Core Concepts; Structure of the AEM Touch-Enabled UI; Concepts of the AEM Touch-Enabled UI; AEM Development - Guidelines and Best Practices; Using Client-Side Libraries; Developing and Page Diff; Editor Limitations; The CSRF Protection Framework; Data Modeling - David Nuescheler’s. Prerequisites. Create a page named Component Basics beneath WKND Site > US > en. See the AEM WKND Site project README. The WKND SPA project includes both a React implementation. Mark as New; Follow; Mute; Subscribe to RSS Feed. In a standard AEM instance the global folder already exists in the template console. Topics: AEM Project Archetype View more on this topic. Built and deployed the cloned AEM WKND Sites project to AEM as a Cloud Service. I was able to resolve the issue by installing the wknd project again using -Pclassic option in the maven command. Documentation AEM AEM Tutorials AEM Sites WKND Tutorials Get started with AEM Sites - Project Setup. 5 WKND tutorials"AEM 6. Topics: Core Components. It is recommended to use a Sandbox program and Development environment when completing this tutorial. This tutorial starts by using the AEM Project Archetype to generate a new project. See the AEM WKND Site project README. Next, update the Experience Fragments to match the mockups. If using AEM 6. Choose the Article Page template and click Next. Prerequisites. Learn more about TeamsWKND Tutorial - Component Basics by Adobe Docs Abstract Component Basics In this chapter we will explore the underlying technology of an Adobe Experience Manager (AEM) Sites Component through a simple HelloWorld example. 13 of the uber jar. Ensure that you have administrative access to the AEM environment. Overview, benefits, and considerations for front-end pipeline$ cd ~/code/aem-guides-wknd $ git checkout tutorial/pages-templates-start Deploy code base to a local AEM instance using your Maven skills: $ mvn clean install -PautoInstallSinglePackage NOTE. There are three project-related config changes and a style change to deploy for a test run, thus in total four specific changes in the WKND project to enable it for the front-end pipeline contract. View the live demo at Tutorial. wknD Sites Project - Core(aem-guildes-wkdn. 5 or 6. WKND SPA Project. Hi all, While going through this tutorial I encountered an issue with the using "npm run watch". Community. If using AEM 6. I decided to end this tutorial and move on with the courses. adobe. Review the Code. . Getting Started Developing AEM Sites - WKND Tutorial; Structure of the AEM UI; Sling Cheatsheet; Using Sling Adapters; Using the Sling Resource Merger in AEM as a Cloud Service; Overlays in AEM as a Cloud Service; Using Client-Side Libraries; Page Diff; Editor Limitations; Naming Conventions; Components and Templates. 1, Maven 3. 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. Quick links. The WKND SPA project includes both a React implementation. Review the AEMHeadless object. Anatomy of the React app. If using AEM 6. frontend ode_modulesenhanced-resolvelibDescriptionFilePlugin. The site is implemented using: Maven AEM Project. frontend folder. This tutorial extends the Byline component in the. Inspect the designs for the WKND Article template. Rename existing pipeline. 4, append the classic profile to any Maven commands. Implement an AEM site for a fictitious lifestyle brand, the WKND. $ cd ~/code/aem-guides-wknd $ git checkout tutorial/pages-templates-start Deploy code base to a local AEM instance using your Maven skills: $ mvn clean install -PautoInstallSinglePackage NOTE. In the next chapter a new page template is created based on the WKND Article. Next Steps. It is recommended to use a Sandbox program and Development environment when completing this tutorial. Learn how Client-Side Libraries or clientlibs are used to deploy and manage CSS and JavaScript for an Adobe Experience Manager (AEM) Sites implementation. Select the Basic AEM Site Template and click Next. 0 What's Changed Resolved package dependency in classic all project by. Select the Basic AEM Site Template and click Next. frontend’ Module. You signed out in another tab or window. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Overview, benefits, and considerations for front-end pipelineBelow are the high-level steps performed in the above video. If using AEM 6. Click OK. 8, so this video serves the purpose of how to install Java on a new. AEM Publish service requires an AEM Dispatcher configuration to be added to the AEM Publish’s Dispatcher configuration. A multi-part tutorial on how to develop for the AEM SPA Editor. zip: AEM as a Cloud Service, the default build. Open the Templates Console (via Tools -> General) then navigate to the required folder. It is recommended to use a Sandbox program and Development environment when completing this tutorial. Courses Tutorials Certification Events Instructor-led training View all learning options. I recomended taking the class "Create AEM Project using Archetype" of the course "AEM as a Cloud Service: Developing for AEM" in that video created a new project using archetype with old code and create a simple page, but it is enough for start, don't is necessary build WKND for learn how build a new project, it is actually very easy and. 0. This tutorial will also cover how to deploy theme updates to an AEM Site using Adobe Cloud Manager's Front End Pipeline. Many core elements in AEM’s technology stack are in fact maintained as active open-source projects, such as Sling and Jackrabbit, which were contributed to the Apache Software Foundation. Last update: 2023-11-20. Create a delivery based on the custom mapping. Built and deployed the cloned AEM WKND Sites project to AEM as a Cloud Service. Select the Basic AEM Site Template and click Next. In a real-world implementation “WKND Site” would be replaced by the brand name of your company or organization. Setup AEM 6. 3. Enable Front-End pipeline to speed your development to deployment cycle. A corresponding tutorial is available where you can learn how to implement a website using the latest standards and technologies in AEM Sites. Getting Started Developing AEM Sites - WKND Tutorial; AEM Core Concepts; Structure of the AEM Touch-Enabled UI; Concepts of the AEM Touch-Enabled UI; AEM Development - Guidelines and Best Practices; Using Client-Side Libraries; Developing and Page Diff; Editor Limitations; The CSRF Protection Framework; Data Modeling - David Nuescheler’s. The Jackrabbit FileVault tool (VLT) is a tool developed by The Apache Foundation that maps the content of a Jackrabbit/AEM instance to your file system. 1. 15. On this video, we are going to build the AEM 6. If using AEM 6. See the AEM WKND Site project README. Add the Hello World Component to the newly created page. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. 5 or 6. Choose the Article Page template and click Next. 2. By default, sample content from ui. Before enhancing the WKND App, review the key files. Implement an AEM site for a fictitious lifestyle brand, the WKND. They can also be used together with Multi-Site Management to. After following the tutorial again to install the WKND site i still see the blank pages with previously mentioned errors in web console. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND. jar file to install the Publish instance. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development. See the AEM WKND Site project README. From the command line, navigate into the aem-guides-wknd project directory. Additional UI Kits are available to inspect and download. So we’ll select AEM - guides - wknd which contains all of these sub projects. content. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. The following are required when setting up SAML 2. Use the “content model first” design principle. Its main purpose is to reduce latency by delivering cacheable content from the CDN nodes at the edge, near the browser. Additional UI Kits are available to inspect and download. Rename the existing pipeline. Implement an AEM site for a fictitious lifestyle brand, the WKND. Implement to run AEM GraphQL persisted queriesIn this chapter, a new AEM project is deployed, based on the AEM Project Archetype. The dialog exposes the interface with which content authors can provide. Cloud-Ready: If desired, use AEM as a Cloud Service to go-live in few days and ease scalability and maintenance. md for more details. Congratulations! Congratulations, you have learned how Adobe XD UI Kits can be used to map and plan an AEM Sites implementation. Double-click to run the jar file. Administrator access to the IDP. When building a new feature, always start by designing the JCR content structure first, and then look into reading and writing your content using the default Sling servlets. AEM full-stack project front-end artifact flow. Learn the modern approach on how to integrate Adobe Experience Manager (AEM) and Adobe Analytics using the Platform Web SDK. I can see bannerText prop in CRXD, but it is missing from the JSON model and never arrives to the React. Add a copy of the license. Experience Cloud Advocates. 9. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Learn how to create, manage, deliver, and optimize digital assets. 0: Due to tslint being. 7767. The ImageComponent component is only visible in the webpack dev server. core) which shows status as installed but when I. zip. 5 or 6. However, you are using AEM archetype Version as 43 However, you are using AEM archetype Version as 43Inspect the designs for the WKND Article template. Prerequisites. 1. 4. The WKND Developer Tutorial is available here and guides you through creating an AEM project using the latest technologies and best practices. Review the required tooling and instructions for setting up a local development. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND. If using AEM 6. apps -> properties -> project facet -> REMOVE dynamic web module. Ensure you have privileges to create, and deploy pipelines in Cloud Manager and access to an AEM as a Cloud Service environment. AEM full-stack project front-end artifact flow. So, now we will figure out how to configure working SAML authentication for the local AEM Author using OKTA. 0 is only supported to. A multi-part tutorial designed for developers new to AEM. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. 5. Implement an AEM site for a fictitious lifestyle brand, the WKND. Download and deploy the WKND Reference site. Review the AEMHeadless object. 4, append the classic profile to any Maven commands. AEM full-stack project front-end artifact flow. AEM must know where the remotely-rendered content can be retrieved. The VLT tool has similar functions as source control system client (such as a Subversion (SVN) client), providing normal check-in, check-out and management operations, and. I can see bannerText prop in CRXD, but it is missing from the JSON model and never arrives to. This article assumes that your project’s Dispatcher configuration includes the file opt-in/USE_SOURCES_DIRECTLY. However, you are using AEM archetype Version as 43 However, you are using AEM archetype Version as 43Ensure that you have administrative access to the AEM environment. Enable Front-End pipeline to speed your development to deployment cycle. It includes an overview of the AEM development process and an introduction to core concepts. 1,326 1. sdk. User Interface Overview. Build the form in AEM, which will use the created delivery. Next Steps. AEM WKND Apache Maven Build Failure. This is a multi-part tutorial and it is assumed that you have reviewed the ‘ui. frontend’ Module. 4, append the classic profile to any Maven commands. Under Site Details > Site title enter WKND Site. 6. After enabling the front-end pipeline to only deploy the front-end resources in AEM as a Cloud Service environment, there is some impact on the local AEM development and you have to tweak the git branching model. 5WKNDaem-guides-wkndui. Changes to the full-stack AEM project. . Quick links. You switched accounts on another tab or window. The dialog exposes the interface with which content authors can provide. A multi-part tutorial for developers new to AEM. Congratulations! Congratulations, you have learned how Adobe XD UI Kits can be used to map and plan an AEM Sites implementation. Changes to the full-stack AEM project. In a real-world implementation “WKND Site” would be replaced by the brand name of your company or organization. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development with Adobe Experience Manager Sites. About. WKND Developer Tutorial. Option 3: Leverage the object hierarchy by customizing and extending the container component. WKND tutorial issue: no files generated in clientlibs when I execute npm run watch in ui. Customers can use and introduce new AEM components to further customize the. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). Implement an AEM site for a fictitious lifestyle brand, the WKND. The goal for this multi-part tutorial is to teach a developer who is new to AEM how to implement a website in AEM using the latest standards and technologies. 5. I had this problem in AEM while I using WKND tutorial. This video is the first of the Series "AEM 6. AEM full-stack project front-end artifact flow. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. From the command line, navigate into the aem-guides-wknd project directory. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Next Steps. This comprehensive tutorial guides you through the process of seamlessly collecting WKND pageview and CTA click data. Scripts can be. Topics: AEM Project Archetype Solved: I am new to AEM, and try to use official tutorial WKND for learning, in component basic page I get a blocker in " Client-Side - 600640 Create Byline component. zip: AEM as a Cloud Service, the default build. A step-by-step tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND using the Quick Site Creation feature. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. AEM provides the Content Fragment core component - a component that lets you include content fragments on your pages. 0-classic. A multi-part tutorial for developers new to AEM. Additional UI Kits are available to inspect and download. Remote Renderer Configuration. frontend [WARNING] npm WARN deprecated [email protected] Advanced Concepts of AEM Headless tutorial steps OR install the Advanced-GraphQL-Tutorial-Solution-Package and aem-guides-wknd. ” Tutorial - Getting Started with AEM Headless and GraphQL. The WKND concept, and in particular the WKND reference site, is a full reference implementation of an AEM Sites project. 0 bb6c041 Compare WKND Site - v3. See the AEM WKND Site project README. Enable Front-End pipeline to speed your development to deployment cycle. The traditional sites one includes some steps to use AEMFED: Getting Started with AEM Sites Chapter 3 - Client-Side Libraries and Responsive Grid AEMFED could also be used with the SPA Editor but I.