Build CMS modules with React
Rather than using HubL to build modules, you can use JavaScript and React instead. Then, after creating a JavaScript module, it can be added to a page either by hardcoding or via the drag and drop editor in HubSpot. In addition to stitching server-rendered React components into the HTML generated by HubL, JavaScript modules and partials support client-side interactivity with islands. This enables you to have more precise control over where and when JavaScript is shipped and run in the browser.
Get started with the CMS React documentation.
At a high level, building with React comes with benefits including component composability, code reuse, broader community resources, and real access to JavaScript on the server at render time.
Rendering React on the server means that there's less of a divide between your code that serves the initial page HTML and your interactive browser code. In contrast, creating complex and interactive pages with HubL can lead to:
- An increase of client-side JavaScript that slows down the page until it's all been downloaded and executed.
- Needing to replicate or maintain UI logic across HubL and JavaScript in order to have server HTML that is immediately visible and interactive.
But by building with JavaScript, you can code complex interactive components that either share code or are directly rendered on the server. When paired with the islands model, this can enable you to more easily code web experiences that have good Core Web Vital scores (LCP, FID, CLS) even as complexity increases.
Additionally, by building on top of JavaScript and the open source framework of React, you can use the wealth of tooling, third-party libraries via npm, example code, and more that are available in the broader ecosystem. For example, since JavaScript modules and partials are built on top of Vite, you'll get things like ESM, TypeScript, JSX, CSS modules, and tree-shaking out of the box.
CMS React is built on the developer projects framework, which uses a local build and deploy process. A project can be uploaded for build and deploy using the hs project upload
command. This command can be run in the root of your project, or you can include a directory path in the command.
The upload command will kick off the project build. By default, projects are configured to auto-deploy after successful build. You can turn this setting off in HubSpot after your first successful deploy. If you turn off auto-deploy, you can manually deploy your project after successful build by running hs project deploy
.
hs project
CLI commands, check out the documentation or run hs project --help
.
Thank you for your feedback, it means a lot to us.