Introduction to React and HubSpot CMS: Part 2 — Getting Started

Creating a Dynamic Form Builder for Enhanced User Experience

4 min readMay 24, 2024

Make sure to check out the previous parts in the series:

Part 1: Introduction to React and HubSpot CMS
Part 3: Initial Integration Steps
Part 4: Building and Integrating a Dynamic Form Builder Module

In Part 2, we’ll walk you through:

Setting up your development environment for integrating React with HubSpot CMS
Installing necessary tools and dependencies
Configuring your development setup
Establishing best practices for efficient workflow

You’ll learn how to use tools like Create React App, Webpack, and Babel to streamline your development process. By the end of this part, you’ll have a fully functional development environment ready to build and deploy React components within HubSpot CMS.

Prepping for Development

Integrating React with HubSpot CMS requires some initial setup to ensure your development environment is ready. Below are the prerequisites and detailed steps to get you started.

Prerequisites

Before diving into the integration, make sure you have the following knowledge and tools:

Knowledge and Experience:

JavaScript: A solid understanding of JavaScript is essential since React is a JavaScript library. You should be comfortable with ES6+ features like arrow functions, classes, destructuring, and modules.
React: Familiarity with React, including concepts like components, props, state, and hooks, is important. Understanding the component lifecycle and how to manage state and props in a React application is crucial.
HubSpot CMS: Basic knowledge of HubSpot CMS, including how to create and manage content, use HubL (HubSpot Markup Language), and navigate the HubSpot interface, will help in integrating React into your site.

Tools and Software:

Node.js and npm: Node.js is a JavaScript runtime that allows you to run JavaScript on the server side, and npm (Node Package Manager) is used to manage dependencies in your project.
HubSpot CLI: The HubSpot Command Line Interface (CLI) is necessary for local development and deployment of your HubSpot CMS projects.

Step 1: Setting Up Your Development Environment

Step 1: Download and Install Node.js and npm

Download and Install Node.js:

Visit the Node.js official website and download the LTS (Long Term Support) version suitable for your operating system.
Follow the installation instructions provided for your OS.

2. Verify Installation:

Open your terminal or command prompt.
Run the following commands to check the installation:

node -v 
npm -v

You should see version numbers for both Node.js and npm, indicating that the installation was successful.

Step 2: Set Up a Local HubSpot CMS Development Environment

Install HubSpot CLI:

Open your terminal or command prompt.
Run the following command to install the HubSpot CLI globally:

npm install -g @hubspot/cli@next

2. Authenticate with HubSpot:

Run the following command to authenticate with your HubSpot account:

hs auth

Follow the prompts to log in to your HubSpot account and authorize the CLI.

3. Create a New Project:

Navigate to the directory where you want to create your project.
Run the following command to create a new project:

hs create website

Follow the prompts to set up your project.

4. Set Up Your Development Environment:

Navigate into your project directory:

cd your-project-name

Start the local development server:

hs watch

This command will watch for changes in your local files and sync them with your HubSpot account in real-time.

Step 3: Configure Your Project

Configure hsconfig.yml:

Ensure that your hsconfig.yml file is correctly configured with your portal ID and default account settings. This file is typically generated automatically when you set up your project with hs create website.

2. Setting Up a React App:

Use Create React App to scaffold a new React project within your HubSpot project directory:

npx create-react-app my-react-app

3. Build the React application:

cd my-react-app 
npm run build

Move the contents of the build directory into the appropriate directory in your HubSpot project (e.g., dist or assets).

4. Integrate React with HubSpot CMS:

Include the React build output in your HubSpot templates using script tags or module imports. For example, you can add the compiled React JavaScript file to your HubSpot CMS page templates.

<!-- Example of including React in a HubSpot template -->
<div id="react-root"></div>
<script src="{{ get_asset_url('my-react-app/build/static/js/main.js') }}"></script>
<script>
  ReactDOM.render(
    React.createElement(ExampleComponent),
    document.getElementById('react-root')
  );
</script>

By following these steps and ensuring that you have the necessary prerequisites, you’ll be well-prepared to start integrating React with HubSpot CMS. In the next section, we’ll dive into the details of embedding React components into your HubSpot CMS pages.

Ready to Move Ahead to Part 3?

As you wrap up Part 2, make sure to check out all parts of our series to get the most out of this guide:

Part 3: Initial Integration Steps
Part 4: Building and Integrating a Dynamic Form Builder Module

Up next in Part 3, we’ll delve into the initial integration steps, guiding you through the process of incorporating React components into your HubSpot CMS and ensuring seamless functionality. Stay tuned for practical insights and tips to advance your integration skills!

In case you missed it, don’t forget to review Part 1: Introduction to React and HubSpot CMS to establish a solid foundation before moving forward.