Getting Started with Gatsby and Cockpit — Part 2 of 2

The previous part was about setting up the project fetching the data from Cockpit and integrating them into pages. Now we will have a look on how to dynamically create project pages from Cockpit data. This Topic ist very well covered in the part 7 of Gatsby’s official tutorial so we won’t get too much into details.

Additionaly we will have a look on how to use Gatsby’s image processing features.

Use the data to dynamically create project pages

Programmatically creating the project pages has two steps:

1. Generate the “path” or “slug” for every project page.
2. Create the project page as a template.

Generate the “path” for every project page

To create our pages, we’ll use the createPages Gatsby API in the gatsby-node.js file. This API helps us to tell Gatsby about our pages — what are their paths, what template component do they use, etc.

We start with the GraphQL query to fetch the project slugs. Then we’re logging out the result. Copy the following lines into you gatsby-node.js file:

Fetch all Projects to Programmatically Create Project Pages

Run npm run develop in your terminal. It should get something like :

Screen Shot of the Console when Running `npm run develop`

Create the project page as a template

The other thing we need to create project pages is a page template component. Like everything in Gatsby, programmatic pages are powered by React components.

Create a directory at src/templates and then add the following in a file named src/templates/project.js.

Simple Project Page Template

Bring Slugs and template together

Then update gatsby-node.js to have following:

Final gatsby-node.js to Fetch Project Data and Create Project Pages Based on our Template

So we get back to the GraphQL query and for every node we create a page based on the template/project.js component. We pass the slug value to the content. With this slug value we will be able to fetch the project data in the template component.

Restart the development server and our pages will be created! An easy way to find new pages you create while developing is to go to a random path where Gatsby will helpfully show you a list of pages on the site. If you go to http://localhost:8000/sdf you’ll see an error page with a list of all available pages including the new project pages we created. This 404 Page is only available in Gatsby’s development mode.

Screen Shot of my 404 Page

If I click on a project I come to the project page. Which is a bit boring for now.

Screen Shot of ourProject Page

You can update the project.js template as we did with the home page in index.js. So we finally get following file:

src/templates/project.js File with the Project Content

Adding Images

As the gatsby-plugin-cockpit makes uses of the gatsby-source-filesystem, we can take advantage of the Gatsby image processing features. You can read the official gatsby-image documentation or do following:

Install the required plugins

npm install --save gatsby-image
npm install --save gatsby-transformer-sharp
npm install --save gatsby-plugin-sharp

Then in your gatsby-config.js:

plugins: [  
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `src`,
      path: `${__dirname}/src/`,
    },
  },
  ...
];

How to use

Update the GraphQL query and use the Gatsby Image Component. You can update the src/pages/index.js with following code:

New src/pages/index.js File making use of Gatsby Image Processing Features

Run npm run develop and you end up having a nice portfolio home page with lazy loading images and loading blury images first.

Thank you for reading this post. I hope it helped you getting started with Cockpit and Gatsby. You can find all the code of this guide in the GitHub repository. To go further with this example and use Cockpit Layout field in this Gatsby Project you can have a look on this repository.