GatsbyJS 3 (Static site generator)

Simple pet-project generated using gatsby-starter-hello-world starter & Strapi Backend & Formspree contact form service

DEMO link of Frontend deployed on Netlify

• Image From External (CDN) Media Storage At Cloudinary
• Backend for Content and About page => GitHub repo => localhost:1337
• Backend for Contact page => Formspree
• Frontend deployed on Netlify => public folder

localhost:8000 version of Frontend requires localhost:1337 => run Backend: Back-end GitHub repo

---

• Gatsby 3.0
• Quick Start
• Gatsby Starters
• Hello world starter
• Gatsby Plugin Library
• React icons
• gatsby-plugin-image
• Migrating from gatsby-image to gatsby-plugin-image
• Gatsby Image plugin
• Completely Free online photo editing
• Strapi Quick Start Guide
• gatsby-source-strapi
• Getting Started with Gatsby
• prop-types
• react-markdown
• gatsby-plugin-webfonts
• gatsby-plugin-react-helmet
• Adding an Seo Component
• Card Validator - Twitter cards
• gatsby-plugin-sitemap

---

Requirements:

• Node.js
• Strapi
• Formspree & feel free today!
• Netlify
• Favicon

---

Run in terminal

npm i

Or install Gatsby project manually:

npm i -g gatsby-cli
gatsby --version
npm install -g npm@7.10.0
gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
gatsby clean
gatsby develop

Check the result:

• localhost:8000
• localhost:8000/___graphql

---

Deployment

Using CI + localhost Strapi backend:

15:06:33	error "gatsby-source-strapi" threw an error while running the sourceNodes lifecycle:
15:06:33	connect ECONNREFUSED 127.0.0.1:1337
15:06:33	
15:06:33	  Error: connect ECONNREFUSED 127.0.0.1:1337
15:06:33	
15:06:33	not finished source and transform nodes - 0.104s
15:06:34	npm ERR! code ELIFECYCLE
15:06:34	npm ERR! errno 1
15:06:34	npm ERR! gatsby-starter-hello-world@0.1.0 build: `gatsby build`
15:06:34	npm ERR! Exit status 1
15:06:34	npm ERR! 
15:06:34	npm ERR! Failed at the gatsby-starter-hello-world@0.1.0 build script.
15:06:34	npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
15:06:34	npm ERR! A complete log of this run can be found in:
15:06:34	npm ERR!     /vercel/.npm/_logs/2021-05-07T12_06_34_397Z-debug.log

So, you need to Deploy backend project first or Build project locally and push build public folder to:

• Netlify
• or
• Vercel

---

---

Kick back & Relax

---

---

Make sure such content-types exist in your Strapi application. Or replace/delete them in gatsby-config.js Make changes, restart the server

{  
  resolve: `gatsby-source-strapi`,
    options:  {
    apiURL: `http://localhost:1337`,
      queryLimit: 1000, // Default to 100
      contentTypes: [`jobs`, `projects`, `blogs`],
      singleTypes: [`about`],
  },
},

Strapi backend

Clone the repo or Run in terminal in separate directory

npx create-strapi-app gatsby_02-strapi_api --quickstart

Check the result:

localhost:1337/admin

---

If you're having this error, simply downgrade your node version to LTS if you're above it. link

 ERROR 

(node:7460) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module
resolution of the package at *\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".