Local Development with HubSpot React Boilerplate

HubSpot's React Boilerplate offers an excellent starting point for developers looking to build advanced CMS themes using React. This guide covers setting up local development for the HubSpot CMS React Boilerplate with the HubSpot CLI and GitHub CLI.

Step 1: Install Prerequisites

Before diving into local development, ensure you have the following tools installed:

• Node.js: For running JavaScript-based applications. Install Node.js.
• GitHub CLI: The official GitHub command-line interface for interacting with GitHub repositories. Install it from here.
• HubSpot CLI: To interact with your HubSpot account and upload themes. Install it with:

npm install -g @hubspot/cli

Step 2: Clone the HubSpot CMS React Boilerplate

Start by cloning the HubSpot CMS React Boilerplate repository from GitHub. Open your terminal and run the following command:

gh repo clone HubSpot/cms-react-boilerplate

This will pull the repository to your local machine.

Step 3: Install Dependencies

Navigate to the project folder:

cd cms-react-boilerplate

Then, install all the required dependencies:

npm install

This step ensures that the necessary libraries and packages are available to run the project.

Step 4: Initialize HubSpot Project

With the project set up locally, initialize the HubSpot CLI by running:

hs init

This command will prompt you to log in to your HubSpot account and choose the portal to associate with the project.

Step 5: Start the Development Server

Once everything is set up, start the development server:

hs dev

This will launch a local development server, allowing you to preview the theme in your browser. You can now make real-time changes to the code and see them reflected instantly.

Step 6: Upload the Theme to HubSpot

When you're satisfied with the local changes, push the theme to your HubSpot portal:

hs upload

This uploads the theme to your selected HubSpot account, making it available for use in the HubSpot CMS.

Conclusion

By using the HubSpot CMS React Boilerplate alongside the HubSpot CLI, developers can easily set up local development environments to streamline the creation and management of custom HubSpot themes. Whether you're starting fresh or modifying an existing theme, this setup ensures a smooth workflow with instant previews and easy uploads to HubSpot.