Using SPA editor without SPA Routing | Community
Skip to main content
A
ayushn
Level 2
September 8, 2023

Using SPA editor without SPA Routing

  • September 8, 2023
  • 4 replies
  • 2077 views

We have a requirement where client has a React component library developed outside of AEM and they want to use it to create their new website in AEM. They don't want SPA features such as spa routing. We are thinking of using the React SPA project with Server Side Rendering using a express server. We will not use react routing as SPA is not a requirement for the client.  With this approach we can use all the react code already developed. 

 

Will this be a good approach? What issues can we face? Any suggestion will be helpful!

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

4 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
September 8, 2023

Hi, 

 

I think you could potentially explore the "integrated SPA" option from this article: https://www.albinsblog.com/2021/11/single-page-applicationspa-design-patterns-in-aem.html. Here you have several design patterns and options available when working with SPA.

Esteban Bustamante
    A
    ayushnAuthor
    Level 2
    September 9, 2023

    Thanks for the response.

    For us SPA is not a requirement. We want to use full react code and also use the WYSIWYG editor for content authoring.

     

     

      Shashi_Mulugu
      Community Advisor
      Shashi_MuluguCommunity Advisor
      Community Advisor
      September 9, 2023

      @ayushn adobe released new feature AEM remote Spa with next js last year.. it is just awesome.. here you will use either react ssr or react csr with next js app and use aem editor functionalities as-is for content management.

       

       

      https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/remote-spa/overview.html?lang=en

        A
        ayushnAuthor
        Level 2
        September 9, 2023

        Thanks for the response!

        We don't want to use remote Spa. We want WYSIWYG editing capability for authors.

         

          Shashi_Mulugu
          Community Advisor
          Shashi_MuluguCommunity Advisor
          Community Advisor
          September 12, 2023

          I understand your concerns and it's not mean to use spa as by name, it's a feature using which we can enable WYSIWYG editor, even I did multiple websites where site is normal multi page site but hosted using Remote SpA approach, if you are on AEM cloud or AMS and if client have adobe connections, explore options of AEM Universal Editor as well.

            A
            Community Advisor
            AlbinIs1Community Advisor
            Community Advisor
            September 11, 2023

            Maybe you can explore this option.

            • Create a placeholder component in AEM with required dialogs - this component will only have a DIV, and the dialog data is added to the DIV as an attributes.
            • Create a wrapper component in AEM that uses the external component and renders through the data stored in the div attributes.

            This will allow you to use the standard editable template and multipage websites, but the components are selected through the React component; you can even combine the non-React Component(HTL) with the React Component.

            Regards

            Albin

            https://www.albinsblog.com

            Albin Issac – Medium

             

              B
              beast42
              Level 3
              September 14, 2023

              Do you have any working sample of this approach? 

              How would SPA routing will take place here?

                kautuk_sahni
                Community Manager
                kautuk_sahniCommunity Manager
                Community Manager
                September 12, 2023

                @ayushn Do you find the suggestions from users useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. 

                Kautuk Sahni
                Terms & ConditionsAccessibility statement

                Loading footer...