DEV Community

Cover image for Setup Gatsby with Strapi in M1 Mac
Truemark Technology profile image Prabin Poudel
Prabin Poudel for Truemark Technology

Posted on • Originally published at prabinpoudel.com.np

Setup Gatsby with Strapi in M1 Mac

#gatsby #strapi

Setting up Gatsby with Strapi is straight forward, but while I was setting it up in M1 Mac, I encountered errors maybe due to software support issues as M1 is relatively new in the market right now. It took some time for me to figure out solutions and I want to save your day. Let's setup the Gatsby blog with Strapi now!

Apart from error and solutions, every step I mention in this blog is from the tutorial in the official strapi website.

Step 1: Install node v14

During the time I wrote this blog, v15 was the latest node version but not supported by strapi.

In command line type the following:

nvm install 14.16.0
Enter fullscreen mode Exit fullscreen mode

Step 2: Install yarn 

npm install --global yarn
Enter fullscreen mode Exit fullscreen mode

Step 3: Create strapi-blog folder

Create a folder to store the backend (strapi) and frontend (gatsby) part of the blog. Following command will create a folder and move inside it.

take strapi-blog

# above command is short for

mkdir strapi-blog
cd strapi-blog
Enter fullscreen mode Exit fullscreen mode

Step 4: Setup strapi with template 

yarn create strapi-app backend --quickstart --template https://github.com/strapi/strapi-template-blog
Enter fullscreen mode Exit fullscreen mode

There you go, we encounter our first error:

Error

ERR! sharp Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8

Solution

Ref: Fix from github repo of sharp library

Install vips with brew 
brew install vips
Enter fullscreen mode Exit fullscreen mode

It took me around 14 minutes for it to install in my machine.

Install sharp 
npm i sharp
Enter fullscreen mode Exit fullscreen mode
Remove backend folder

When you run command to setup strapi with template, it creates backend folder to add all related files and folder for strapi to it. When you run the command again, you will strapi will complain that backend folder should be empty so let's empty it before strapi can even complain.

rm -rf backend
Enter fullscreen mode Exit fullscreen mode
Run the command to setup strapi project again 
yarn create strapi-app backend --quickstart --template https://github.com/strapi/strapi-template-blog
Enter fullscreen mode Exit fullscreen mode

Command should run without any issue now.

Step 5: Setup admin user for strapi dashboard

As soon as the strapi setup is complete, dashboard will open in the browser and you will see the sign up page to setup the admin user.

Add necessary details and we won't need to deal with strapi anymore, apart from running the server for now.

Step 6: Setup Gatsby

Install gatsby cli 

yarn global add gatsby-cli
Enter fullscreen mode Exit fullscreen mode

Move out of backend folder

We need to setup gatsby project in separate folder so if you are inside backend folder, first you will have to move out from there

cd ..
Enter fullscreen mode Exit fullscreen mode

Create gatsby project

Now you should be inside strapi-blog, run the following command to setup new gatsby project

gatsby new frontend
Enter fullscreen mode Exit fullscreen mode

Error

wasm code commit Allocation failed - process out of memory

Solution
Switch to node v15

This issue is specifically in node v14 so switch to v15. If you haven't installed it in your machine yet, you can do so with following commands

# install node v15
nvm install 15.0.0

# use v15 locally
nvm use 15.0.0
Enter fullscreen mode Exit fullscreen mode

Installation took around 10 minutes in my machine and I could hear the fan from Mac loudly (lol).

Run the command to setup gatsby project again 
gatsby new frontend
Enter fullscreen mode Exit fullscreen mode

Now the project should setup without any issue.

Step 7: Create .env file inside your gatsby project root 

# move to gatsby project
cd frontend

# create .env file inside the project root
nano .env
Enter fullscreen mode Exit fullscreen mode

Add following to the file:

GATSBY_ROOT_URL=http://localhost:8000
API_URL=http://localhost:1337
Enter fullscreen mode Exit fullscreen mode

Step 8: Setup strapi for gatsby

Install gatsby-source-strapi 

yarn add gatsby-source-strapi
Enter fullscreen mode Exit fullscreen mode

Replace the content of gatsby-config.js with the following 

require("dotenv").config({
 path: `.env`,
});

module.exports = {
 plugins: [
   "gatsby-plugin-react-helmet",
   {
     resolve: `gatsby-source-filesystem`,
     options: {
       name: `images`,
       path: `${__dirname}/src/images`,
     },
   },
   {
     resolve: "gatsby-source-strapi",
     options: {
       apiURL: process.env.API_URL || "http://localhost:1337",
       contentTypes: ["article", "category", "writer"],
       singleTypes: [`homepage`, `global`],
       queryLimit: 1000,
     },
   },
   "gatsby-transformer-sharp",
   "gatsby-plugin-sharp",
   {
     resolve: `gatsby-plugin-manifest`,
     options: {
       name: "gatsby-starter-default",
       short_name: "starter",
       start_url: "/",
       background_color: "#663399",
       theme_color: "#663399",
       display: "minimal-ui",
       icon: `src/images/gatsby-icon.png`
     },
   },
   "gatsby-plugin-offline",
 ],
};
Enter fullscreen mode Exit fullscreen mode

Step 9: Replace the content of src/components/seo.js with the following: 

import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";

const SEO = ({ seo = {} }) => {
  const { strapiGlobal } = useStaticQuery(query);
  const { defaultSeo, siteName, favicon } = strapiGlobal;

  // Merge default and page-specific SEO values
  const fullSeo = { ...defaultSeo, ...seo };

  const getMetaTags = () => {
    const tags = [];

    if (fullSeo.metaTitle) {
      tags.push(
        {
          property: "og:title",
          content: fullSeo.metaTitle,
        },
        {
          name: "twitter:title",
          content: fullSeo.metaTitle,
        }
      );
    }
    if (fullSeo.metaDescription) {
      tags.push(
        {
          name: "description",
          content: fullSeo.metaDescription,
        },
        {
          property: "og:description",
          content: fullSeo.metaDescription,
        },
        {
          name: "twitter:description",
          content: fullSeo.metaDescription,
        }
      );
    }
    if (fullSeo.shareImage) {
      const imageUrl =
        (process.env.GATSBY_ROOT_URL || "http://localhost:8000") +
        fullSeo.shareImage.publicURL;
      tags.push(
        {
          name: "image",
          content: imageUrl,
        },
        {
          property: "og:image",
          content: imageUrl,
        },
        {
          name: "twitter:image",
          content: imageUrl,
        }
      );
    }
    if (fullSeo.article) {
      tags.push({
        property: "og:type",
        content: "article",
      });
    }
    tags.push({ name: "twitter:card", content: "summary_large_image" });

    return tags;
  };

  const metaTags = getMetaTags();

  return (
    <Helmet
      title={fullSeo.metaTitle}
      titleTemplate={`%s | ${siteName}`}
      link={[
        {
          rel: "icon",
          href: favicon.publicURL,
        },
        {
          rel: "stylesheet",
          href: "https://fonts.googleapis.com/css?family=Staatliches",
        },
        {
          rel: "stylesheet",
          href:
            "https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/css/uikit.min.css",
        },
      ]}
      script={[
        {
          src:
            "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js",
        },
        {
          src:
            "https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/js/uikit-icons.min.js",
        },
        {
          src: "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.js",
        },
      ]}
      meta={metaTags}
    />
  );
};

export default SEO;

SEO.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  article: PropTypes.bool,
};

SEO.defaultProps = {
  title: null,
  description: null,
  image: null,
  article: false,
};

const query = graphql`
  query {
    strapiGlobal {
      siteName
      favicon {
        publicURL
      }
      defaultSeo {
        metaTitle
        metaDescription
        shareImage {
          publicURL
        }
      }
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

Step 10: Style the blog

Create src/assets/css/main.css file and add the following:

a {
  text-decoration: none !important;
}

h1 {
  font-family: Staatliches !important;
  font-size: 120px !important;
}

#category {
  font-family: Staatliches !important;
  font-weight: 500 !important;
}

#title {
  letter-spacing: 0.4px !important;
  font-size: 22px !important;
  font-size: 1.375rem !important;
  line-height: 1.13636 !important;
}

#banner {
  margin: 20px !important;
  height: 800px !important;
}

#editor {
  font-size: 16px !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

.uk-navbar-container {
  background: #fff !important;
  font-family: Staatliches !important;
}

img:hover {
  opacity: 1 !important;
  transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
}
Enter fullscreen mode Exit fullscreen mode

Step 11: Remove useless components/pages

In command line, type the following:

rm src/components/header.js src/components/layout.css  src/pages/page-2.js src/pages/using-typescript.tsx
Enter fullscreen mode Exit fullscreen mode

Step 12: Replace the content of pages/index.js with the following code 

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import Layout from "../components/layout";
import "../assets/css/main.css";

const IndexPage = () => {
  const data = useStaticQuery(query);

  return (
    <Layout seo={data.strapiHomepage.seo}>
      <div className="uk-section">
        <div className="uk-container uk-container-large">
          <h1>{data.strapiHomepage.hero.title}</h1>
        </div>
      </div>
    </Layout>
  );
};

const query = graphql`
  query {
    strapiHomepage {
      hero {
        title
      }
      seo {
        metaTitle
        metaDescription
        shareImage {
          publicURL
        }
      }
    }
  }
`;

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

Step 13: Replace the content of components/layout.js with the following code 

import React from "react";
import PropTypes from "prop-types";
import { StaticQuery, graphql } from "gatsby";
import Seo from "./seo";

const Layout = ({ children, seo }) => (
  <StaticQuery
    query={graphql`
      query {
        strapiHomepage {
          seo {
            metaTitle
            metaDescription
            shareImage {
              publicURL
            }
          }
        }
      }
    `}
    render={(data) => (
      <>
        <Seo seo={seo} />
        <main>{children}</main>
      </>
    )}
  />
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;
Enter fullscreen mode Exit fullscreen mode

Step 14: Create a ./src/components/nav.js with the following code

From code editor, create a new file and add the following:

import React from "react";
import { Link, StaticQuery, graphql } from "gatsby";

const Nav = () => (
  <StaticQuery
    query={graphql`
      query {
        strapiGlobal {
          siteName
        }
        allStrapiCategory {
          edges {
            node {
              slug
              name
            }
          }
        }
      }
    `}
    render={(data) => (
      <div>
        <div>
          <nav className="uk-navbar-container" data-uk-navbar>
            <div className="uk-navbar-left">
              <ul className="uk-navbar-nav">
                <li>
                  <Link to="/">{data.strapiGlobal.siteName}</Link>
                </li>
              </ul>
            </div>
            <div className="uk-navbar-right">
              <button
                className="uk-button uk-button-default uk-margin-right"
                type="button"
              >
                Categories
              </button>
              <div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000">
                <ul className="uk-nav uk-dropdown-nav">
                  {data.allStrapiCategory.edges.map((category, i) => (
                    <li key={`category__${category.node.slug}`}>
                      <Link to={`/category/${category.node.slug}`}>
                        {category.node.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    )}
  />
);

export default Nav;
Enter fullscreen mode Exit fullscreen mode

Step 15: Import and use Nav component inside components/layout.js

Replace the code inside components/layout.js with the following:

import React from "react";
import PropTypes from "prop-types";
import { StaticQuery, graphql } from "gatsby";
import Nav from "./nav";
import Seo from "./seo";

const Layout = ({ children, seo }) => (
  <StaticQuery
    query={graphql`
      query {
        strapiHomepage {
          seo {
            metaTitle
            metaDescription
            shareImage {
              publicURL
            }
          }
        }
      }
    `}
    render={(data) => (
      <>
        <Seo seo={seo} />
        <Nav />
        <main>{children}</main>
      </>
    )}
  />
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;
Enter fullscreen mode Exit fullscreen mode

Step 16: Blog listing UI

Install gatsby-image 

npm install gatsby-image
Enter fullscreen mode Exit fullscreen mode

NOTE

Tutorial in official strapi site is using gatsby-image which has already been deprecated but we will not update in this blog.

Deprecation Note

Create a new file components/card.js and add following code 

import React from "react";
import { Link } from "gatsby";
import Img from "gatsby-image";

const Card = ({ article }) => {
 return (
   <Link to={`/article/${article.node.slug}`} className="uk-link-reset">
     <div className="uk-card uk-card-muted">
       <div className="uk-card-media-top">
         <Img
           fixed={article.node.image.childImageSharp.fixed}
           imgStyle={{ position: "static" }}
         />
       </div>
       <div className="uk-card-body">
         <p id="category" className="uk-text-uppercase">
           {article.node.category.name}
         </p>
         <p id="title" className="uk-text-large">
           {article.node.title}
         </p>
         <div>
           <hr className="uk-divider-small" />
           <div className="uk-grid-small uk-flex-left" data-uk-grid="true">
             <div>
               {article.node.author.picture && (
                 <Img
                   fixed={article.node.author.picture.childImageSharp.fixed}
                   imgStyle={{ position: "static", borderRadius: "50%" }}
                 />
               )}
             </div>
             <div className="uk-width-expand">
               <p className="uk-margin-remove-bottom">
                 {article.node.author.name}
               </p>
             </div>
           </div>
         </div>
       </div>
     </div>
   </Link>
 );
};

export default Card;
Enter fullscreen mode Exit fullscreen mode

Create a new file components/articles.js and add following code 

import React from "react";
import Card from "./card";

const Articles = ({ articles }) => {
 const leftArticlesCount = Math.ceil(articles.length / 5);
 const leftArticles = articles.slice(0, leftArticlesCount);
 const rightArticles = articles.slice(leftArticlesCount, articles.length);

 return (
   <div>
     <div className="uk-child-width-1-2@s" data-uk-grid="true">
       <div>
         {leftArticles.map((article, i) => {
           return (
             <Card
               article={article}
               key={`article__left__${article.node.slug}`}
             />
           );
         })}
       </div>
       <div>
         <div className="uk-child-width-1-2@m uk-grid-match" data-uk-grid>
           {rightArticles.map((article, i) => {
             return (
               <Card
                 article={article}
                 key={`article__right__${article.node.slug}`}
               />
             );
           })}
         </div>
       </div>
     </div>
   </div>
 );
};

export default Articles;
Enter fullscreen mode Exit fullscreen mode

Replace the code inside pages/index.js with the following 

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import Layout from "../components/layout";
import ArticlesComponent from "../components/articles";
import "../assets/css/main.css";

const IndexPage = () => {
 const data = useStaticQuery(query);

 return (
   <Layout seo={data.strapiHomepage.seo}>
     <div className="uk-section">
       <div className="uk-container uk-container-large">
         <h1>{data.strapiHomepage.hero.title}</h1>
         <ArticlesComponent articles={data.allStrapiArticle.edges} />
       </div>
     </div>
   </Layout>
 );
};

const query = graphql`
 query {
   strapiHomepage {
     hero {
       title
     }
     seo {
       metaTitle
       metaDescription
       shareImage {
         publicURL
       }
     }
   }
   allStrapiArticle(filter: { status: { eq: "published" } }) {
     edges {
       node {
         strapiId
         slug
         title
         category {
           name
         }
         image {
           childImageSharp {
             fixed(width: 800, height: 500) {
               src
             }
           }
         }
         author {
           name
           picture {
             childImageSharp {
               fixed(width: 30, height: 30) {
                 src
               }
             }
           }
         }
       }
     }
   }
 }
`;

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

Start gatsby app

To see what we have been building up till now, start the gatsby app and view the blog:

gatsby develop
Enter fullscreen mode Exit fullscreen mode

Step 17: Article Page

Install react-markdown and react-moment 

yarn add react-markdown react-moment moment
Enter fullscreen mode Exit fullscreen mode

Replace the content inside gatsby.node.js with following code 

exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
   const result = await graphql(
     `
       {
         articles: allStrapiArticle {
           edges {
             node {
               strapiId
               slug
             }
           }
         }
       }
     `
   );
    if (result.errors) {
     throw result.errors;
   }
    // Create blog articles pages.
   const articles = result.data.articles.edges;
    const ArticleTemplate = require.resolve("./src/templates/article.js");
    articles.forEach((article, index) => {
     createPage({
       path: `/article/${article.node.slug}`,
       component: ArticleTemplate,
       context: {
         slug: article.node.slug,
       },
     });
   });
 };
  module.exports.onCreateNode = async ({ node, actions, createNodeId }) => {
   const crypto = require(`crypto`);
    if (node.internal.type === "StrapiArticle") {
     const newNode = {
       id: createNodeId(`StrapiArticleContent-${node.id}`),
       parent: node.id,
       children: [],
       internal: {
         content: node.content || " ",
         type: "StrapiArticleContent",
         mediaType: "text/markdown",
         contentDigest: crypto
           .createHash("md5")
           .update(node.content || " ")
           .digest("hex"),
       },
     };
     actions.createNode(newNode);
     actions.createParentChildLink({
       parent: node,
       child: newNode,
     });
   }
 };
Enter fullscreen mode Exit fullscreen mode

Create a file src/templates/article.js with the following code 

import React from "react";
import { graphql } from "gatsby";
import Img from "gatsby-image";
import Moment from "react-moment";
import Layout from "../components/layout";
import Markdown from "react-markdown";

export const query = graphql`
 query ArticleQuery($slug: String!) {
   strapiArticle(slug: { eq: $slug }, status: { eq: "published" }) {
     strapiId
     title
     description
     content
     publishedAt
     image {
       publicURL
       childImageSharp {
         fixed {
           src
         }
       }
     }
     author {
       name
       picture {
         childImageSharp {
           fixed(width: 30, height: 30) {
             src
           }
         }
       }
     }
   }
 }
`;

const Article = ({ data }) => {
 const article = data.strapiArticle;
 const seo = {
   metaTitle: article.title,
   metaDescription: article.description,
   shareImage: article.image,
   article: true,
 };

 return (
   <Layout seo={seo}>
     <div>
       <div
         id="banner"
         className="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding uk-margin"
         data-src={article.image.publicURL}
         data-srcset={article.image.publicURL}
         data-uk-img
       >
         <h1>{article.title}</h1>
       </div>

       <div className="uk-section">
         <div className="uk-container uk-container-small">
           <Markdown source={article.content} escapeHtml={false} />

           <hr className="uk-divider-small" />

           <div className="uk-grid-small uk-flex-left" data-uk-grid="true">
             <div>
               {article.author.picture && (
                 <Img
                   fixed={article.author.picture.childImageSharp.fixed}
                   imgStyle={{ position: "static", borderRadius: "50%" }}
                 />
               )}
             </div>
             <div className="uk-width-expand">
               <p className="uk-margin-remove-bottom">
                 By {article.author.name}
               </p>
               <p className="uk-text-meta uk-margin-remove-top">
                 <Moment format="MMM Do YYYY">{article.published_at}</Moment>
               </p>
             </div>
           </div>
         </div>
       </div>
     </div>
   </Layout>
 );
};

export default Article;
Enter fullscreen mode Exit fullscreen mode

Since we edited gatsby-node.js, we will need to restart the gatsby server to view the new changes. You should be able to view the blog detail page now.

In command line where gatsby server is running, do the following:

# stop the server
control + c

# run the gatsby server again
gatsby develop
Enter fullscreen mode Exit fullscreen mode

Step 18: Blog Category Page

Create a file src/templates/category.js with the following code 

import React from "react";
import { graphql } from "gatsby";
import ArticlesComponent from "../components/articles";
import Layout from "../components/layout";

export const query = graphql`
 query Category($slug: String!) {
   articles: allStrapiArticle(
     filter: { status: { eq: "published" }, category: { slug: { eq: $slug } } }
   ) {
     edges {
       node {
         slug
         title
         category {
           name
         }
         image {
           childImageSharp {
             fixed(width: 660) {
               src
             }
           }
         }
         author {
           name
           picture {
             childImageSharp {
               fixed(width: 30, height: 30) {
                 ...GatsbyImageSharpFixed
               }
             }
           }
         }
       }
     }
   }
   category: strapiCategory(slug: { eq: $slug }) {
     name
   }
 }
`;

const Category = ({ data }) => {
 const articles = data.articles.edges;
 const category = data.category.name;
 const seo = {
   metaTitle: category,
   metaDescription: `All ${category} articles`,
 };

 return (
   <Layout seo={seo}>
     <div className="uk-section">
       <div className="uk-container uk-container-large">
         <h1>{category}</h1>
         <ArticlesComponent articles={articles} />
       </div>
     </div>
   </Layout>
 );
};

export default Category;
Enter fullscreen mode Exit fullscreen mode

Replace the content inside gatsby.node.js with the following code 

exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
   const result = await graphql(
     `
       {
         articles: allStrapiArticle {
           edges {
             node {
               strapiId
               slug
             }
           }
         }
         categories: allStrapiCategory {
           edges {
             node {
               strapiId
               slug
             }
           }
         }
       }
     `
   );
    if (result.errors) {
     throw result.errors;
   }
    // Create blog articles pages.
   const articles = result.data.articles.edges;
   const categories = result.data.categories.edges;
    const ArticleTemplate = require.resolve("./src/templates/article.js");
    articles.forEach((article, index) => {
     createPage({
       path: `/article/${article.node.slug}`,
       component: ArticleTemplate,
       context: {
         slug: article.node.slug,
       },
     });
   });
    const CategoryTemplate = require.resolve("./src/templates/category.js");
    categories.forEach((category, index) => {
     createPage({
       path: `/category/${category.node.slug}`,
       component: CategoryTemplate,
       context: {
         slug: category.node.slug,
       },
     });
   });
 };
  module.exports.onCreateNode = async ({ node, actions, createNodeId }) => {
   const crypto = require(`crypto`);
    if (node.internal.type === "StrapiArticle") {
     const newNode = {
       id: createNodeId(`StrapiArticleContent-${node.id}`),
       parent: node.id,
       children: [],
       internal: {
         content: node.content || " ",
         type: "StrapiArticleContent",
         mediaType: "text/markdown",
         contentDigest: crypto
           .createHash("md5")
           .update(node.content || " ")
           .digest("hex"),
       },
     };
     actions.createNode(newNode);
     actions.createParentChildLink({
       parent: node,
       child: newNode,
     });
   }
 };
Enter fullscreen mode Exit fullscreen mode

Restart the gatsby server to view new changes

In command line where gatsby server is running, do the following:

# stop the server
control + c

# run the gatsby server again
gatsby develop
Enter fullscreen mode Exit fullscreen mode

You should now be able to view blogs listed by specific category.

Conclusion

Congratulations, you have successfully setup a gatsby blog with strapi. There was a small issue that I encountered after setting up the blog; in blog listing page, featured images of blog were not loading properly while they were loading correctly in the page where blogs are listed by category. Let me know how it goes for you!

Thanks for reading, if you have any confusion or suggestion, please comment below. See you soon in next blog!

References

Top comments (0)

Read next

melanyss profile image

From Bartender to Developer: My Self-Taught Journey in Tech

Melanys -

madsenmm profile image

I created a visually pleasing HTML color viewer

Tobias Mønster Madsen -

longtth profile image

setup discord server làm Communication Hub cho dự án

Long Nguyễn Xuân -

mohamed_zahi_00 profile image

422 Error with @jwt_required() in Flask App Deployed on VPS with Nginx

Mohamed Zahi -