[ALT-1508] feat: add gatsby project to templates and add readmes for templates and test-apps #896
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
ryunsong-contentful
force-pushed
the
ALT-1508
branch
3 times, most recently
from
89fc17b to
f69a7b5
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
from
f69a7b5 to
b1321e4
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
from
99f6459 to
37c1a6b
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
2 times, most recently
from
ee40a1b to
6e4d174
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
from
7e67538 to
c98f938
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
from
14148b1 to
3897c81
Compare
There was a problem hiding this comment.
In my opinion, we don't need all this css and html content in our example app. As an alternative, this file could just render a <h1> tag that says "Studio Experiences with Gatsby single page application example" or something else very minimal like that
There was a problem hiding this comment.
The other example apps redirect the '/' route to '/home-page', and the routing is setup so the segment after the root is the slug that gets passed to fetch the experience.
| const slug = '' | ||
| const localeCode = ''; | ||
| const experienceTypeId = ''; |
There was a problem hiding this comment.
I find it a little bit odd to hardcode the slug and locale to one value. Is that intentional because of being a single-page application?
We should use the GATSBY_CTFL_EXPERIENCE_TYPE environment variable for the experienceTypeId
There was a problem hiding this comment.
Ya, I think the slug should be dynamic based on the route (see my previous comment).
For the locale, the other example apps are using built in i18n to detect a localeCode. Does gatsby have anything similar that we could use for providing the locale?
There was a problem hiding this comment.
It doesn't have anything for i18n like Next does. This probably falls under the nice to have category but ultimately falls under the responsibility of the end user to figure out. Similar to how if they want to integrate with tailwind, that's on them and not on us to show how to do.
Maybe some exceptions in the future will be when we have full-fledged tutorials and then point to an example that has bells and whistles.
But maybe we can do what you did with astro and add some config file that holds these values and can reference that instead.
| 3. **Create the Experience in the Contentful Experienecs UI** | ||
|
|
||
| In the settings tab of Experiences, ensure that your Slug field matches the slug in step 1. Save your changes and publish to see this Gatsby project hooked up with Contentful Experiences. |
There was a problem hiding this comment.
These steps may need to mention what Content Preview URL to configure. I can't figure it out. I tried:
http://localhost:8000-> shows the gatsby index page (not studio-enabled)http://localhost:8000/{entry.fields.slug}-> shows the 404 page (even though I hardcoded the slug variable in ExperienceSlugExample.tsx to match the slug of my experience and published it)
There was a problem hiding this comment.
I updated the README to make it work properly
| <main style={pageStyles}> | ||
| <h1 style={headingStyles}>Page not found</h1> | ||
| <p style={paragraphStyles}> | ||
| Sorry 😔, we couldn’t find what you were looking for. |
There was a problem hiding this comment.
I noticed (as I'm struggling to get the example running) that I'm seeing a 404 page but the content doesn't match this file. Any idea where the 404 content below comes from?
There was a problem hiding this comment.
I updated the README to make it work properly
| import { fetchById, detachExperienceStyles } from '@contentful/experiences-sdk-react'; | ||
| import { useContentfulClient } from '../utils/useContentfulClient'; | ||
|
|
||
| exports.createPages = async ({ graphql, actions, reporter }: any) => { |
There was a problem hiding this comment.
I get some errors when trying to run npm run build:
ERROR #11328 API.NODE.VALIDATION
The plugin "gatsby-plugin-page-creator" created a page without a valid default export.
This should create a static site with all those experiences prebuilt.
Ideally, this would create the experiences to follow the same routing structure as the other apps (www.mysite.com/{slug}) and create a page for each experience that is in the space being used.
ryunsong-contentful
force-pushed
the
ALT-1508
branch
from
3897c81 to
44316c7
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
2 times, most recently
from
c9e19be to
d64b984
Compare
ryunsong-contentful
force-pushed
the
ALT-1508
branch
from
d64b984 to
e9e0a61
Compare
Purpose
Add gatsby to the examples directory so that it can be used for the Gatsby dev doc guide.
There's two examples, one for SPA client side Gatsby apps and the other for SSG. The SSG has an additional file
gatsby-node.jsto polyfill the path import in order to run the project locally.Approach
Started a new gatsby project by doing the following steps
npm init gatsbyIntegrate with Experiences
npm i @contentful/experiences-sdk-reactexamples/gatsby/src/utils/useContentfulClient.jsfile to create the Contentful Client to hit the Contentful CDNexamples/gatsby/src/pages/experiences-slug-example.jswhich uses the Client to fetch the experience object and use the to render the Experience.