---
title: Local Development with HubSpot React Boilerplate
description: Learn how to set up local development with HubSpot's React Boilerplate using the HubSpot and GitHub CLI. Clone the repository, install dependencies, run the development server, and upload your custom theme to HubSpot easily
---

[HubSpot Code Block | HubDev](https://www.hubdev.in/references)

# [Local Development with HubSpot React Boilerplate](https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate)

 Written by [King DJ](https://www.hubdev.in/references/author/hubdev) | 14 January 2025

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](https://nodejs.org/).
- **GitHub CLI**: The official GitHub command-line interface for interacting with GitHub repositories. Install it from [here](https://cli.github.com/).
- **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.

[View full post](https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "King DJ"
  },
  "dateModified" : "2025-05-16T20:24:59.713Z",
  "datePublished" : "2025-01-14T19:45:41Z",
  "headline" : "Local Development with HubSpot React Boilerplate",
  "image" : {
    "@type" : "ImageObject",
    "height" : 720,
    "url" : "https://hubdev.in/hubfs/hq720.jpg",
    "width" : 1280
  },
  "mainEntityOfPage" : "https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://hubdev.in/hubfs/deets_logo_b-1.png",
      "width" : 310.61945
    },
    "name" : "Developer References"
  }
}
```