If you've read some of my posts in the past, you might have noticed I really like GraphQL and have explored using it a few different ways. From just using the endpoint, extending it, and even generating static sites with GatsbyJS with it. I think it's a great feature and I love that it's built into Sitecore JSS.
But it's time to start exploring the other features Sitecore JSS brings to the table. I think the best way to do that is to just build something. This is going to be a series that was partially inspired by this thread on Twitter.
I think it's a great format for a series and hopefully will be approachable. There are some other people following this format as well and you should definitely check out their work. I'll be following along with their progress as well and posting other community resources that I find along the way.
I'm not going to be starting from zero though. I'll be starting from the React sample and building from that.
Let's talk about it
So here's what we're going to build:
I won't be covering any basic React syntax or how to initialize your Sitecore JSS project here. You've probably already done that already somewhere along the way. There are also so many other great guides out there that already. This series will just focus on building and shipping one piece of a project at a time.
These guides will ultimately end up being developer logs for implementing certain features. My intention is to build certain features and then tag my GitHub repository for each blog post, so it's obvious what happened where.
Which brings me to my first GitHub tag: initial.
If you want to follow along, you could just pull the repository on GitHub or run through the Getting Started section on JSS.
Here are some delete commands for clearing out all of the default components that come with the React sample. Who knows, it might save you a minute.
rm src/components/Styleguide* rm src/components/GraphQL* rm sitecore/definitions/components/Styleguide* rm sitecore/definitions/templates/Styleguide* rm sitecore/definitions/components/GraphQL* rm data/component-content/Styleguide rm data/content/Styleguide rm data/routes/styleguide rm data/routes/graphql rm data/dictionary/*.yml
We'll aim to stay in disconnected mode for as long as makes sense as well. I'm guessing it'll get tricky when we start getting into some of the listing pages where we'll most likely need GraphQL to build those out. We'll cross that bridge when we get there.