Creating Components for Your Stackbit Site

2021 Update
As we, finally, prepare to leave 2020 in our dust and never look back… I have some good news that came out of this year. All of the concepts from the original article hold true but now Stackbit has introduced features and functionality on their side that will allow you to edit and customize your site more easily:

Stackbit has continued to evolve and some of the things shown here in 2019 no longer look or work the same going into 2021. There are two major changes to be aware of. The biggest change is the addition of the Stackbit Studio, which will allow you to edit the quotes without needing to log into NetlifyCMS. Also, the theme has been updated and uses a few different internal naming conventions when it did when I built my site. If you are implementing this here in the future, please refer to this and reach out to the Stackbit team for help.

Enjoy and happy coding!

The awesome thing about JAMstack is how quickly and easily you can create and modify entire sites. In the first article of this series, From Zero to Web App in Under 60 Seconds, we used Stackbit to generate and deploy a full site in one minute. At this point, you had a live website with the ability to update basic text and layouts via Netlify CMS… but we wanted to dive into the code and make some real changes. So, in the second article, we cloned our newly generated site to our computers, made a quick change, and pushed the code back to GitHub where the changes were automatically detected and deployed.

Maybe I’m a nerd. No one’s arguing that! But, if you’re note stoked about the speed and ease with which we’ve been able to generate, deploy, and update a JAMstack site then you either haven’t tried this in the past or you don’t fully understand the possibilities… and I suppose it’s impossible to fully understand them, because they are endless. The part that I’m most excited about is rapid prototyping.

For free, and almost instantaneously, you can create a full website which is now your playground. The site that we built (I say “we” but it was really Stackbit doing the heavy lifting) in the first article has components pre-built for us, but we want to test out some ideas or just make something cool so we’re going to create our own. So, fire up VSCode, or your editor of choice, and let’s get down to business.

Leveraging Technology
You’ve heard it a million times and you’ll hear it a million times more, because it’s true: don’t reinvent the wheel. We didn’t when we initially created our sites, and we shouldn’t as we add to them.

For this example, I’m going to add a component to the homepage of my site. This will be a “quote carousel” which is essentially just single panels of text that will come in and out of view by sliding left or right. In order to avoid reinventing the wheel, I’m going to utilize react-slick carousel instead of building a new one from scratch.

If you haven’t already, pull the latest code from your GitHub repo and, if you’re collaborating on this project, you can follow the third article to sync and create a new branch. Then, I’m going to install react-slick and its CSS files by running the following commands:

npm i react-slick
npm i slick-carousel

Creating the Component
When I develop new components, I prefer to do it incrementally to ensure that I’m on the right path to where I want to go. So, I’ll begin by creating a new component within the components folder. At first, I’ll create a basic layout and use static values. In the image below, you can see I’m just mapping an array of numbers for each of my panels instead of populating with actual quotes.

After creating the basic component, I exported it from the components index file (components > index.js) and added it as a section to the homepage markdown file (pages > index.md).

Remember, much of this will change. For right now, I just want to get to a point where I can see how it looks and acts in the browser, and I’m now at a point where I can run the following command and view the initial version at http://localhost:8000/:

npm run develop

And here’s what we see:

Adding the Data
I’ve got a pretty decent looking component and it’s functioning as expected. Remember, you can always make adjustments later. Now, I’m going to add the data that this component will be pulling from.

To do this, I begin by creating an extremely simple .yml file that will eventually contain the quotes. For now, I’ll continue to use generic content.

Next, I’ll add a reference to this file in the config file (static > admin > config.yml) so that I can use the data from my new component as seen below. I’ve also added it to the stackbit config file (stackbit.yaml) in case I want to add/update quotes through the Netlify CMS interface in the future instead of having to pull the code from GitHub, update it, and then push. We’ll come back to this at the end and you’ll definitely want to test it out!

Using the Data
Now that I have my initial quote data entered and configured, I can use it from the QuoteCarousel component. From within the component, follow the pattern I have used below.

const quotes = get(props, ‘pageContext.site.data.quotes.items’);

Note: You will need to restart the app for the changes to take place:

npm run develop

And now we see, our quotes from the quotes.yml file!

Final Touches
Looks pretty good!

I love quotes and I keep a running list, so I’ve got quite a few. I want to make sure people can see all of them, not just the first five. So, I’m going to use Lodash shuffle to randomize the order of the quotes each time the component is loaded. Then, I’m going to add in some of the actual quotes and push my changes back to GitHub.

Stackbit will automatically detect and deploy my updates once the code has been pushed, and I can see my new component directly on the live site.

Now, the Cool Part!
Since I set up the Stackbit.yaml file with the “quotes” configuration as shown above in the Adding the Data section, I can add or edit my quotes directly in Netlify CMS. I can access the Quotes Configuration as seen below.

From here, I just have to add quotes and click publish.

And my new quotes will be added to the site (below). Also, I can use this data anyway that I want. So, if I want to have a static page showing a list of all the quotes instead of waiting for one to scroll by, I can access the data in the same way that I did for the carousel component. But, remember, whenever you make changes in Netlify, you need to “git pull” the updates before you start working locally… which is good practice anyway!