--- 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 image: https://www.hubdev.in/hubfs/hq720.jpg --- [Skip to content](https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate#main-content) Close - [Home](https://www.hubdev.in) - [Projects](https://www.hubdev.in/projects) - [Reviews](https://www.hubdev.in/reviews) - Tools - [Resume Builder](https://www.hubdev.in/modern-responsive-resume-builder) - [Logo Maker](https://www.hubdev.in/logo-creator) - [Compress Images](https://www.hubdev.in/tools/compress-image) - [HTML Cleaner](https://www.hubdev.in/tools/html-cleaner) - [Interest Calculator](https://www.hubdev.in/interest-calculator) - [SIP Calculator](https://www.hubdev.in/sip-calculator) - [Spin the Wheel](https://www.hubdev.in/spin-to-win) - [Email Signature Generator](https://www.hubdev.in/tools/email-signature-generator) - [Image to Text Extractor](https://www.hubdev.in/image-text-extractor) - [Text Converter](https://www.hubdev.in/text-transformer) - [Say Hi](https://www.hubdev.in/contact) SEARCH [Read All Articles](https://www.hubdev.in/references) [![logo](https://www.hubdev.in/hs-fs/hubfs/Profile/hub-dev-logo.png?width=400&height=107&name=hub-dev-logo.png "logo")](https://www.hubdev.in)[![hd-hubdev-gold](https://www.hubdev.in/hs-fs/hubfs/hd-hubdev-gold.png?width=222&height=70&name=hd-hubdev-gold.png)](https://www.hubdev.in) - [Home](https://www.hubdev.in) - [Projects](https://www.hubdev.in/projects) - [Reviews](https://www.hubdev.in/reviews) - Tools - [Resume Builder](https://www.hubdev.in/modern-responsive-resume-builder) - [Logo Maker](https://www.hubdev.in/logo-creator) - [Compress Images](https://www.hubdev.in/tools/compress-image) - [HTML Cleaner](https://www.hubdev.in/tools/html-cleaner) - [Interest Calculator](https://www.hubdev.in/interest-calculator) - [SIP Calculator](https://www.hubdev.in/sip-calculator) - [Spin the Wheel](https://www.hubdev.in/spin-to-win) - [Email Signature Generator](https://www.hubdev.in/tools/email-signature-generator) - [Image to Text Extractor](https://www.hubdev.in/image-text-extractor) - [Text Converter](https://www.hubdev.in/text-transformer) - [Say Hi](https://www.hubdev.in/contact) [Read All Articles](https://www.hubdev.in/references) Quick results for "{search\_term}" ![Local development setup with HubSpot React Boilerplate, including installation and theme upload to HubSpot CMS using HubSpot and GitHub CLI.](https://www.hubdev.in/hs-fs/hubfs/hq720.jpg?width=300&name=hq720.jpg) [King DJ](https://www.hubdev.in/references/author/hubdev)15 January 20251 min read # Local Development with HubSpot React Boilerplate [Previous](https://www.hubdev.in/references/dynamic-rss-feed-rendering-with-pagination) [Next](https://www.hubdev.in/references/building-a-smart-contact-form-with-real-time-validation-and-business-email-check) 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. ![avatar](https://www.hubdev.in/hs-fs/hubfs/Profile/dj-author-circle2-1.png?width=290&name=dj-author-circle2-1.png) #### [King DJ](https://www.hubdev.in/references/author/hubdev) Building custom HubSpot CMS themes, HUBL modules, smart forms, and dynamic quote templates—optimized for speed, scalability, and CRM integration. ## RELATED ARTICLES [![hubdevfooterLogo](https://8785843.fs1.hubspotusercontent-na1.net/hub/8785843/hubfs/hubdevfooterLogo.png?width=201&name=hubdevfooterLogo.png)](https://www.hubdev.in) #### HubSpot CMS Developer · Front-End Engineer Building custom HubSpot websites, modules, CRM-driven experiences, and front-end solutions with 12+ years of development experience. - [![India](https://www.hubdev.in/hubfs/Profile/india.png)](https://www.hubdev.in/contact) - [Contact Developer](https://www.hubdev.in/contact) HubSpot React / Custom Object / HubDB / JavaScript / HUBL / HTML / CSS / Jinja - [Terms](https://www.hubdev.in/terms-of-service) - [PayPal](https://www.paypal.com/paypalme/DeepakJha999) - [Codepen](https://codepen.io/Deets_HubDev) - [Optimization](https://www.hubdev.in/page-speed-results) - [My Resume](https://www.hubdev.in/developer-resume) ```json { "@context" : "https://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "India", "addressLocality" : "DBG", "addressRegion" : "BH", "postalCode" : "", "streetAddress" : "LHS" }, "knowsLanguage" : "en", "logo" : { "@type" : "ImageObject", "url" : "https://hubdev.in/hubfs/Profile/hub-dev-logo.png" }, "name" : "HubDev", "url" : "https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "abstract" : "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", "author" : { "@type" : "Person", "name" : "King DJ" }, "dateModified" : "May 16, 2025 8 PM", "datePublished" : "January 14, 2025 7 PM", "headline" : "Local Development with HubSpot React Boilerplate", "image" : "https://hubdev.in/hubfs/hq720.jpg", "inLanguage" : "en", "keywords" : "[Local Development]", "mainEntityOfPage" : { "@type" : "WebPage" }, "name" : "Local Development with HubSpot React Boilerplate", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://hubdev.in/hubfs/Profile/hub-dev-logo.png" }, "name" : "HubDev" }, "text" : "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.", "url" : "https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate", "wordCount" : "503" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "King DJ", "url" : "https://www.hubdev.in/references/author/hubdev" }, "dateModified" : "2025-05-16T20:24:59.709Z", "datePublished" : "2025-01-14T19:45:41.000Z", "headline" : "Local Development with HubSpot React Boilerplate", "image" : [ "https://www.hubdev.in/hubfs/hq720.jpg" ], "mainEntityOfPage" : { "@id" : "https://www.hubdev.in/references/local-development-with-hubspot-react-boilerplate", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.hubdev.in/hubfs/Profile/hub-dev-logo.png" }, "name" : "Deets Engineering Space Station" } } ```