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:

It's the Blog Example from Bootstrap 4. I chose this because I love blogs and this example has enough components that need to get built out to make things interesting.

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.

If you need to refresh your React knowledge there's no better place to look than the React Documentation. Codecademy React 101 is pretty decent as well.

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.

Project Setup

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.