Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

[Tutorial] Getting Started with the AEM SPA Editor

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,164 likes

Total Posts

6,273 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

21-10-2018

SPAEDITOR1.png

Get started with the AEM SPA Editor to create apps that can be authored like a regular site; these are the best resources.

The new WKND Tutorial explains step by step how to build such an app: Getting Started with the AEM SPA Editor - WKND Tutorial

A multi-part tutorial on how to develop for the AEM SPA Editor. Walks through the implementation of a Single Page Application, written using React JS, that can be edited within Adobe Experience Manager. Covers foundation topics like project setup, component mapping, front end development tools, and application routing.

Happy Learning!

Replies

Avatar

Avatar
Validate 1
Level 2
ogüna
Level 2

Likes

6 likes

Total Posts

12 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
ogüna
Level 2

Likes

6 likes

Total Posts

12 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
ogüna
Level 2

25-10-2018

Hello, thanks for the tutorial. It's very good. But I have a problem that it's not working . The AEM version that I'm using is 6.4, I think I should be using 6.4.2, is that correct? If it is, what can I do with 6.4 version, just write components with React?

Best regards,

Ogün Adsay.

Avatar

Avatar
Level 1
jtran15
Level 1

Likes

0 likes

Total Posts

7 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
jtran15
Level 1

Likes

0 likes

Total Posts

7 posts

Correct Reply

0 solutions
View profile
jtran15
Level 1

25-10-2018

Hi,

I follow instructions on Getting Started with the AEM SPA Editor - Chapter 1.

When I Navigate to http://localhost:4502/content/wknd-events/react/home.html  on step 9,

the page is blank and there's error in browser console SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.

I got the same error when I download source code from githup for

I'm using AEM 6.4.

Would you please help?

Thanks

Joan

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

26-10-2018

Yes without the ServicePack, the components won't be able to be edited in AEM.  Service Pack 2 is freely available to download and install: https://www.adobeaemcloud.com/content/marketplace/marketplaceProxy.html?packagePath=/content/compani...

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

26-10-2018

Hi jtran15 , do you have AEM 6.4 and ServicePack 2 installed?

What happens when you navigate to http://localhost:4502/content/wknd-events/react.model.json ? Does the JSON render as expected?

Avatar

Avatar
Level 1
jtran15
Level 1

Likes

0 likes

Total Posts

7 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
jtran15
Level 1

Likes

0 likes

Total Posts

7 posts

Correct Reply

0 solutions
View profile
jtran15
Level 1

26-10-2018

Hi,

Thank you for responding .

Yes, I have AEM6.4 and Service Pack 2 installed. http://localhost:4502/system/console/status-productinfo  shows Adobe Experience Manager (6.4.2.0).

http://localhost:4502/content/wknd-events/react.model.json returns correct json.

{

  • "title": "React App",
  • ":type": "wknd-events/components/structure/app",
  • ":items": { },
  • ":itemsOrder": [ ],
  • ":path": "/content/wknd-events/react",
  • ":hierarchyType": "page",
  • ":children": {
    • "/content/wknd-events/react/home": {
      • "title": "Home",
      • ":type": "wknd-events/components/structure/page",
      • ":items": {
        • "root": {
          • "columnCount": 12,
          • "columnClassNames": {
            • "responsivegrid": "aem-GridColumn aem-GridColumn--default--12"
            },
          • "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
          • ":items": {
            • "responsivegrid": {
              • "columnCount": 12,
              • "columnClassNames": {
                • "image": "aem-GridColumn aem-GridColumn--default--12",
                • "text": "aem-GridColumn aem-GridColumn--default--12"
                },
              • "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
              • ":items": {
                • "text": {
                  • "richText": true,
                  • ":type": "wknd-events/components/content/text"
                  },
                • "image": {
                  • "widths": [ ],
                  • "lazyEnabled": true,
                  • ":type": "wknd-events/components/content/image"
                  }
                },
              • ":itemsOrder": [
                • "text",
                • "image"
                ],
              • ":type": "wcm/foundation/components/responsivegrid"
              }
            },
          • ":itemsOrder": [
            • "responsivegrid"
            ],
          • ":type": "wcm/foundation/components/responsivegrid"
          }
        },
      • ":itemsOrder": [
        • "root"
        ],
      • ":path": "/content/wknd-events/react/home",
      • ":hierarchyType": "page"
      }
    }

}

Avatar

Avatar
Validate 10
Level 2
samr99530769
Level 2

Likes

8 likes

Total Posts

46 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
samr99530769
Level 2

Likes

8 likes

Total Posts

46 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
samr99530769
Level 2

02-11-2018

Hi  Team,

I tried to follow the same steps that you have mentioned but am getting an like below

I have installed the service pack also

Installed Products

Adobe Experience Manager (6.4.2.0)

error.PNG

Avatar

Avatar
Level 1
jtran15
Level 1

Likes

0 likes

Total Posts

7 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
jtran15
Level 1

Likes

0 likes

Total Posts

7 posts

Correct Reply

0 solutions
View profile
jtran15
Level 1

27-11-2018

Hi,

In Getting Started with the AEM SPA Editor - Chapter 2 - Header Component, can we have the header authorable in AEM so that the author manager can change the text without code change?

Thanks

Joan

Avatar

Avatar
Give Back
Level 1
ajinkyad7855069
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Give Back
View profile

Avatar
Give Back
Level 1
ajinkyad7855069
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
Top badges earned
Give Back
View profile
ajinkyad7855069
Level 1

29-12-2019

Hi All

I am working on AEM React Integration project. 

I have a requirement where I need to use existing Header and footer component which are the traditional HTL component. All other components would be from react.

However, the content of HTL components is not rendering on the page in the SPA editor project.  Any suggestions?