Skip to content
LOOKING FOR WEBSITE INSPIRATION? Check out our website portfolio!
x
Buzzy-chat
Ask AI Buzzy
close chat
fullscreen chat
Buzzy-chat

Buzzy AI Assistant

Human Chat
Buzzy-chat

I'm HIVE's AI assistant and I'm here to add a dash of nectar-sweet fun to your day! Whether you're navigating just for information or looking for a partner with your marketing needs, I'll be your guide on this whimsical journey. So let's make a beeline to adventure and turn your experience into the bee's knees! 🐝✨

Today
- AI: Hi there! I'm Buzzy!
- AI: How can I help you today?
Buzzy-chat
buzzin for answers
How would you like to interact with Buzzy?
Speak
Text
microphone ai
Speaking to Buzzy Sending message Buzzy is responding
** Buzzy might make mistakes occasionally. It's always a good idea to double-check important information with HIVE.
close chat
Let Buzzy ...
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

Negative Brand Sentiment: Using It for Growth Opportunities
Sep 13, 2024

Negative Brand Sentiment: Using It for Growth Opportunities

Dustin Brackett
Branding, Brand Sentiment, MarketingGrader.ai

No matter how successful businesses are, they will naturally experience their fair share of ups and downs. Brand owners and business stakeholders count on positive feedback and repeat customers to carry them through the lean times. However, it's how...

Conversion Killers: 10 UX Mistakes You Don’t Want to Make
Sep 12, 2024

Conversion Killers: 10 UX Mistakes You Don’t Want to Make

Dustin Brackett
User Experience, MarketingGrader.ai

User experience (UX) plays a huge role in determining how effective your website is at converting visitors into customers. If your website doesn't offer a smooth, engaging experience, users will likely abandon it and head elsewhere. Every small...

8 Innovative Ways to Utilize Chatbots
Sep 11, 2024

[Updated] 8 Innovative Ways to Utilize Chatbots

Jill Schneider
HubSpot, Chatbot

This blog post was originally published on August 4, 2020, and has been updated with new information on September 11, 2024

Technology has changed the way that consumers engage with companies. Consumers are doing their own research, interacting with...

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