AEM SPA editor - FAQ

Answering the most commonly asked questions about the SPA editor

Today I am going to answer some FAQ that I get a lot from customers, that are not addressed in the latest post / archetype updates. Disclaimer: As the solution gets updated frequently, these answers might become outdated.

Are Content Fragments supported?

As of today just recently, for react yes, for angular not yet. (PR is pending) Check the PR for react here and for Angular here to see how it's used. Note: this is for the spa editor only because it depends on the component-mapping.

Are Experience Fragments supported?

As of today just recently, yes. They require you to overload a resource type from the spa-core project, and to provide 3 HTL files. No more Java hacking required. This is baked into the latest AEM archetype release now, so you don't need to worry about it if you use this as a base. Otherwise, you can generate a project and see how it's done there with minimal code.

I hate Java! How do I avoid having to develop or even see Java Code?

It is my personal opinion (not Adobe's) that you should accept that on your job, you don't always get to work with the stuff you love. A good balance in my life is: 90% of what you do you can love but there always will be 10% of stuff that you hate (long boring meetings anyone?). This is life, it's not always a party. AEM is a big CMS with lots of features that firms come to rely upon, and you can't just say "I don't want to see Java" if you want cool customers.

Rant off.

Answer to the question: I will write a separate blog post on this on how to avoid Java as much as possible as it deserves a post by itself.

Are non SPA components supported?

Officially no. My answer is: Yes and no. This core components example demonstrates how you can support static (html / css only) non SPA components. Prerequisite is that you can specify a sling:resourceSuperType on that component. 

The way it's done is that an internal request is created to the component itself with a HTML selector. That HTML is then exported in JSON, and the HTML is injected onto the DOM element in React / Angular. Not the prettiest but works.

Again this will work for static stuff, but if you have javascript like jQuery or even vanilla JS tinkering with it, this likely won't work, although it might. 

What are the React / Angular core components?

The React and Angular core components are a subset of the aemcomponents.dev. It just provides the view layer only. Once components get released there with a proper model.json export, anybody can create a PR on the React / Angular repository so that will render in these respectively. 

3 Repositories are provided per framework:

• Base (components that work without spa editor, can be used as web-components)
• Spa (container components that do not work without spa editor)
• Examples (example AEM project to demonstrate the components in AEM)

How do I get shortered URL's to work ? Url's without /content ?

Currently it's not provided OOTB, please see this thread. 

Is Server Side Rendering possible? How do I use IO runtime?

Yes, Server Side Rendering is supported. For react you can use express and IO runtime. For Angular you can use express. IO runtime is possible but requires the usage of very dirty hacks. Unless you have a better solution, which in that case, please let me know, or better yet, provide a PR to the archetype!.

Again the archetype provides these OOTB. Use the archetype 28 + with option "enableSSR" on "y" and this will be there. You can also check my other post / videos on how to use this.

Can I use Adobe Analytics?

Yes, this is no problem. Use the datalayer for this. Note, this isn't implemented OOTB with the React / Angular core components as of yet, but I see no problem why this is not possible. A PR is welcome!

How do I implement 500 / 404 pages properly?

Currently it requires lots of hacking with Sling Filters if you want an editable 500/404 page. We have a PR going to have this supported OOTB with ACS AEM Commons. Once this is released, it will become very easy.

Hope this answers most common questions. Good luck!