Hosting React App on HubSpot CMS

FNamdarian
Member

Hi,

 

I have a project that has been built with Vite, TypeScript, React , shadcn-ui ,Tailwind CSS. it's a landing page. The original files are on github but I downloaded the copy on my local to start building it on HubSpot. I need to host it on HubSpot CMS. These are the steps I took:
1. Built my Project for Production with npm run build
2. Installed and Set Up HubSpot CLI
3. Organize My Files for HubSpot in File manager 
4. Created a HubSpot Template ( html + Hubl) and Referenced My .JS and .CSS assets.

It seems everything is good to go but when I publish my changes under design manager, it gives me an error on my file path which sounds like nothing is working.

I feel like I'm so close but I stuck. please help or give me some clue to move forward. Thank you

0 Upvotes
2 Accepted solutions
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Hey @FNamdarian

 

Can you please provide some more information like code snippets, errors, screenshots.... 

 

If you have zero experience on building React or HubSpot apps, you'll have quite a challenging time. 

 

A little bit of explenation/knowledge:
HubSpot has a lot of development opportunities which might be overwhelming and sometimes a bit confusing if you're just starting.

 

Private apps:

(small) addon-like functions that are bound to a single portal. They're good for handling data and mostly CRM stuff.

 

Public apps:

can be addon-like but also full-blown integrations. Good if you want to have a seemless integration of external tools in HubSpot or move data from HubSpot to external via API. You'll need a developer account to host it and then go through the marketplace app verification process.

 

UI Extensions:
A UI Extension(or UIE) are basically CRM cards. A UIE can be developed independently but also be part of a public/private app. UIE are great for displaying data in a contact/company/object view. 

 

Themes:

A theme is a collection of all sort of files like css, js, modules, sections, templates. Everything that is required for creating landing-/webpages in HubSpot. If you have worked with something like WordPress - it's basically the same.

Also - there are 3 types of themes:

- HubSpot themes: The ones that are developed and managed by HubSpot. They provide you with a good starting experience in HubSpot page creation. Can be found in the @hubspot folder inside the Design-Manager)

- Marketplace themes: Developed and managed by individuals or companies/partners outside of HubSpot. There are free and paid ones. Good themes often have a ton more functionality than HubSpot themes. They can be found in the @marketplace folder inside the Design-Manager

- Custom themes: Developed and managed by individuals or companies/partners outside of HubSpot or yourself for your portal. Basically a "no-strings-attached" approach to create a perfect fitting solution to your project. Custom themes are great if you don't want to rely on something finished and want to do your own thing. Downside of custom themes is that it's most times way more time consuming to set up than starting with a HubSpot or Marketplace theme. 

 

Important note: To have the ability to modify a HubSpot or a Marketplace theme, you have to create a Child-theme of the theme and move the assets you'd like to modify to the child-theme. 

 

Themes are usually written in HubL - the templating language of HubSpot. HubL is based on Jinja2.

 

Theme projects:

A quite new addition to CMS development. Theme projects allow you to write custom themes with React instead of HubL. A huge downside - imo - is that those themes are not visible/accessible via the Design-Manager. This makes it extremly hard for beginners or non-developers to create a theme as you have to go through the "Set up your local environment" process.

 

Child-Themes:

Essential to create for almost every project before starting building pages based on a HubSpot or Marketplace theme. Another benefit of child-themes is that you can have a parent theme that will have all layouts, modules ... and add minor changes to each child-themes. 
Example:
- Company website is based on a parent theme

- Subbrand of the company is using a child-theme because it uses different colors

 

Depending on your portal plan you can have up to 10 child-themes

 

Modules:

Those are the "functions" of every theme. Can be something simple like a "Headline-Text" combination but also something like whole rows (Text, Image, Form, Button... combinations)

 



My recommendation:
If you're just starting and don't have that much React knowledge - use a Marketplace theme with a Child-theme or create your own small custom theme with HubL. 

Also - if you haven't already: I'll recommend to look at the current CMS for developers certification(there will be a new coming soon) in the HubSpot Academy. 

 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

FNamdarian
Solution
Member

Hi @Anton,

 

Thank you so much for taking a time and educate me. 
Fortunately, I was able to find a solution and I'm good to go.

I was trying to host a react landing page on HubSpot. My challenge was since the react is using client side server and HubSpot is using the server side, I was getting a 404 error. I changed the BrowserHash Route to HashRoute and cleared the cach and that solved the issue 🙂

Yay!

Thanks again,

Farnaz

View solution in original post

3 Replies 3
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Hey @FNamdarian

 

Can you please provide some more information like code snippets, errors, screenshots.... 

 

If you have zero experience on building React or HubSpot apps, you'll have quite a challenging time. 

 

A little bit of explenation/knowledge:
HubSpot has a lot of development opportunities which might be overwhelming and sometimes a bit confusing if you're just starting.

 

Private apps:

(small) addon-like functions that are bound to a single portal. They're good for handling data and mostly CRM stuff.

 

Public apps:

can be addon-like but also full-blown integrations. Good if you want to have a seemless integration of external tools in HubSpot or move data from HubSpot to external via API. You'll need a developer account to host it and then go through the marketplace app verification process.

 

UI Extensions:
A UI Extension(or UIE) are basically CRM cards. A UIE can be developed independently but also be part of a public/private app. UIE are great for displaying data in a contact/company/object view. 

 

Themes:

A theme is a collection of all sort of files like css, js, modules, sections, templates. Everything that is required for creating landing-/webpages in HubSpot. If you have worked with something like WordPress - it's basically the same.

Also - there are 3 types of themes:

- HubSpot themes: The ones that are developed and managed by HubSpot. They provide you with a good starting experience in HubSpot page creation. Can be found in the @hubspot folder inside the Design-Manager)

- Marketplace themes: Developed and managed by individuals or companies/partners outside of HubSpot. There are free and paid ones. Good themes often have a ton more functionality than HubSpot themes. They can be found in the @marketplace folder inside the Design-Manager

- Custom themes: Developed and managed by individuals or companies/partners outside of HubSpot or yourself for your portal. Basically a "no-strings-attached" approach to create a perfect fitting solution to your project. Custom themes are great if you don't want to rely on something finished and want to do your own thing. Downside of custom themes is that it's most times way more time consuming to set up than starting with a HubSpot or Marketplace theme. 

 

Important note: To have the ability to modify a HubSpot or a Marketplace theme, you have to create a Child-theme of the theme and move the assets you'd like to modify to the child-theme. 

 

Themes are usually written in HubL - the templating language of HubSpot. HubL is based on Jinja2.

 

Theme projects:

A quite new addition to CMS development. Theme projects allow you to write custom themes with React instead of HubL. A huge downside - imo - is that those themes are not visible/accessible via the Design-Manager. This makes it extremly hard for beginners or non-developers to create a theme as you have to go through the "Set up your local environment" process.

 

Child-Themes:

Essential to create for almost every project before starting building pages based on a HubSpot or Marketplace theme. Another benefit of child-themes is that you can have a parent theme that will have all layouts, modules ... and add minor changes to each child-themes. 
Example:
- Company website is based on a parent theme

- Subbrand of the company is using a child-theme because it uses different colors

 

Depending on your portal plan you can have up to 10 child-themes

 

Modules:

Those are the "functions" of every theme. Can be something simple like a "Headline-Text" combination but also something like whole rows (Text, Image, Form, Button... combinations)

 



My recommendation:
If you're just starting and don't have that much React knowledge - use a Marketplace theme with a Child-theme or create your own small custom theme with HubL. 

Also - if you haven't already: I'll recommend to look at the current CMS for developers certification(there will be a new coming soon) in the HubSpot Academy. 

 

 

best, 

Anton

Anton Bujanowski Signature
FNamdarian
Solution
Member

Hi @Anton,

 

Thank you so much for taking a time and educate me. 
Fortunately, I was able to find a solution and I'm good to go.

I was trying to host a react landing page on HubSpot. My challenge was since the react is using client side server and HubSpot is using the server side, I was getting a 404 error. I changed the BrowserHash Route to HashRoute and cleared the cach and that solved the issue 🙂

Yay!

Thanks again,

Farnaz

FNamdarian
Member

I want to add that I have zero experience building React APP or HubSpot App.

0 Upvotes