Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add getting started example #62

Merged
merged 20 commits into from
Jun 18, 2024
Merged

Conversation

jontallboy
Copy link
Contributor

This PR adds a new getting-started example that showcases a few key items when working with cms-react. The three modules in this PR are a Weather module that using client side data fetching and the free WeatherAPI.com API to get weather data for a given city. In addition to this module, we have a header and a footer module to show simpler modules. This example showcases the following:

  • Using TypeScript
  • Client side data fetching
  • Modules and Fields
  • Using third party libs (day.js for date formatting)
  • Using module css
  • Accessing local assets

Open questions

  • Should I use component lib as well?
    • With this example, I am only using one third party dependency (day.js for date formatting), I think there is an opportunity to also showcase how to use a component lib as that may be common for devs. We previously provided an example using MUI, but since MUI is not ESM compatible, we need to consider a different component lib if we decide providing devs with this use case is valuable. I think ChakraUI would be a good one to use if we go down that road as it is ESM compatible and is a popular lib for out of the box components.
  • Any concerns with using these icons in our repo? The license is free to use, but verifying that you all are ok with these icons. The API itself returns icons, but they are 64X64 pngs, so don't look as nice 💅 but usable. I wanted to show how using assets works but we can also have the logo in the header module that shows the same thing.
  • I have a small list of module fields being used (TextField, ImageField, MenuField), should I update the example to incorporate others?

Screenshots

Module Screenshot
Weather Screenshot 2024-06-10 at 1 01 28 PM
Header Screenshot 2024-06-10 at 1 30 14 PM
Footer Screenshot 2024-06-10 at 1 30 51 PM

@jontallboy jontallboy marked this pull request as ready for review June 11, 2024 14:32
@jontallboy jontallboy changed the title Add updated getting started example Add getting started example Jun 11, 2024
<header className={headerStyles.wrapper}>
<nav>
<img src={src} alt={alt} width={width} height={height} />
<Menu fieldPath="menu" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent usage of MenuField!

Copy link
Collaborator

@bmatto bmatto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to Routing, perhaps a README describing the various parts of the system at play here would be helpful. I think overall this is an excellent mix of features that exposes a healthy amount of complexity and capability.

I would no add more complications i.e. GraphQL, Serverless, etc..

@jontallboy jontallboy requested a review from bmatto June 14, 2024 17:02
@jontallboy
Copy link
Contributor Author

@bmatto README has been added and is ready for feedback.

To set up your development environment to work with CMS React, you’ll need the following:

- A HubSpot account with CMS Free, Starter, Pro, or Enterprise access
- Node.js v16.0 or higher and the associated version of NPM
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we specify Node 18 here

npm run deploy
```

This will upload the `getting-started-project` to your HubSpot account. Once uploaded, built, and deployed, you can add the modules and partials to your HubSpot templates.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should say that the modules can be added pages as well, or even just used as any module would.


You can preview your local CMS React components inside live HubL-rendered pages. To do this, create a page:

- Go to Control Center
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Control Center" I think is an internal term - though probably littered in these docs... maybe refer to it as "Website Pages" in HubSpot.

@jontallboy
Copy link
Contributor Author

Fixed 0aab365

@jontallboy jontallboy requested a review from bmatto June 14, 2024 18:53
@jontallboy jontallboy merged commit 5f5925a into main Jun 18, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants