Build process part 1: Gatsby
The build process relies on two key config files that are used to source the content from the Strapi CMS and then build the static pages.
gatsby-config contains the configuration for several Gatsby plugins. gatsby-source-strapi is used to pull the content from Strapi and make this available to the Gatsby GraphQL on the client-side.
...
{
singularName: "slideshow",
queryParams: {
populate: {
slideshow_set: {
populate: {
slideshow_slide: "*",
populate: {
slide_image: "*",
},
},
},
},
},
gatsby-node is responsible for creating all the static pages and other content components.
Content is queried and populated from the data that is now available in Gatsby's GraphQL. Filters can be applied to the queries and nodes populated as required.
const slideshowsEn = await graphql(`
{
allStrapiSlideshow(filter: { locale: { eq: "en" } }) {
nodes {
title
slug
id
locale
}
}
}
`);
The content data once queried can then be used to generate static pages using templates and the data for the individual nodes passed as data to the pages.
slideshowsEn.data.allStrapiSlideshow.nodes.map((slideshowData) =>
createPage({
path: "en/slideshow/" + slideshowData.slug,
component: path.resolve(`src/templates/slideshow-en.js`),
context: {
SlideshowId: slideshowData.id,
unitsEn: unitsEn,
},
})
);
The template for this example: src/templates/slideshow-en.js
The Gatsby build generated is a functional web-based version of the app that can be deployed as a static website if desired and all content pages can be viewed via a web browser. Their are several functions that require the native app version to work and are therefore not available in the web version - these are covered in part 2.