Expand my Community achievements bar.

SOLVED

AEM integration with React without SPA

Avatar

Level 2

I wanted to integrate AEM With React on a non SPA implementation i.e. without SPA editor. Can anyone point to any working documentation

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@tkantk 

You can write vanilla React. Set the root path from component/template HTML, hit the path from React and render.

<div id="root" data-root-path="/content/...."></div>

Vanilla React sample

import React from "react";

export default class Test extends React.Component {
    
    state = {
        loading: true
    };
    data = {
        text: null
    };

    async componentDidMount() {
        const url = document.getElementById("root").getAttribute("data-root-path")+".model.json";
        const response = await fetch(url);
        const data = await response.json();
        this.data = data;
        this.setState({loading: false});
    };
    render() {
        return (
            //retuen markup if state.loading is false
        );
    }   
}

This example is if path is generating from back end. If your path is static, you don't need path in html and skip first line in componentDidMount and fetch url directly.

Hope this helps.

View solution in original post

5 Replies

Avatar

Community Advisor

Hi Tkantk,

 

The best one I have come so far to achieve your requirement, stunning work by Jenna Salau:

https://github.com/DeloitteDigitalAPAC/react-habitat

 

Regards,

Peter

Avatar

Level 2

Hi Peter,

 

Is there any other plugin available apart from react-habitat, as this doesnt support functional react components

 

Regards

Ramesh

Avatar

Correct answer by
Community Advisor

@tkantk 

You can write vanilla React. Set the root path from component/template HTML, hit the path from React and render.

<div id="root" data-root-path="/content/...."></div>

Vanilla React sample

import React from "react";

export default class Test extends React.Component {
    
    state = {
        loading: true
    };
    data = {
        text: null
    };

    async componentDidMount() {
        const url = document.getElementById("root").getAttribute("data-root-path")+".model.json";
        const response = await fetch(url);
        const data = await response.json();
        this.data = data;
        this.setState({loading: false});
    };
    render() {
        return (
            //retuen markup if state.loading is false
        );
    }   
}

This example is if path is generating from back end. If your path is static, you don't need path in html and skip first line in componentDidMount and fetch url directly.

Hope this helps.