React SPA Non-Editable Container

Hi,

When I try to make a footer component to have a container that is editable in the experience manager it doesn’t show up as editable in the experience manager.

I am trying to setup a custom react-ssr app. Currently I am trying with OOTB react-ssr example provided by bloomreach.

When I try to connect to the BRXM Docker provided in the react-ssr example the footer container is editable.

But if I try with a new Bloomreach instance with exact same page configuration the footer is not editable.

I am attaching the resourceapi response of the BRXM docker as well as our custom implementation.

Any help is most appreciated.

BRXM Docker resource api response:
{"id":"r4","_meta":{"version":"0.9","branch":"master"},"_links":{"self":{"href":"http://localhost:8080/site/resourceapi","type":"external"},"site":{"href":"http://localhost:8080/site/","type":"internal"}},"channel":{"info":{"props":{"org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url":"http://localhost:3000"}}},"page":{"id":"r4","name":"homepage","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r4_r1","name":"main","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r4_r1_r1","name":"container","componentClass":"org.hippoecm.hst.builtin.components.StandardContainerComponent","type":"CONTAINER_COMPONENT","label":"Home Page Main","xtype":"hst.vbox","_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r1_r1"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r1_r1","type":"external"}}}],"_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r1"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r1","type":"external"}}},{"id":"r4_r2","name":"menu","componentClass":"org.onehippo.cms7.essentials.components.EssentialsMenuComponent","type":"COMPONENT","models":{"menu":{"name":"main","siteMenuItems":[{"depth":0,"repositoryBased":false,"properties":{"hst:referencesitemapitem":"root"},"name":"home","childMenuItems":[],"parameters":{},"_links":{"site":{"href":"/site/","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:referencesitemapitem":"news"},"name":"news","childMenuItems":[],"parameters":{},"_links":{"site":{"href":"/site/news","type":"internal"}}}],"_meta":{}}},"_meta":{"paramsInfo":{"siteMenu":"main"},"params":{"selectedMenu":"on","level":"1","menu":"main"}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r2"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r2","type":"external"}}},{"id":"r4_r3","name":"top","componentClass":"org.hippoecm.hst.builtin.components.StandardContainerComponent","type":"CONTAINER_COMPONENT","label":"Top","xtype":"hst.vbox","_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r3"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r3","type":"external"}}},{"id":"r4_r4","name":"footer","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r4_r4_r1","name":"container","componentClass":"org.hippoecm.hst.builtin.components.StandardContainerComponent","type":"CONTAINER_COMPONENT","label":"Footer","xtype":"hst.vbox","_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r4_r1"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r4_r1","type":"external"}}}],"_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r4"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4_r4","type":"external"}}}],"_meta":{"definitionId":"hst:pages/homepage","pageTitle":"Home Page","params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4"},"self":{"href":"http://localhost:8081/site/resourceapi?_hn:type=component-rendering&_hn:ref=r4","type":"external"}}}}

Our custom BRXM resourceapi response:
{"id":"r21","_meta":{"visitor":{"id":"6756822e-99f8-4580-99e0-17f1388b3654","header":"_visitor","new":false},"visit":{"id":"627a740b-bfc2-4237-b943-40384405b87a","new":true},"version":"0.9","branch":"master"},"_links":{"self":{"href":"http://localhost:8080/site/resourceapi","type":"external"},"site":{"href":"http://localhost:8080/site/","type":"internal"}},"channel":{"info":{"props":{"org.hippoecm.hst.configuration.channel.PreviewURLChannelInfo_url":"http://localhost:3000"}}},"page":{"id":"r21","name":"homepage","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r21_r1","name":"main","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r21_r1_r1","name":"container","componentClass":"org.hippoecm.hst.builtin.components.StandardContainerComponent","type":"CONTAINER_COMPONENT","label":"Home Page Main","components":[{"id":"r21_r1_r1_r1","name":"menu","componentClass":"org.onehippo.cms7.essentials.components.EssentialsMenuComponent","type":"CONTAINER_ITEM_COMPONENT","label":"Menu","models":{"menu":{"name":"main","siteMenuItems":[{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:repobased":false,"hst:referencesitemapitem":"pdp","hst:parametervalues":["computers"]},"name":"Computers","childMenuItems":[],"parameters":{"categoryKey":"computers"},"_links":{"site":{"href":"/site/pdp","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:parametervalues":["accessories"],"hst:repobased":false},"name":"Accessoires","childMenuItems":[],"parameters":{"categoryKey":"accessories"},"_links":{}},{"depth":0,"repositoryBased":false,"properties":{"hst:referencesitemapitem":"blog","hst:repobased":false},"name":"Blog","childMenuItems":[],"parameters":{},"_links":{"site":{"href":"/site/blog","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:repobased":false,"hst:referencesitemapitem":"product-detail","hst:parametervalues":[""]},"name":"Product Detail","childMenuItems":[],"parameters":{"categoryKey":""},"_links":{"site":{"href":"/site/product-detail","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:externallink":"https://shop.buyitdirect.com/klantenservice","hst:repobased":false},"name":"Klantenservice","childMenuItems":[],"parameters":{},"_links":{"site":{"href":"https://shop.buyitdirect.com/klantenservice","type":"external"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:repobased":false,"hst:referencesitemapitem":"product-detail-alt","hst:parametervalues":[""]},"name":"Home Page","childMenuItems":[],"parameters":{"categoryKey":""},"_links":{"site":{"href":"/site/product-detail-alt","type":"internal"}}}],"_meta":{}}},"_meta":{"paramsInfo":{"siteMenu":"main"},"params":{"com.onehippo.cms7.targeting.TargetingParameterUtil.hide":"off","menu":"main","org.hippoecm.hst.core.component.template":"webfile:/freemarker/hstdefault/essentials-menu/navbar.ftl"}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r1"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r1","type":"external"}}},{"id":"r21_r1_r1_r2","name":"banner","componentClass":"org.onehippo.cms7.essentials.components.EssentialsBannerComponent","type":"CONTAINER_ITEM_COMPONENT","label":"Banner","models":{"document":{"$ref":"/content/u8aaa3c828e784596a70454d42b2ff575"}},"_meta":{"paramsInfo":{"document":"common/banner"},"params":{"com.onehippo.cms7.targeting.TargetingParameterUtil.hide":"off","document":"common/banner"}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r2"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r2","type":"external"}}},{"id":"r21_r1_r1_r3","name":"carousel","componentClass":"org.onehippo.cms7.essentials.components.EssentialsCarouselComponent","type":"CONTAINER_ITEM_COMPONENT","label":"Carousel","models":{"pageable":{"pageSize":10,"visiblePages":10,"total":2,"showPagination":true,"items":[{"$ref":"/content/u8aaa3c828e784596a70454d42b2ff575"},{"$ref":"/content/u3f738dd726f54e04aa9d257af7a0e61d"}],"previousPage":null,"nextPage":null,"previous":false,"next":false,"previousBatch":false,"nextBatch":false,"pageNumbersArray":[1],"endPage":1,"startPage":1,"totalPages":1,"currentRange":[1],"currentPage":1,"maxSize":11,"startOffset":0,"endOffset":2}},"_meta":{"paramsInfo":{"carouselItem1":"common/banner","carouselItem2":"banner2","carouselItem3":"simpledoc","carouselItem4":"","carouselItem5":"","carouselItem6":"","carouselWidth":700,"carouselHeight":250,"carouselBackgroundColor":"#FFFFFF","showNavigation":true,"pause":true,"interval":3000,"cycle":true},"params":{"document4":"","document3":"simpledoc","document6":"","document5":"","document2":"banner2","document1":"common/banner","cycle":"on","pause":"on","carouselWidth":"700","carouselHeight":"250","com.onehippo.cms7.targeting.TargetingParameterUtil.hide":"off","carouselBackgroundColor":"#FFFFFF","showNavigation":"on","interval":"3000"}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r3"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r3","type":"external"}}},{"id":"r21_r1_r1_r4","name":"simplecontent","componentClass":"org.onehippo.cms7.essentials.components.EssentialsDocumentComponent","type":"CONTAINER_ITEM_COMPONENT","label":"Simple Content","models":{"document":{"$ref":"/content/u3f738dd726f54e04aa9d257af7a0e61d"}},"_meta":{"paramsInfo":{"document":"simpledoc"},"params":{"com.onehippo.cms7.targeting.TargetingParameterUtil.hide":"off","document":"simpledoc","org.hippoecm.hst.core.component.template":"webfile:/freemarker/hstdefault/contentpage-main.ftl"}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r4"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1_r4","type":"external"}}}],"xtype":"hst.vbox","_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1_r1","type":"external"}}}],"_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r1","type":"external"}}},{"id":"r21_r2","name":"header","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r21_r2_r1","name":"container","componentClass":"org.hippoecm.hst.builtin.components.StandardContainerComponent","type":"CONTAINER_COMPONENT","label":"Base Header","xtype":"hst.vbox","_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r2_r1"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r2_r1","type":"external"}}}],"_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r2"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r2","type":"external"}}},{"id":"r21_r3","name":"footer","componentClass":"org.hippoecm.hst.core.component.GenericHstComponent","type":"COMPONENT","components":[{"id":"r21_r3_r1","name":"container","componentClass":"org.hippoecm.hst.builtin.components.StandardContainerComponent","type":"CONTAINER_COMPONENT","label":"Base Footer","xtype":"hst.vbox","_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r3_r1"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r3_r1","type":"external"}}}],"_meta":{"params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r3"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r3","type":"external"}}},{"id":"r21_r4","name":"menu","componentClass":"org.onehippo.cms7.essentials.components.EssentialsMenuComponent","type":"COMPONENT","models":{"menu":{"name":"main","siteMenuItems":[{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:repobased":false,"hst:referencesitemapitem":"pdp","hst:parametervalues":["computers"]},"name":"Computers","childMenuItems":[],"parameters":{"categoryKey":"computers"},"_links":{"site":{"href":"/site/pdp","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:parametervalues":["accessories"],"hst:repobased":false},"name":"Accessoires","childMenuItems":[],"parameters":{"categoryKey":"accessories"},"_links":{}},{"depth":0,"repositoryBased":false,"properties":{"hst:referencesitemapitem":"blog","hst:repobased":false},"name":"Blog","childMenuItems":[],"parameters":{},"_links":{"site":{"href":"/site/blog","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:repobased":false,"hst:referencesitemapitem":"product-detail","hst:parametervalues":[""]},"name":"Product Detail","childMenuItems":[],"parameters":{"categoryKey":""},"_links":{"site":{"href":"/site/product-detail","type":"internal"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:externallink":"https://shop.buyitdirect.com/klantenservice","hst:repobased":false},"name":"Klantenservice","childMenuItems":[],"parameters":{},"_links":{"site":{"href":"https://shop.buyitdirect.com/klantenservice","type":"external"}}},{"depth":0,"repositoryBased":false,"properties":{"hst:parameternames":["categoryKey"],"hst:repobased":false,"hst:referencesitemapitem":"product-detail-alt","hst:parametervalues":[""]},"name":"Home Page","childMenuItems":[],"parameters":{"categoryKey":""},"_links":{"site":{"href":"/site/product-detail-alt","type":"internal"}}}],"_meta":{}}},"_meta":{"paramsInfo":{"siteMenu":"main"},"params":{"selectedMenu":"on","level":"1","menu":"main"}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r4"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21_r4","type":"external"}}}],"_meta":{"definitionId":"hst:pages/homepage","pageTitle":"Home Page","params":{}},"_links":{"componentRendering":{"href":"/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21"},"self":{"href":"http://localhost:8080/site/resourceapi?_hn:type=component-rendering&_hn:ref=r21","type":"external"}}},"content":{"u8aaa3c828e784596a70454d42b2ff575":{"id":"8aaa3c82-8e78-4596-a704-54d42b2ff575","_meta":{},"_links":{"site":{"href":"/site/","type":"internal"}},"name":"banner","displayName":"banner","link":{"name":"buyitdirect:link","displayName":"buyitdirect:link","openInNewWindow":false,"alt":"Computers","label":"Computers","link":{"type":"categoryKey","link":"telecom"}},"title":"Banner Computers","image":null,"content":{"value":"<p>Content computerszxcxcxzcxzc&#160;</p>\n\n<p><a href=\"/site/\" data-type=\"internal\">Internal Link</a></p>"},"localeString":"nl"},"u3f738dd726f54e04aa9d257af7a0e61d":{"id":"3f738dd7-26f5-4e04-aa9d-257af7a0e61d","_meta":{},"_links":{"site":{"href":"/site/","type":"internal"}},"name":"simpledoc","displayName":"simpledoc","publicationdate":null,"publicationDate":null,"title":"Simple Document","introduction":"File Formats","content":{"value":"<p>his module focuses on numerical methods that frequently occur in the fields computer vision (CV) and machine learning (ML). In addition to algorithms, this module will also cover modelling aspects that are relevant for solving practical problems in CV and ML. The contents include: - Error analysis and conditioning of problems - Linear systems (solvability, algorithms, stability, regularisation), and applications and modelling in CV and ML (e.g. linear regression, image alignment, deconvolution) - Spectral methods (eigenvalue decomposition, singular value decomposition, respective algorithms), and their applications and modelling in CV and ML (e.g. clustering, Procrustes analysis, point-cloud alignment, principal components analysis) - Numerical optimization (gradient-based methods, second-order methods, large-scale optimization) and applications and modelling in CV and ML.</p>"},"localeString":"nl"}}}

Hello Gopkumar, looking at the attached PMA response I see this line that indicates it is not a preview response. In order for the containers & components to be editable, some meta comments are required that are part of the PMA response but only in preview. See DOM section here.

the desired output should include something like this
..."preview":true,"version":"0.9","branch":"master"}

Make sure that your SPA is passing the required headers for the JWT Authentication as documented here

Also, keep in mind that editing in SPA is only available for enterprise projects, so make sure that your project is also enterprise.

HTH and best regards,
Lef

Sure, thanks a ton @Lef_Karamoulas, we will check this and get back if there are any more queries.