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

Developer Support APIs & Integrations
1

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

](https://tommypetspain.com/)

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.

2

Hey, @Wsaidan67 :waving_hand: 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

3

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!

4

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

5

Hi there,

@Kevin-C In relation to your comment “going about it the wrong way”, is there any documentation or information out there on how to actually build out custom modules at a React component level? I’m currently trying to figure out a way to use components from my company’s internal component library (via a private NPM pacakge) as HubSpot modules for building website pages, but am not finding much and keep hitting dead ends. Any guidance or insight is greatly appreciated.

Thanks!