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

**URL:** <https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598>\
**Category:** APIs & Integrations\
**Tags:** professional\
**Created:** [May 24, 2022, 11:44am UTC](https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598 "2022-05-24T11:44:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wsaidan67](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wsaidan67/32/9140_2.png) [@Wsaidan67](https://community.hubspot.com/u/Wsaidan67)\
**Post date:** [May 24, 2022, 11:44am UTC](https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598/1 "2022-05-24T11:44:58Z")

</div>

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/](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?

```lia-code-sample
{{ 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.

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [May 24, 2022, 3:19pm UTC](https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598/2 "2022-05-24T15:19:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [June 3, 2022, 3:27am UTC](https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598/3 "2022-06-03T03:27:56Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [June 3, 2022, 4:08pm UTC](https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598/4 "2022-06-03T16:08:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TedAnton](https://avatars.discourse-cdn.com/v4/letter/t/b5ac83/32.png) [@TedAnton](https://community.hubspot.com/u/TedAnton)\
**Post date:** [January 25, 2023, 12:15am UTC](https://community.hubspot.com/t/creating-custom-modules-for-hubspot-within-cms-react-boilerplate/57598/5 "2023-01-25T00:15:54Z")

</div>

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!