APIs & Integrations

Wsaidan67
Member

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

SOLVE

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.

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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!

View solution in original post

3 Replies 3
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

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

SOLVE

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
Community Manager
Community Manager

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

SOLVE

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

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

SOLVE

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes