Hubspot CMS - React.js

SOLVE
netLex
Member

Our company has a single page application built with React.js, Gatsby and many other React non-bult-in modules and imports, which has over 30 links for multiple views of the same app.

 

Therefore, we would like to know if the Hubspot's CMS Service provides support to the content management our entire website or if it's currently limited to simple pages and Hubspot Design Manager templates.

 

Best wishes

0 Upvotes
1 Accepted solution

Accepted Solutions
dennisedson
Solution
Community Manager

Hello @netLex!

Thanks for asking this question.  Using js frameworks inside of HubSpot is becoming an important aspect of the developer experience.  

You can certainly use React in HubSpot, but you would not approach it via the design manager. Instead, you will build your app out locally using the HubSpot CLI

Once you have the CLI set up, you can run

hs create react-app

which will pull down the HubSpot boilerplate react  app from which you can get an idea of how it all fits together.  

I would also highly recommend checking out this tutorial on building an event registration app using React.  Please do note that for that app, you will need CMS Enterprise level subscription.

 

I want to add some people to this as I think this will be an ongoing conversation.  

@Teun , @kierana , @Jsum , @Kevin-C !  Hello friends!  Do you all have thoughts on this subject?  Trick question.  I know you all do have thoughts on it.  😃

 

Best!

d

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

4 Replies 4
dennisedson
Solution
Community Manager

Hello @netLex!

Thanks for asking this question.  Using js frameworks inside of HubSpot is becoming an important aspect of the developer experience.  

You can certainly use React in HubSpot, but you would not approach it via the design manager. Instead, you will build your app out locally using the HubSpot CLI

Once you have the CLI set up, you can run

hs create react-app

which will pull down the HubSpot boilerplate react  app from which you can get an idea of how it all fits together.  

I would also highly recommend checking out this tutorial on building an event registration app using React.  Please do note that for that app, you will need CMS Enterprise level subscription.

 

I want to add some people to this as I think this will be an ongoing conversation.  

@Teun , @kierana , @Jsum , @Kevin-C !  Hello friends!  Do you all have thoughts on this subject?  Trick question.  I know you all do have thoughts on it.  😃

 

Best!

d

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

jmclaren
HubSpot Employee

@dennisedson is spot on.

I just wanted to add we have a "How toJavaScript frameworks on HubSpot" doc that explains a bit about what it's like.

Our React and Vue Boilerplates are new, and we're excited for people to put them through their paces. Let us know any feedback you have on them by filing an issue in their respective GitHub repositorys.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

kierana
Contributor

Hey - so I think the key question here is - how important is SEO to your site?

 

Hubspot at the moment - is fairly easy to built a React application on. The problem you're going to encounter, primarily sits with making your website search engine friendly.

 

Google, can crawl react applications. However, at scale this is a pretty heavy task and quickly consumes your websites 'crawl budget', this results in partially crawled sites/outdated search results.

 

@dennisedson has linked to the react boilerplate which will allow you to put together a fully functional application using the HS platform. This is great for putting together a modular React website. 

 

To "solve" the SEO/Open Graph problem:

 

While not supported directly by Hubspot - a common solution is to use a service to serve a rendered version of your site to Search engines. This is a bit more complex, and requires CMS Enteprise for the reverse proxy support. The steps are roughly:

 

0. Setup a Cloudfront CDN distribution and Configure Hubspot Reverse Proxy

1.  Disable caching on Host and X-Is-Bot headers.

2. Setup a Viewer Request lambda@edge fn, with a check on the User-Agent - if this matches a search engine, set the X-Is-Bot header to 1

3. Setup a Origin Request lambda@edge which which checks to see if X-Is-Bot is set to 1, if it is change the origin to your render server (prerender.io is fairly popular)

 

When a bot first crawls your homepage, the request will be opaquely sent to prerender.io. This service essentially loads your site in a Headless browser and responds with the rendered HTML. Cloudfront will then take this rendered HTML, cache it and serve it to the bot.

 

Regular users will be straight to Hubspot. 

 

Resources: 

 

jmclaren
HubSpot Employee

Hey there, just want to chime on the SEO with JavaScript frameworks issue.
Google and Bing both use modern headless browsers to crawl. 

Content on your page will be crawled and unless your page's performance is horrid, there is no real reason to prerender the content for the sake of SEO. Optimizing your site for performance will not only reduce the load on crawl budget, but likely the user experience and possibly as a result the SEO.

If you are building say a massive thousand page website that heavily uses react everywhere, then you may see real benefits in an approach like this. Otherwise it may be extra work that you could be putting into delivering a better user experience instead.

 

Some other considerations you can make would be to serverside render schema markup. If you give search engines structured data up-front, it can only help.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.