Creating custom modules for hubspot within cms-react-boilerplate?

[Wsaidan67]

Context: I am trying to get my next.js project into a cms using hubspot local cevelopment CLI - and specifically the cms-react-boilerplate: see here

I am trying to wrap my head around how I would be able to create multiple modules that are accessable in cms within this boiler plate setup. Unless I do not understand it properly, it seems like with the cms boilerplate you can upload your react app - but I have not been able to work out how to create multiple modules out of of my react components/modules. For example I have a hero module, nav, footer, carousel... and I want each of them to be a seperate module on hubspot that I can drag and drop onto pages.

TommyPet Spain

I am trying to replicate the structure of app.module to create more modules - but it seems like its routed so that only app.js is whats being rendered up onto hubspot?

{{ require_css(get_asset_url('../../main.css')) }}
{{ require_js(get_asset_url('../../main.js'), 'footer') }}
{%- set instance_id = name %}

<div class="cms-react-boilerplate">
<script type="application/json"
data-module-instance="{{ instance_id }}"
data-portal-id="{{ portalId }}">
{{ module|tojson }}
</script>

<div id="App--{{ instance_id }}"></div>
</div>

In the above - what I want to know is the significance of instance_id and can I change this is new modules and somehow have it render my new modules? For example if I made a hero.module and the instance_id was set to hero how do I configure this so that its a seperate module?

I hope this is clear enough. I basically want to know how I create new modules within this boiler plater that link to my React modules/components.

Thanks.

[Kevin-C · Accepted solution]

Hey @Wsaidan67 

To clarify, you're wanting to use react-boilerplate to output multiple Hubspot modules from a single application?  A One to many application. 

If this is the case I think you may be going about it the wrong way. The react boiler plate is best used for creating an app inside of a single module. A one to one application. 

Im not saying it can't be done, but I'd imagine the bundler config to be a nightmare. 

instance_id from above is assigned the value of the variable name Which is just the unique id that Hubspot gives each module. This is used to allow

multiple instances of a module/app on the page without conflict. 

Hope that helps!

[Jaycee_Lewis]

Thank you for your insight, @Kevin-C 🙌 — Jaycee

[Jaycee_Lewis]

Hey, @Wsaidan67 👋  Thanks for reaching out! Let's see if we can get the conversation started – hey @Kevin-C @Teun @Anton do you have any feedback for how @Wsaidan67 can better understand what they are experiencing here? 

Thank you! – Jaycee