The SPA Editor offers a comprehensive solution for. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilitie. 3 is the upgraded release to the Adobe Experience Manager 6. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. js with a fixed, but editable Title component. The use of Redux alongside the. Adobe Experience Manager (AEM) Sites is a leading experience management platform. Security User. Creation of AEM project using maven archetype generates AEM ui. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Verified employers. Learn how to add editable components to dynamic routes in a remote SPA. apps. 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. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. AEM 6. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. Assets User Guide. 0:00 / 4:05 • Chapters AEM Single Page Application (SPA) AEM SPA #2 | How to implement SPA in AEM AEM GEEKS 6. In the Edit AEM Forms Container dialog, specify the following:. Last update: 2023-10-04. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. 5 user guides. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. AEM as a Cloud Service, standardize the deployment architectures for all customers, with goal to completely free customers from architecture concentrations. SPA WKND Tutorial; Getting Started Using React; Getting Started Using Angular; If you must adapt an existing SPA to use it in AEM, review the following documents: The RemotePage Component; Editing an External SPA within AEM; See below for additional resources that can take you deeper into SPA topics in AEM. Using an AEM dialog, authors can set the location for the weather to be displayed. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. 3 reviews. How to create react spa custom component. Stop the webpack dev server. 5 stars. Enter a profile name, and values for unsharp mask, crop, or swatch, or both. js with a fixed, but editable Title component. Adobe Cloud Manager integrates unit test execution and code coverage reporting into its CI/CD pipeline to help encourage and promote the best practice of unit testing AEM code. In this video, we discuss three approaches for using AEM and Target, and help you understand what works best for your organization. Map the SPA URLs to AEM Pages. This user guide contains videos and tutorials on the many features and capabilities of AEM Sites. Adobe provides a reference implementation called Core Components with a large set of components containing all the current best practices in regards to AEM development (SPA or non-SPA). Click to view larger image. api> Previously, after project creation, it was like this: <aem. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. html. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. The HeaderComponent currently has the. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. We were able to achieve this by developing an ' aem-vue-editable-components ' library, similar to the 'aem-react-editable-components'. Hi marcog1899 sorry for the delay, we pulled it because it was a little out of date. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. getState (); To see the current state of the data layer on an AEM site inspect the response. For publishing from AEM Sites using Edge Delivery Services, click here. $ cd aem-guides-wknd-spa. Quick links. AEM Administrator access to AEM as a Cloud Service environment. A SPA and AEM have different domains when they are accessed by end users from the different domain. Before you begin your own SPA project for AEM. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. 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 how to bootstrap a remote SPA for AEM SPA Editor compatibility. Looking for a hands-on. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Slimmest example. The ImageComponent component is only visible in the webpack dev server. Learn how to add editable fixed components to a remote SPA. This guide provides an summary of how to get started with Experience Manager as a Cloud Service, including how to get access and important data protection information. Adobe Experience Manager (AEM) Sites is a leading experience management platform. Community. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. SPA Editor Overview. Deploy the updated SPA to AEM to see the changes. api> Previously, after project creation, it was like this: <aem. Search and apply for the latest Adobe experience manager aem jobs in Victoria, BC. Image part works fine, while text is not showing up. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 0 authentication: Deployment Manager access to Cloud Manager. Are there any limitations (Ex. From the command line navigate into the aem-guides-wknd-spa. Dynamic navigation is implemented using React Router and React Core Components. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. core. $ cd aem-guides-wknd-spa. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. The latest code base is available as downloadable AEM Packages. SPA Blueprint offers a deep dive into how the SPA SDK for AEM works in case you want to implement SPAs in. Experience League. 5. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM provides AEM React Editable Components v2, an Node. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. js) Remote SPAs with editable AEM content using AEM SPA Editor. The OSGI configuration outlined in this document is sufficient for: Single-origin resource sharing on AEM Publish. Reports in AEM Guides. Tutorials. How to map aem component and react component. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning. Immerse yourself in SPA development with this multi-part tutorial leading you through project setup, component mapping, front-end development tools, and application routing to implement your own SPA. AEM 6. WKND SPA Implementation. When running on Windows and generating the dispatcher configuration, you should be running in an elevated command prompt or the Windows Subsystem for Linux (see. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. js) Remote SPAs with editable AEM content using AEM SPA Editor. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. We can build projects for AEM with a SPA(Single Page Application) as frontend (can use either Angular or React). Onboarding. 2. Dynamic navigation is implemented using React Router and React Core Components. Option 3: Leverage the object hierarchy by customizing and extending the container component. From the command line terminal verify that. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. A project template for AEM-based applications. The SPA Editor offers a comprehensive solution for. Created for: Beginner. Using an AEM dialog, authors can set the location for the weather to be displayed. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The React app will be developed and designed to be deployed with AEM's SPA Editor, which maps React components to AEM components. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Learn. Paste the extraction key that was copied from CAM earlier into the Extraction key input field of Create Migration Set form. Double-click the aem-publish-p4503. Author in-context a portion of a remotely hosted React application. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). 4+ and AEM 6. Only expose style options and combinations that are allowed by brand standards. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. xml line that I have changed now: <aem. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. This tutorial explain, 1. 5-SNAPSHOT. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. This user guide contains videos and tutorials helping you maximize your value from AEM. Experience League. But, glad that your issue is now resolved. Create the Sling Model. 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 to use the delegation pattern for extending Sling Models and. Learn. Follow the readme instructions to create an AEM SPA editor archetype project: mvn clean install archetype:update-local-catalog mvn archetype:crawl mvn archetype:generate -DarchetypeCatalog=internal -DarchetypeGroupId=com. Component mapping SPA component to AEM componentA simple weather component will be built. This comprehensive guide explores the concepts, benefits, challenges, and best practices of. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. Connect with one of our experts. Introduction to AEM Forms as a Cloud Service. With a traditional AEM component, an HTL script is typically required. From documentation and support articles to Adobe Summit keynotes, it's all here. Sign In. Application Structure Including the dependencies and building your app as described previously will leave you with a working SPA package which you can upload to your AEM instance. Recorded at #adaptTo() 2018 – visit for more informationand. . Requirements. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Abstract. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. SPA Blueprint offers a deep dive into how the SPA SDK for AEM works in case you wish to implement SPAs in AEM for a framework other. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. zip on my plain AEM. sdk. Tutorials. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. 20220616T174806Z-220500</aem. It was a new product. Users can complete the tutorial using React or Angular frameworks. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Apache Sling is the framework for RESTful web-applications based on extensible content tree, like Java Content Repository AEM is built using Sling, it’s a web application framework, based on REST principles, that provide easy development of content-oriented application. Created for: User. The paths to be re-routed at: * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM. Basic git commands. Last update: 2023-11-06. Adobe Experience Manager (AEM) 6. This demo will let you quickly create "React App" with AEM SPA Editor using maven aem-spa-project-archetype (tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. . Frontend module, WebPack is used to bundle JavaScript and transform front-end assets before distributing the output into the appropriate AEM client libraries of your project. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. frontend to ui. 5-SNAPSHOT. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Single Page Application (SPA) is a web application architecture that provides a smooth and responsive user experience. This is based on the AEM react SPA tutorial. The SPA Editor offers a comprehensive solution for supporting SPAs. Adobe provides a reference implementation called Core Components with a large set of components containing all the current best practices in regards to AEM development (SPA or non-SPA). In this tutorial, I will show how to use Adobe's archetype to create an AEM application with React. SAML 2. Deploy the front-end code repository to this pipeline. Last update: 2023-04-20. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. The SPA components must be in sync with the page model and be updated with any changes to. Stop the webpack dev server and from the root of the project, deploy the changes to AEM using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install . When defining the style names available to AEM authors, it is best to: Name styles using a vocabulary understood by the authors. Tutorials. Application Structure Including the dependencies and building your app as described previously will leave you with a working SPA package which you can upload to your AEM instance. This guide provides an summary of how to get started with Experience Manager as a Cloud Service, including how to get access and important data protection information. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Hi Thanks for sharing the resolution. 4. From the command line navigate into the aem-guides-wknd-spa. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. The SPA Editor offers a comprehensive solution for supporting SPAs. This document provides an overview of the different models and describes the levels of SPA integration. Adobe Experience Manager (AEM) Assets is a digital asset management tool on AEM Platform that allows users to create, manage, and share their digital assets (images, videos, documents, and audio clips) in a web-based repository. 6+ Git macOS only prerequisites Xcode or Xcode command line tools aem-guides-wknd. 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. Prerequisites Before starting this tutorial, you’ll need the following: A basic. Option 1: Centralize the logic and broadcast to the necessary components for example, by using a util class as a pure object-oriented solution. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This user guide contains videos and tutorials on the many features and capabilities of AEM Assets. . . Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Overview Single page applications (SPAs) can offer the user a rich, dynamic experience that reacts and behaves in familiar ways, often just like a native application. SPA. The ImageComponent component is only visible in the webpack dev server. Tap Home and select Edit from the top action bar. Here, we’ll walk you through Experience Manager capabilities such as content management (CMS), digital asset management (DAM), and digital enrollment. Next, deploy the updated SPA to AEM and update the template policies. Start the tutorial by navigating to the SPA Editor Project chapter and learn how to generate a SPA Editor enabled project using the AEM Project Archetype. Universal Editor Introduction. 0. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Push a data object on to the data layer by entering the following in the. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Implementing a React Component for SPA; Getting Started using Angular; SPA Deep Dives; Developing SPAs for AEM; SPA Editor Overview; SPA Blueprint; SPA Page Component; Dynamic Model to Component Mapping for. 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. . Apache Sling Models 1. There is a specific folder structure that AEM requires projects to be built. AEM Headless GraphQL Video Series; AEM Headless GraphQL Hands-on Tutorial. In the future, AEM is planning to invest in the AEM GraphQL API. Populates the React Edible components with AEM’s content. 8+. Initially, it will be in React but Angular is also planned (although it might be a good month later). Learn how to create a custom weather component to be used with the AEM SPA Editor. Developer. Hi, I was following Getting Started with the AEM SPA Editor - Hello World Tutorial @Getting Started with the AEM SPA Editor - Hello World Tutorial 1. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. Inspect the SPA routing in AEM. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. Adobe Experience Manager Sites, at its core is a platform for managing web content. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Implementing a React Component for SPA; Getting Started using Angular; SPA Deep Dives; Developing SPAs. For publishing from AEM Sites using Edge Delivery Services, click here. SPA Blueprint. Authenticate the Adobe I/O CLI with the AEM as a Cloud. Contribute to adobe/aem-react-spa development by creating an account on GitHub. Retail Journal app by adding a custom Hello World component. 5-SNAPSHOT. Next, deploy the updated SPA to AEM and update the template policies. 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. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Create your first React SPA in AEM by Adobe Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Deploy the front-end code repository to this pipeline. The walkthrough is based on standard AEM functionality and the sample WKND SPA. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Option 3: Leverage the object hierarchy by. Before you begin your own SPA. Use out of the box components and templates to quickly get a site up and running. 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. Meet our community of customer advocates. Understand how to author with, and administer, Experience Manager Sites as a Cloud Service. . In today’s digital landscape, delivering engaging and dynamic web experiences is paramount. A simple weather component is built. It has included some new and enhanced functionality, key customer fixes, high priority customer enhancements and general bug fixes oriented toward product stabilization. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. ) package. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. To add an Image Profile, select Create. To add an authorable page in the SPA, follow the same steps in the section Add Authorable Components to the Page. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Wrap the React app with an initialized ModelManager, and render the React app. Hybrid and SPA AEM Development. AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. Integrate AEM Author service with Adobe Target. A simple weather component is built. It has included some new and enhanced functionality, key customer fixes, high priority customer enhancements and general bug fixes oriented toward product stabilization. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Learn. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Sign In. You know, of course, we layer in advanced features to support personalization, analytics, social, headless, spa, you name it, basically everything you need to build a modern digital experience but at the. Create the Sling Model. For the future reference, problem was that AEM version stated in main pom. The paths to be re-routed at: * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. I was following Getting Started with the AEM SPA Editor - Hello World Tutorial @Getting Started with the AEM SPA Editor - Hello World Tutorial. Learn how to add editable fixed components to a remote SPA. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. The. With a traditional AEM component, an HTL script is typically required. 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. zip on my plain AEM. In the future,. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. SPA development implementation principles for AEM. Understanding these key concepts enables organizations to. The options are Adaptive Form and Interactive Communication. spa. day. SPA Introduction and Walkthrough. So here is the more detailed explanation. 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. Only expose style combinations that have an effect. The following AEM documentation includes everything from essential guides for those new to the content management system (CMS) to videos, tutorials, and further learning resources to get the most out of AEM 6. json (AEM Content Services) * * @param {*} path the path being requested of the SPA * @param {*} req the request object * @returns true if the SPA request should be re-routed to AEM */ const toAEM = function. js v14+ npm v7+ Java™ 11 Maven 3. zip or greater aem-guides-wknd-graphql source code This tutorial. For publishing from AEM Sites using Edge Delivery Services, click here. Courses Tutorials Certification Events Instructor-led training View all learning options. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. $ cd aem-guides-wknd-spa. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. AEM Site Templates - Also known as Quick Site Creation, a low-code approach to generating an AEM Site by using a pre-defined Site Template. For example, the default Participant Step, present in a new workflow as Step 1:. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development. 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. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application. Learn how to create, manage, deliver, and optimize digital assets. Contribute to adobe/aem-react-spa development by creating an account on GitHub. Experience Fragments enables content authors to reuse content across channels including Sites pages and third-party systems. - I would like to learn about the differences, advantages and disadvantages of all these possible options at a general level, in order to have an overview of them. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This tutorial explains, How to implement SPA in AEM. The Edit AEM Forms SPA Container dialog opens. Deploy the updated SPA to AEM to see the changes. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. 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. AEM 6550 - Create a sample SPA React App using AEM SPA Editor by Sreekanth Choudry Nalabotu Abstract This tutorial on official adobe docs is an excellent guide for creating your first AEM SPA React App, however if you are looking for some quick steps, go through the following. Different domains. 385 likes · 4 talking about this · 875 were here. See how-to content. Created for: Beginner. These aspects include defining. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using. Create the Sling Model. Explore AEM’s GraphQL capabilities by building out a React App that consumes Content. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. These methods should also allow the Adobe Experience Platform Launch integration to coexist with SPAs that are built to use the SPA Editor. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. The. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The module enables a dynamic resolution of components when parsing the JSON model of the application. The <Page> component has logic to dynamically create React components based on the. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Filter by rating. AEM Site Templates - Also known as Quick Site Creation, a low-code approach to generating an AEM Site by using a pre-defined Site Template. As part of this tutorial, we will try to understand over all movement in detail from ui. SPA Introduction and Walkthrough. You should also be able to identify, building blocks of AEM as a Cloud Service. This tutorial explains,1. Last update: 2023-03-29. You can also define model properties, such as whether the workflow is transient or uses multiple resources. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. Additional. Open a terminal and stop the webpack dev server if started. 8+. Assets User Guide. You will also learn how to use out of the box AEM React Core Components. AEM 6550 - Create a sample SPA React App using AEM SPA Editor by Sreekanth Choudry Nalabotu Abstract This tutorial on official adobe docs is an excellent guide for creating your first AEM SPA React App, however if you are looking for some quick steps, go through the following. Any AEM project should use the AEM Project Archetype, which supports SPA projects using React or Angular and uses the SPA SDK. AEM Sites videos and tutorials.