{"id":425,"date":"2020-05-10T11:09:58","date_gmt":"2020-05-10T11:09:58","guid":{"rendered":"http:\/\/lhotsetechnologies.com\/blog\/?p=425"},"modified":"2020-06-18T06:12:43","modified_gmt":"2020-06-18T06:12:43","slug":"spa-in-aem-6-5-part-1","status":"publish","type":"post","link":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/","title":{"rendered":"SPA in AEM 6.5 Part 1"},"content":{"rendered":"\n<p><strong>What is SPA?<\/strong><\/p>\n\n\n\n<p>SPA stands for single page application. It is a new feature in AEM 6.5 which helps us to build single page applications using react or angular with AEM.<br><\/p>\n\n\n\n<p><strong>How SPA works in AEM?<\/strong><\/p>\n\n\n\n<p>Let\u2019s understand the flow using this diagram &#8212;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2\" alt=\"\"\/><\/figure>\n\n\n\n<p>We have an AEM Component in which we can have nodes but no script (.html, etc.) in it .i.e. component html file.<br><\/p>\n\n\n\n<p>And Corresponding to that we will make a spa component using react or angular. We will use&nbsp;<\/p>\n\n\n\n<p>MapTo function to make a relationship between React\/Angular and AEM components.<br><\/p>\n\n\n\n<p>Here is the mapping signature &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>export defaul<\/strong><strong>t <\/strong><strong>MapTo(\u2018&lt;path of your aem component&gt;&#8217;)(&lt;SPA component Name&gt;,&lt;SPA component config&gt;<\/strong><strong>)<\/strong><br><\/p>\n\n\n\n<p>Here is the example :&nbsp;<\/p>\n\n\n\n<p>&nbsp;<strong>export default<\/strong><strong> MapTo(&#8216;testspa\/components\/content\/my-app&#8217;)(My-App, editConfig);<\/strong><br><\/p>\n\n\n\n<p>We make a sling model of AEM Component in which is basically a sling exporter. AEM component runs server side and exposes content in form of json model api i.e. when we apply .model.json in component content path, it will give us json data.<br><\/p>\n\n\n\n<p>And the Json content is then consumed by the SPA component which runs client side.<\/p>\n\n\n\n<p>There is also a sync between two components i.e. when you author an AEM component then it will automatically be updated in the react server.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Which archetype to use?<\/strong><br><\/p>\n\n\n\n<p>Use this archetype because it will contain a specific module for ex.<\/p>\n\n\n\n<p>If you choose to react then it will create a specific AEM + React project for you.<br><\/p>\n\n\n\n<p>mvn archetype:generate \\<\/p>\n\n\n\n<p>&nbsp;&nbsp;-DarchetypeCatalog=remote \\<\/p>\n\n\n\n<p>&nbsp;&nbsp;-DarchetypeGroupId=com.adobe.cq.spa.archetypes \\<\/p>\n\n\n\n<p>&nbsp;&nbsp;-DarchetypeArtifactId=aem-spa-project-archetype \\<\/p>\n\n\n\n<p>&nbsp;&nbsp;-DarchetypeVersion=4.0.0<br><\/p>\n\n\n\n<p>But you can also use other archetypes to make an AEM 6.5 project also. But this is recommended for using SPA with AEM.<br><\/p>\n\n\n\n<p><strong>How to create a SPA project?<\/strong><br><\/p>\n\n\n\n<p>Using the above archetype to make an AEM project .<br><\/p>\n\n\n\n<p>Lets see how to create a project using AEM + React. But before using this archetype some requirements are to be fulfilled.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Java 8 or higher<\/li><li>Maven 3.5 or higher<\/li><li>AEM 6.4.7+ or 6.5.3+<\/li><\/ol>\n\n\n\n<p>After running above command it will ask you some detail same as of aem project<br><\/p>\n\n\n\n<p>groupId<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/xKj_aPvWhvwcoNtIJa0o8wRfv9_DWGiNhHzINXUUhyyPiNyxBYYZ7XfwINdgK1UoDuoRvmVUYC6_Z7KYk6GhhfdmsSATpA2Fof8wAp28V7Mi52ypBQdsbDPwR6OjSrb6Y-et7RAR\" alt=\"\"\/><\/figure>\n\n\n\n<p>optionFrontend<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jf56WvAbpWbHqRoPFQBaksm1bN16VMZWcZfOKPVeHK_vIlqT4Rk9Ee85hgy4GrZkm5vxl6At3XnHvGCNws4nNO5-PFstM98ZN3fMdo451nCRYSfIXLMPuvgQavWm8cUWptdfKUnQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>projectName<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/mkekexsAb_pKyiEac6I62muthwufQdd8Ke1nI4FuRTOF9_kqUn7K1Ap63xr-rcdARQWGoNILDCq_pRUiMd5HF_4nWFwqpJcteRpeP1mWZDxMvK5dAqmL8JgkZKMZyM-oMOFtixaO\" alt=\"\"\/><\/figure>\n\n\n\n<p>artifactId<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/mdRfaPj9qb4VIz-osfKyRxWtsJ4pOcwijf_YEvdxLR6qn6umSyK_2jutqi1LrkfoN7mC_1IHEtz321R4zqw7NcEM6Yk_lz02MgAmiSJdLZB6fyVdt4gltJrBhSh16nvzQ2Z5EsOb\" alt=\"\"\/><\/figure>\n\n\n\n<p>package<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/AwuHIb52juZzQ_LM62aGZkw2dvNKmZpBb0UzXfnj2F7dbG1uz7FZOiYjKVBPwm2Wk4q9r9SNfq3MUVjfIOZ81U69nhxOQ8Gk781VDYnDji6DXMsEG5-p83IvK0Nbl9YvlmFiuRAN\" alt=\"\"\/><\/figure>\n\n\n\n<p>If you want to use the default value as shown then press enter, otherwise use any name,<\/p>\n\n\n\n<p>But we do not use \u2018-\u2019 in package name so I am using <strong>com.testspa <\/strong>as package name.<br><\/p>\n\n\n\n<p>projectTitle \u2192 You can use space in Project Title.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/uD2HEcgxz47kFC6ZoKmceXWLD5s6mFJU6fe85u93FlL9hQDGafVkGgLyargtJUZ3qbhQydZI6AYwjcpk02BAe3GkipH8KvJivRVDhsb9AD_fCni0p3wXocWYYrFQlI9URMWzHONk\" alt=\"\"\/><\/figure>\n\n\n\n<p>componentGroup<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/1uV7tO6ZCKrpCA22_NisrPrsJb45KfnU716qwwpRLrEmaXF4Hy93GLon2qG0_nKJ2IqSBKlVzpVAoutitJqHZEGtf61KUPO4iKRQY6RvZgUvKg7eG7kdbA-xx7gIpA92VOVlGmVh\" alt=\"\"\/><\/figure>\n\n\n\n<p>After that choose Y if all the values you have entered are correct.<br><\/p>\n\n\n\n<p>If the <strong>BUILD SUCCESS<\/strong> message is written on the terminal then your project is created.<br><\/p>\n\n\n\n<p>Project Folder<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/wWrFlX0Wy5VM2G04vh-08KKzdUPYp_wvPvDOInVxUf8UVR-OJ0XIY4dBPfqk5W2EM-3_ixN9mIFjg1Nq1i4nqM5GV7SuwRkoZaz33Bs7UIgJS1NKKAmNlQgMXKl-QyWTS788Ipty\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/TGV9ZnZBFHam7za4kD60iCKeDN0oUntIFa6h-5Atx7T4hr_1onGLwuLujCsivhL7phM_T9atR1c4DszbmCaBTZnomqpqrdScuIb-g7qUA-WViplPQzTPumnwps5DfJckfomlyqvW\" alt=\"\"\/><\/figure>\n\n\n\n<p>Here you will get a react-app module to make your frontend components using react.<\/p>\n\n\n\n<p>After opening your project in the code editor run command inside the testspa folder.<\/p>\n\n\n\n<p><strong>NOTE -&gt; (Make sure that your AEM 6.5 instance is up)<\/strong><br><\/p>\n\n\n\n<p><strong>mvn clean install -PautoInstallPackage -Padobe-public<\/strong><\/p>\n\n\n\n<p>(It will download package and build both AEM and react module)<\/p>\n\n\n\n<p><strong>@Reference<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/adobe\/aem-spa-project-archetype\">https:\/\/github.com\/adobe\/aem-spa-project-archetype<\/a><\/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><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is SPA? SPA stands for single page application. It is a new feature in AEM 6.5 which helps us [&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,281,279],"tags":[273,276,275,277,274],"class_list":["post-425","post","type-post","status-publish","format-standard","hentry","category-aem-6-5","category-react-with-aem","category-sling-model-exporter","category-spa","tag-aem-6-5","tag-react-with-aem","tag-sling-exporter","tag-sling-model-exporter","tag-spa"],"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 1 - 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-1\/\" \/>\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 1 - AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"og:description\" content=\"What is SPA? SPA stands for single page application. It is a new feature in AEM 6.5 which helps us [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-10T11:09:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T06:12:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2\" \/>\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=\"3 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-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/\"},\"author\":{\"name\":\"Shivam Kumar Chauhan\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/b8eb4eeb9ca844d32b54de183c946afc\"},\"headline\":\"SPA in AEM 6.5 Part 1\",\"datePublished\":\"2020-05-10T11:09:58+00:00\",\"dateModified\":\"2020-06-18T06:12:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/\"},\"wordCount\":519,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2\",\"keywords\":[\"AEM 6.5\",\"React with AEM\",\"Sling Exporter\",\"Sling Model Exporter\",\"SPA\"],\"articleSection\":[\"AEM 6.5\",\"React With AEM\",\"Sling Model Exporter\",\"SPA\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/\",\"name\":\"SPA in AEM 6.5 Part 1 - AEM Blog | Lhotse Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2\",\"datePublished\":\"2020-05-10T11:09:58+00:00\",\"dateModified\":\"2020-06-18T06:12:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage\",\"url\":\"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2\",\"contentUrl\":\"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lhotsetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SPA in AEM 6.5 Part 1\"}]},{\"@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 1 - 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-1\/","og_locale":"en_US","og_type":"article","og_title":"SPA in AEM 6.5 Part 1 - AEM Blog | Lhotse Technologies","og_description":"What is SPA? SPA stands for single page application. It is a new feature in AEM 6.5 which helps us [&hellip;]","og_url":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/","og_site_name":"AEM Blog | Lhotse Technologies","article_published_time":"2020-05-10T11:09:58+00:00","article_modified_time":"2020-06-18T06:12:43+00:00","og_image":[{"url":"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2","type":"","width":"","height":""}],"author":"Shivam Kumar Chauhan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Shivam Kumar Chauhan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#article","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/"},"author":{"name":"Shivam Kumar Chauhan","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/b8eb4eeb9ca844d32b54de183c946afc"},"headline":"SPA in AEM 6.5 Part 1","datePublished":"2020-05-10T11:09:58+00:00","dateModified":"2020-06-18T06:12:43+00:00","mainEntityOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/"},"wordCount":519,"commentCount":0,"publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2","keywords":["AEM 6.5","React with AEM","Sling Exporter","Sling Model Exporter","SPA"],"articleSection":["AEM 6.5","React With AEM","Sling Model Exporter","SPA"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/","url":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/","name":"SPA in AEM 6.5 Part 1 - AEM Blog | Lhotse Technologies","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2","datePublished":"2020-05-10T11:09:58+00:00","dateModified":"2020-06-18T06:12:43+00:00","breadcrumb":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#primaryimage","url":"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2","contentUrl":"https:\/\/lh5.googleusercontent.com\/SdlURmUWZkMcG3gyNnpIeHbBn0YJVHrLFVopoL6rFmLWshKC6wGxywJiuW5uian9ZpUMLnvUULMcdagx5sXoOpLoPn4u31tCcYhxnNIRatZ7RnElX_jrv2o1XCBovvGA2XMoiou2"},{"@type":"BreadcrumbList","@id":"https:\/\/lhotsetechnologies.com\/blog\/spa-in-aem-6-5-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lhotsetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SPA in AEM 6.5 Part 1"}]},{"@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\/425","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=425"}],"version-history":[{"count":7,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":550,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/425\/revisions\/550"}],"wp:attachment":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}