{"id":433,"date":"2020-05-24T13:41:18","date_gmt":"2020-05-24T13:41:18","guid":{"rendered":"http:\/\/lhotsetechnologies.com\/blog\/?p=433"},"modified":"2020-06-21T01:43:07","modified_gmt":"2020-06-21T01:43:07","slug":"spa-in-aem-6-5-part-2","status":"publish","type":"post","link":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/","title":{"rendered":"SPA in AEM 6.5 Part 2"},"content":{"rendered":"\n<p><strong>1. How to create a custom SPA component ?<\/strong><br><\/p>\n\n\n\n<p>Lets create a component in AEM<\/p>\n\n\n\n<p>For creating custom component you need to remember these things i.e.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There is a mapping of components between aem module and react module.<\/li><li>We should use Sling exporter to export our component json and so that it can be accessed by the react component.<\/li><li>Getter of properties is must in sling exporter.<\/li><li>Property name should be the same in the react component and in sling exporter.<\/li><li>Do not make a &lt;componentname&gt;.html file in aem component as it is not needed.<\/li><\/ul>\n\n\n\n<p>Here I create a custom aem component known as my-app which can contain nodes but no html file. This contains a single textfield in its dialog.<\/p>\n\n\n\n<p>Here is my component node and my dialog node which contains only one textfield.<\/p>\n\n\n\n<p><strong>Note: No HTML file.&nbsp;<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Create a Sling Exporter for your AEM component.&nbsp;<\/strong><br><\/p>\n\n\n\n<p><strong>import com.adobe.cq.export.json.ComponentExporter;<\/strong><\/p>\n\n\n\n<p><strong>import com.adobe.cq.export.json.ExporterConstants;<\/strong><\/p>\n\n\n\n<p><strong>import org.apache.sling.api.SlingHttpServletRequest;<\/strong><\/p>\n\n\n\n<p><strong>import org.apache.sling.models.annotations.DefaultInjectionStrategy;<\/strong><\/p>\n\n\n\n<p><strong>import org.apache.sling.models.annotations.Exporter;<\/strong><\/p>\n\n\n\n<p><strong>import org.apache.sling.models.annotations.Model;<\/strong><\/p>\n\n\n\n<p><strong>import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;<\/strong><br><\/p>\n\n\n\n<p><strong>import javax.annotation.Nonnull;<\/strong><br><\/p>\n\n\n\n<p><strong>@Model(adaptables = SlingHttpServletRequest.class,<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;resourceType = com.testspa.core.models.MyAppModel.<\/strong><strong><em>RESOURCE_TYPE<\/em><\/strong><strong>,<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;adapters = {com.testspa.core.models.MyAppModel.class, ComponentExporter.class},<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;defaultInjectionStrategy = DefaultInjectionStrategy.<\/strong><strong><em>OPTIONAL<\/em><\/strong><strong>)<\/strong><\/p>\n\n\n\n<p><strong>@Exporter(name = ExporterConstants.<\/strong><strong><em>SLING_MODEL_EXPORTER_NAME<\/em><\/strong><strong>, extensions = ExporterConstants.<\/strong><strong><em>SLING_MODEL_EXTENSION<\/em><\/strong><strong>)<\/strong><\/p>\n\n\n\n<p><strong>public class MyAppModel implements ComponentExporter {<\/strong><br><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;protected static final String <\/strong><strong><em>RESOURCE_TYPE <\/em><\/strong><strong>=<\/strong><\/p>\n\n\n\n<p><strong>&#8220;testspa\/components\/content\/my-app&#8221;;<\/strong><br><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;@ValueMapValue(name = &#8220;title&#8221;)<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;private String title;<\/strong><br><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;public String getTitle() {<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return title;<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;}<\/strong><br><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;@Nonnull<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;@Override<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;public String getExportedType() {<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return <\/strong><strong><em>RESOURCE_TYPE<\/em><\/strong><strong>;<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;}<\/strong><\/p>\n\n\n\n<p><strong>}<\/strong><br><\/p>\n\n\n\n<p><strong>2.<\/strong> <strong>Why to create a Sling Model as a Sling Exporter?<\/strong><br><\/p>\n\n\n\n<p>Sling Exporter is created so that It can expose the data of the component dialog field in JSON format. React component will use your component Sling Exporter Model for rendering the configured data.&nbsp;<br><\/p>\n\n\n\n<p><strong>3. How will your Sling Model get resolved for a component because HTML file is not present in the component?<\/strong><\/p>\n\n\n\n<p>It will not resolve in HTML to Sling Model. It will resolve in the Sling Model to AEM component. Please check the first line of code there I have defined the AEM component resource type as given blow-<br><\/p>\n\n\n\n<p><strong>protected static final String <\/strong><strong><em>RESOURCE_TYPE <\/em><\/strong><strong>=&#8221;testspa\/components\/content\/my-app&#8221;;<\/strong><\/p>\n\n\n\n<p>Based on this line, the Sling Model got resolved.&nbsp;<br><\/p>\n\n\n\n<p><strong>4. Do we keep in mind some rules for creating a Sling Exporter?<\/strong><\/p>\n\n\n\n<p>Yes,&nbsp;<\/p>\n\n\n\n<p>Please create getter for all fields for which you want to expose in JSON.&nbsp;<\/p>\n\n\n\n<p>Please check the mapping of your AEM component in your Sling Model.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>So now lets create a SPA Component in react app inside the component in the src folder.<\/p>\n\n\n\n<p>Here I am using react to make components.<br><\/p>\n\n\n\n<p><strong>5. My-App<\/strong><\/p>\n\n\n\n<p>This is my component folder in React . It includes an index.js file&nbsp; as shown below.<br><\/p>\n\n\n\n<p><strong>import React, {Component} from &#8216;react&#8217;<\/strong><\/p>\n\n\n\n<p><strong>import {MapTo} from &#8216;@adobe\/cq-react-editable-components&#8217;;<\/strong><\/p>\n\n\n\n<p><strong>const editConfig = {<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;emptyLabel: &#8216;Title Component&#8217;,<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;isEmpty: function(props) {<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return !props || !props.title || props.title.trim().length &lt; 1;<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;}<\/strong><\/p>\n\n\n\n<p><strong>};<\/strong><br><\/p>\n\n\n\n<p><strong>class My-App extends Component {<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;render() {<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (<\/strong><\/p>\n\n\n\n<p><strong>&lt;React.Fragment&gt;<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/strong><strong>\t<\/strong><strong>\t<\/strong><strong> {this.props.title}<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/strong><strong>\t<\/strong><strong>\t<\/strong><strong>&lt;\/React.Fragment&gt;<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;&nbsp;&nbsp;}<\/strong><\/p>\n\n\n\n<p><strong>}<\/strong><br><\/p>\n\n\n\n<p>In the SPA component we map the AEM component. Here JSON content exposed by an AEM component can be automatically injected into a React component as props.<br><\/p>\n\n\n\n<p><strong>6.import-components.js<\/strong><\/p>\n\n\n\n<p>You need to include the React component path inside <em>import-components.js.<\/em> Otherwise, you will not be able to show your component into the page.<br><\/p>\n\n\n\n<p><strong>import &#8216;.\/My-App&#8217;;<\/strong><br><\/p>\n\n\n\n<p>Now, deploy your code using Maven commands.<\/p>\n\n\n\n<p><strong>mvn clean install -PautoInstallPackage -Padobe-public<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/e-2rBsQwF8unRlwAZgOWYc1mLkUvZQ7px9B8KlXzFJFENb5BUohHG-Z_HQIg8cQ-9yGpsWmMF2gO6QFFu1zwgC3UfYhMDypqq-xPsqgh-1sCIhjXkn3oz5nm1wx6ksmeNaXyrmQ1\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/3H8hDll9n_Eg36DWvbI2XiehcCToJgUZL6Jn-dSbb-MiwZddtBalPJG1VrMDJnM6sWGQ9fv4Y7F_tn0xyuaZgJcPPkMXdbKJVvVODl4_phmriwT_FFBSf3qpEp68oQ6ohUEM4pR_\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/aYPqWZjQa6HMW3JpClrfFDOpm56Ipx-hgi123beTJPMPFEiBIvk9FHrpOCdQE7lJE6jc3ib-JT7taO4LN7Nl-4XreJKsaLio5G1Js_fWCSu-6OTB7eyCZWz1PS_bR7XqAAGJqHVI\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/DZo6j3Fgd9TJnPBwT1XnTAw9KyyGuWIQWfGXA2ugDSxYZzY4O4FkHlti6I8a4HnHGQOpfho6khKsNmMAX5ngbBATMi-7SUGfOwh9xJFFinfgzCktBcbt9mWva7Gar_EmJDu3HEji\" alt=\"\"\/><\/figure>\n\n\n\n<p>When you click on right icon then<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/86G4Dwd7WTt_1Bvx4Rsmn5oe6E-qzHmNaSSLRc0zaKh2hfXzGBF9Gt6aAnI_U97qrQjAR_8ekkF5FIBQg-ERebILCP7feWq0LVt0LtgT4YR4mTIHjdZT-dhuGYyDIhNdEV3v8z9R\" alt=\"\"\/><\/figure>\n\n\n\n<p>Go to react-app module and run command<\/p>\n\n\n\n<p><strong>npm start<\/strong><br><\/p>\n\n\n\n<p>Go to&nbsp; http:\/\/localhost:3000\/<\/p>\n\n\n\n<p>Here you will see the content of your dropped components.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>@Reference<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/docs.adobe.com\/content\/help\/en\/experience-manager-64\/developing\/headless\/spas\/spa-getting-started-react.html\">https:\/\/docs.adobe.com\/content\/help\/en\/experience-manager-64\/developing\/headless\/spas\/spa-getting-started-react.html<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/docs.adobe.com\/content\/help\/en\/experience-manager-learn\/spa-react-tutorial\/map-components.html#update-policies-in-aem\">https:\/\/docs.adobe.com\/content\/help\/en\/experience-manager-learn\/spa-react-tutorial\/map-components.html#update-policies-in-aem<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/docs.adobe.com\/content\/help\/en\/experience-manager-64\/developing\/headless\/spas\/spa-architecture.html\">https:\/\/docs.adobe.com\/content\/help\/en\/experience-manager-64\/developing\/headless\/spas\/spa-architecture.html<\/a><\/p>\n\n\n\n<p>Happy Coding <br><strong>Shivam Kumar Chauhan<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. How to create a custom SPA component ? Lets create a component in AEM For creating custom component you [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[278,280,279,284],"tags":[273,276,275,277,274,282],"class_list":["post-433","post","type-post","status-publish","format-standard","hentry","category-aem-6-5","category-react-with-aem","category-spa","category-spa-with-aem-6-5","tag-aem-6-5","tag-react-with-aem","tag-sling-exporter","tag-sling-model-exporter","tag-spa","tag-spa-with-aem-6-5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SPA in AEM 6.5 Part 2 - AEM Blog | Lhotse Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SPA in AEM 6.5 Part 2 - AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"og:description\" content=\"1. How to create a custom SPA component ? Lets create a component in AEM For creating custom component you [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-24T13:41:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-21T01:43:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3\" \/>\n<meta name=\"author\" content=\"Shivam Kumar Chauhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shivam Kumar Chauhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\"},\"author\":{\"name\":\"Shivam Kumar Chauhan\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/b8eb4eeb9ca844d32b54de183c946afc\"},\"headline\":\"SPA in AEM 6.5 Part 2\",\"datePublished\":\"2020-05-24T13:41:18+00:00\",\"dateModified\":\"2020-06-21T01:43:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\"},\"wordCount\":781,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3\",\"keywords\":[\"AEM 6.5\",\"React with AEM\",\"Sling Exporter\",\"Sling Model Exporter\",\"SPA\",\"SPA with AEM 6.5\"],\"articleSection\":[\"AEM 6.5\",\"React With AEM\",\"SPA\",\"SPA with AEM 6.5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\",\"name\":\"SPA in AEM 6.5 Part 2 - AEM Blog | Lhotse Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3\",\"datePublished\":\"2020-05-24T13:41:18+00:00\",\"dateModified\":\"2020-06-21T01:43:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage\",\"url\":\"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3\",\"contentUrl\":\"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lhotsetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SPA in AEM 6.5 Part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"name\":\"AEM Blog | Lhotse Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\",\"name\":\"AEM Blog | Lhotse Technologies\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"contentUrl\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"width\":539,\"height\":172,\"caption\":\"AEM Blog | Lhotse Technologies\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/b8eb4eeb9ca844d32b54de183c946afc\",\"name\":\"Shivam Kumar Chauhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2f5546b9c2e40950ed53a7c2b059fdc37faa2a27d1faa038b2701bba8112e1ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2f5546b9c2e40950ed53a7c2b059fdc37faa2a27d1faa038b2701bba8112e1ad?s=96&d=mm&r=g\",\"caption\":\"Shivam Kumar Chauhan\"},\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/author\/shivam\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SPA in AEM 6.5 Part 2 - AEM Blog | Lhotse Technologies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/","og_locale":"en_US","og_type":"article","og_title":"SPA in AEM 6.5 Part 2 - AEM Blog | Lhotse Technologies","og_description":"1. How to create a custom SPA component ? Lets create a component in AEM For creating custom component you [&hellip;]","og_url":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/","og_site_name":"AEM Blog | Lhotse Technologies","article_published_time":"2020-05-24T13:41:18+00:00","article_modified_time":"2020-06-21T01:43:07+00:00","og_image":[{"url":"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3","type":"","width":"","height":""}],"author":"Shivam Kumar Chauhan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shivam Kumar Chauhan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#article","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/"},"author":{"name":"Shivam Kumar Chauhan","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/b8eb4eeb9ca844d32b54de183c946afc"},"headline":"SPA in AEM 6.5 Part 2","datePublished":"2020-05-24T13:41:18+00:00","dateModified":"2020-06-21T01:43:07+00:00","mainEntityOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/"},"wordCount":781,"commentCount":0,"publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3","keywords":["AEM 6.5","React with AEM","Sling Exporter","Sling Model Exporter","SPA","SPA with AEM 6.5"],"articleSection":["AEM 6.5","React With AEM","SPA","SPA with AEM 6.5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/","url":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/","name":"SPA in AEM 6.5 Part 2 - AEM Blog | Lhotse Technologies","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3","datePublished":"2020-05-24T13:41:18+00:00","dateModified":"2020-06-21T01:43:07+00:00","breadcrumb":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#primaryimage","url":"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3","contentUrl":"https:\/\/lh4.googleusercontent.com\/_Cc3ZboTuXXJLfmhVPP2DaQNI_RZsm75096ZcOlq_yPWYev9GtM3LBPce90eYCjn-MFtfCoQYpFMKO4cqUyOwC-XWugJGkbAEkSTEMFRmUrFpsK14TO_YJWG3DSQfh5jyvhW_kT3"},{"@type":"BreadcrumbList","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lhotsetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SPA in AEM 6.5 Part 2"}]},{"@type":"WebSite","@id":"https:\/\/lhotsetechnologies.com\/blog\/#website","url":"https:\/\/lhotsetechnologies.com\/blog\/","name":"AEM Blog | Lhotse Technologies","description":"","publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization","name":"AEM Blog | Lhotse Technologies","url":"https:\/\/lhotsetechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","contentUrl":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","width":539,"height":172,"caption":"AEM Blog | Lhotse Technologies"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/b8eb4eeb9ca844d32b54de183c946afc","name":"Shivam Kumar Chauhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2f5546b9c2e40950ed53a7c2b059fdc37faa2a27d1faa038b2701bba8112e1ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2f5546b9c2e40950ed53a7c2b059fdc37faa2a27d1faa038b2701bba8112e1ad?s=96&d=mm&r=g","caption":"Shivam Kumar Chauhan"},"url":"https:\/\/lhotsetechnologies.com\/blog\/author\/shivam\/"}]}},"_links":{"self":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=433"}],"version-history":[{"count":2,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"predecessor-version":[{"id":435,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/433\/revisions\/435"}],"wp:attachment":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}