SPA in AEM 6.5 Part 2

1. How to create a custom SPA component ?

Lets create a component in AEM

For creating custom component you need to remember these things i.e.

There is a mapping of components between aem module and react module.
We should use Sling exporter to export our component json and so that it can be accessed by the react component.
Getter of properties is must in sling exporter.
Property name should be the same in the react component and in sling exporter.
Do not make a <componentname>.html file in aem component as it is not needed.

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.

Here is my component node and my dialog node which contains only one textfield.

Note: No HTML file.

Create a Sling Exporter for your AEM component.

import com.adobe.cq.export.json.ComponentExporter;

import com.adobe.cq.export.json.ExporterConstants;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.models.annotations.DefaultInjectionStrategy;

import org.apache.sling.models.annotations.Exporter;

import org.apache.sling.models.annotations.Model;

import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

import javax.annotation.Nonnull;

@Model(adaptables = SlingHttpServletRequest.class,

resourceType = com.testspa.core.models.MyAppModel.RESOURCE_TYPE,

adapters = {com.testspa.core.models.MyAppModel.class, ComponentExporter.class},

defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)

public class MyAppModel implements ComponentExporter {

protected static final String RESOURCE_TYPE =

“testspa/components/content/my-app”;

@ValueMapValue(name = “title”)

private String title;

public String getTitle() {

return title;

}

@Nonnull

@Override

public String getExportedType() {

return RESOURCE_TYPE;

}

2. Why to create a Sling Model as a Sling Exporter?

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.

3. How will your Sling Model get resolved for a component because HTML file is not present in the component?

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-

protected static final String RESOURCE_TYPE =”testspa/components/content/my-app”;

Based on this line, the Sling Model got resolved.

4. Do we keep in mind some rules for creating a Sling Exporter?

Yes,

Please create getter for all fields for which you want to expose in JSON.

Please check the mapping of your AEM component in your Sling Model.

So now lets create a SPA Component in react app inside the component in the src folder.

Here I am using react to make components.

5. My-App

This is my component folder in React . It includes an index.js file as shown below.

import React, {Component} from ‘react’

import {MapTo} from ‘@adobe/cq-react-editable-components’;

const editConfig = {

emptyLabel: ‘Title Component’,

isEmpty: function(props) {

return !props || !props.title || props.title.trim().length < 1;

}

};

class My-App extends Component {

render() {

return (

<React.Fragment>

{this.props.title}

</React.Fragment>

);

}

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.

6.import-components.js

You need to include the React component path inside import-components.js. Otherwise, you will not be able to show your component into the page.

import ‘./My-App’;

Now, deploy your code using Maven commands.

mvn clean install -PautoInstallPackage -Padobe-public