Migrating Components Written In HTL (Sightly) to React | Community
Skip to main content
tiredaemdev
Level 2
Apr 13, 2021 1:53 PM UTC

Migrating Components Written In HTL (Sightly) to React

Hey Everyone, 

 

I have a project that has about 20 or so components written in HTL (Sightly) and will need to migrate them to instead be in React. 

 

My question is, can I do this incrementally in AEM? As in, can I convert a few components at a time to React while still keeping others as HTL on the same page, or would a migration like this require me to migrate all components to React in one full sweep?

 

I can't seem to find any information on HTL and React being used in conjunction with one another on the same page, so any guidance on how to do a migration like this or confirmation that an incremental approach is not possible would be appreciated. 

 

Thanks

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

tiredaemdevAuthor
Level 2
Apr 14, 2021 5:07 PM UTC
I was afraid that may be the case. Thanks for your input Raushan.
Translate
    Raushan
    Level 2
    Apr 14, 2021 7:34 AM UTC

    As per my knowledge, there will be no change in the dialog side, you have to write react js code for mapping this component. You can not use both (react and sigtly). You have to migrate all componnet in react.

    Translate
      Pawan-Gupta
      Pawan-Gupta
      Level 8
      Apr 13, 2021 9:21 PM UTC

      this is good to go through - https://aemsimplifiedbynikhil.wordpress.com/2020/08/18/aem-spa-react-project-setup-and-component-integration-walk-through-aem-6-5-5/

      Translate
        tiredaemdevAuthor
        Level 2
        Apr 14, 2021 5:09 PM UTC
        Thanks for the reply, but this isn't exactly what I was looking for. I am specifically looking for content around doing a migration and if there is a way to do the migration iteratively. Sadly it seems the conversion of a site in HTL to React will need to be done all at once rather than having some kind of interop between HTL and React.
        Translate
          Terms & ConditionsAccessibility statement

          Loading footer...