solution • Gatsby.React on Netlify - martindubenet/wed-dev-design GitHub Wiki

[  React TypeScript coding  ][  React JSX templates  ][  React MUI component library  ][  Gatsby.React on Netlify  ]

Gatsby.React on Netlify

Gatsby is a React-based, open source static site generator that pulls in data using a GraphQL API layer that can connect to a wide array of content sources. It provides several key features that are beneficial for sites and apps, especially those built and deployed with Netlify… Read more

 

Setup a Gatsby project locally

Install Gatsby CLI globally

Installing it globally on my workstation allows us to use the cd MY_PROJECT && gatsby new to install Gatsby in « MY_PROJECT » via Terminal's command line.

npm install -g gatsby-cli

But I can also install Gatsby as a dependency to « MY_PROJECT » by instead using the basic install command npm i gatsby-cli from npmjs.com. But doing so I loose the benefit of the the API command lines.

Gatsby API commands

gatsby new, gatsby new, gatsby develop, gatsby build, gatsby serve, gatsby info, gatsby clean, gatsby repl.

All the documentation for the above commands is available in the tool by running « gatsby --help » within your Terminal.

Create your new Gatsby projet

Now using the installer from Gatsby CLI you just have to answer questions

gatsby new

Installer questions

  1. What would you like to call your site?
  2. What would you like to name the folder where your site will be created?
  3. Will you be using JavaScript or TypeScript? (boolean)
  4. Will you be using a CMS? (choose one)
  5. Would you like to install a styling system? (choose one)
  6. Would you like to install additional features with other plugins? (multiple choice)
    • Add the Google gtag script for e.g. Google Analytics
    • Add responsive images
    • Add an automatic sitemap
    • Generate a manifest file
    • Add Markdown and MDX support
    • Add Markdown support (without MDX)
    • Done

Set the Node version required via Multiple Node Version

You can find the required Node version for deploying in your Netlify site dasboard under Site configuration ➥ Build and Deploy ➥ Continuous deployment in the « Dependency management » section.

mnv install 18
mnv run 18

Install the node_modules 

npm install

Run your project locally

Compiles and serves a development build of your site that reflects your source code changes in the browser in real time.

gatsby develop

 

Optional ressources for Gatsby

  1. gatsby-plugin-react-helmet is a component which lets you control your document's <head> content like SEO meta tags using their React component.

 

Gatsby via Netlify plugin

Key features:

Content aggregation

Gatsby provides a diverse ecosystem of data plugins that allow developers to use a centralized GraphQL API to pull in content from files, APIs, and SaaS platforms. This makes development feel familiar, even if content sources are completely different.

Performance optimizations

By default, Gatsby optimizes JavaScript bundles, adds preloading and browser optimizations, and includes other performance enhancements. In general, Gatsby sites are performant and fast.

Image optimization

Gatsby ships an image component that works with the GraphQL data layer to generate highly optimized images. The images are lazy-loaded and configured for different viewport sizes. This cuts down on page load times and bandwidth usage. You can also use the Gatsby Image CDN on Netlify.

Serverless functions

Gatsby includes an integrated Functions feature to help create an API for a site or application.

Server-side rendering (SSR)** and deferred static generation (DSG)

You can choose between several rendering modes, including SSR and DSG. This means you can pick the rendering mode that makes sense for your site. To enable SSR rendering, Gatsby redirects, and asset caching rules, you must also install the Gatsby plugin gatsby-plugin-netlify. Here's how to install it:

  1. Add the package as a dependency.

    npm install -D gatsby-plugin-netlify

  2. Add gatsby-plugin-netlify to your gatsby-config.js file’s plugins array.

    module.exports = {
   plugins: ["gatsby-plugin-netlify"],
}

For more information, including optional plugin configuration, check out the gatsby-plugin-netlify docs.

When you link a repository for a Gatsby project, Netlify provides a suggested build command and publish directory: gatsby build and public. If you’re using the CLI to run Netlify Dev for a local development environment, Netlify suggests a dev command and port: gatsby develop and 8000. You can override suggested values or set them in a configuration file instead, but suggested values from automatic framework detection may help simplify the process of setting up a Gatsby site on Netlify.

For manual configuration, check out the typical build settings for Gatsby.

Sources

— Netlify's chatbot

 

Set-up multilingual (i18n) contents

At this moment it Gatsby does not offer a clean solution to support more then one language in a (Markdown) type of headless CMS website.

Dead simple internationalization with Gatsby + Netlify CMS

example.com/article
example.com/de/article

This answer on StackOverflow from Anastasiia Norenko seems like a great workaround. The author offers an example repo, a demo and an article on Medium

Gatsby Netlify i18n workaround

example.com/en/article
example.com/de/article

⚠ i18n workaround warning

This GitHub repo gatsby-netlify-i18n-workaround seems like a clean approach my only concerns is that this GitHub repository have NOT been updated since 2019 and that the gatsby-plugin-i18n it depends on last update dates back to 2021.

 

 

My wikis

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️