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.
