Skip to content
How to Power Up Your React App in HubSpot

How to Power Up Your React App in HubSpot


Alejandro Rodriguez
July 28, 2022

Trying to decide which CMS is right for your website?

View CMS Comparison
Read Time:
Don't have time? Download Now as a PDF

A few nights ago, I was working on my Bug-Tracker side project in which I used React to take advantage of the reusability of components as I build my web application. As I was working my way through the login implementation, I thought about HubSpot’s App marketplace. I went idle for a moment, just thinking about how nice it would be to list my application for all HubSpot users in that marketplace. HubSpot's modular structure plus the reusability of React components make a great complement for code stability, speed, and module design.

That’s when my brain went into full detective mode, trying to figure out how I could accomplish such a task. If you are as curious as I am, we’re in the right place. See, this is a quick walkthrough I have put together to integrate our React applications with HubSpot. 

Here we go!

First, let’s start with setting up our local environment to get it ready for development. Since we are using HubSpot + React, we will be creating our application using the React boilerplate already built by HubSpot. A few things to have in mind before we embark on this journey:

  1. I will be using Visual Studio Code in order to create our application, please use our favorite IDE to follow along with this walkthrough. 
  2. I have already installed the HubSpot CMS CLI, please refer to this Quick Start Guide in order to install it on your local environment. 
  3. We will be using GitHub to store our project as a repository.

Now that we have our HubSpot CMS CLI installed, it is time to get rolling. Let’s head over to GitHub and create our repo (repository) for our React App. If you have never created a repo before, please follow this easy guide to do so. After completing it, you should have something like this:how-to-power-up-your-react-app-in-hubspot-figure 1

Next, click on the code button to copy your repo link:

how-to-power-up-your-react-app-in-hubspot-figure 2

Then use the Git clone command, your copied snippet, and hit enter. This will clone the repo into your local environment:

how-to-power-up-your-react-app-in-hubspot-figure 3

At this point, you can open your React-HubSpot-App project in VSCode. To do this, just run the command cd <repo_name>  in your terminal. This will make sure your repo is your current working directory. Then you can run the following command code to open the repo using VSCode.

how-to-power-up-your-react-app-in-hubspot-figure 4

Once inside, click on the terminal button on the top bar and then click New Terminal:

how-to-power-up-your-react-app-in-hubspot-figure 5

This will open the VSCode integrated terminal, which you will use to create your React App. Once the terminal is open, run the command hs -init to connect the tools with our HubSpot developer account. Please follow the instructions in our terminal to complete this step:

how-to-power-up-your-react-app-in-hubspot-figure 6

how-to-power-up-your-react-app-in-hubspot-figure 7

And that’s it! Now you are ready to start hacking!

Next, you can use the hs create react-app <app_name> command to create your boilerplate react app:

how-to-power-up-your-react-app-in-hubspot-figure 8

If you take a look at your explorer on our left-hand side, you can see that a new demo directory has been created. Please open the directory and get familiar with what this boilerplate offers. For more information, check the HubSpot React Boilerplate Guide.

Beautiful, isn't it? 😍 This is the point when we go 'Eureka! Eureka!'

how-to-power-up-your-react-app-in-hubspot-figure 9

Taking a closer look, you have an App.js file, a components folder, a modules folder, and more. I mean, what?!

Oh, but it gets better, if you navigate into your demo directory (use cd demo in your terminal), you can run a couple of commands to upload your react app to HubSpot.

— First, use npm install to get your node modules installed in your current director:

how-to-power-up-your-react-app-in-hubspot-figure 10

— Second, use npm start command to upload your react app to HubSpot:

how-to-power-up-your-react-app-in-hubspot-figure 11

Magic right? 💫 Check it out in your developer account in HubSpot:

how-to-power-up-your-react-app-in-hubspot-figure 12

Now you can go to your design tools in HubSpot and click the preview button to see what the React HubSpot boilerplate looks like:

how-to-power-up-your-react-app-in-hubspot-figure 13

Please go ahead and play with it, when you’re ready, head over to your VSCode integrated terminal to finish the journey by committing and pushing your react app changes to Github. 

You can use the following steps to record your local changes into your main branch in GitHub:

  1. From the terminal, use the following command to add file content to the index: git add.
  2. Then git commit -m 'initial commit' to record changes to your GitHub repo.
  3. And finally, git push origin main to push your remote changes to your main branch in GitHub.

Wrapping Up

There you have it, amigos, your first React + HubSpot web application. Now, you can not only re-use your modules, but also your React components to increase the speed of the development process. Combine React with HubSpot modular structure, and your flexibility is endless, allowing you to build rich user interfaces.

All of this allows us to take advantage of not just HubSpot's amazing and huge community, but also React’s strong support to build future applications. Custom HubDB Implementation

 

Latest Blog Posts

The Roles of Inbound Marketing vs. Digital Marketing
Dec 6, 2023

The Roles of Inbound Marketing vs. Digital Marketing

Evan Burns
Inbound Marketing, Digital Marketing

Understanding the nuances between different strategies is crucial for businesses aiming to thrive in the digital age. Two terms frequently discussed in marketing circles are "inbound marketing" and "digital marketing." While they may seem similar,...

Common Problems HubSpot Audits Uncover and Solutions to Fix Them
Dec 4, 2023

Common Problems HubSpot Audits Uncover and Solutions to Fix Them

Jill Schneider
HubSpot Audit

HubSpot. It's like the Swiss Army knife in the world of digital marketing — super handy with a tool for just about everything. Whether it’s wrangling your marketing, streamlining sales, or keeping customer service on point, HubSpot’s got your back....

Best Practices for a Successful HubSpot Data Migration
Dec 1, 2023

Best Practices for a Successful HubSpot Data Migration

Jill Schneider
HubSpot

The role of a comprehensive CRM and marketing solutions is more critical than ever today. HubSpot, standing at the forefront of this arena, offers a dynamic range of tools designed to streamline customer relationship management, marketing...

HIVE Hexagon
HIVE Hexagon
HIVE Hexagon
HIVE Hexagon
HIVE Hexagon
HIVE Hexagon