APIs & Integrations

Wsaidan67
Miembro

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

resolver

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 Me gusta
1 Soluciones aceptada
Kevin-C
Solución
Experto reconocido | Partner
Experto reconocido | Partner

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

resolver

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!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Ver la solución en mensaje original publicado

4 Respuestas 4
Kevin-C
Solución
Experto reconocido | Partner
Experto reconocido | Partner

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

resolver

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!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
TedAnton
Participante

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

resolver

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!

0 Me gusta
Jaycee_Lewis
Administrador de la comunidad
Administrador de la comunidad

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

resolver

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Me gusta
Jaycee_Lewis
Administrador de la comunidad
Administrador de la comunidad

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

resolver

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 Me gusta