Gatsby Posts

post

Gatsby

Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.

Strapi CMS

Strapi is an open-source, Node.js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks.

Integrate Gatsby with Strapi

Install gatsby-source-strapi package

npm i gatsby-source-strapi

gatsby-config.js file

  • add the gatsby config file in the following code

plugins: [
    {
        resolve: `gatsby-source-strapi`,
        options: {
            apiURL: "your strapi server",
            contentTypes: ["restaurant"], //add your collections name
            queryLimit: 1000,
        }
    }
]

Now connect your gatsby website and strapi CMS

  • Here is an example of the GraphQL API query
import { StaticQuery, graphql } from 'gatsby';

const query = graphql`
  query {
    allStrapiRestaurant {
      edges {
        node {
          strapiId
          name
          description
        }
      }
    }
  }
`

const IndexPage = () => (
  <StaticQuery
    query={query}
    render={data => (
      <ul>
        {data.allStrapiRestaurant.edges.map(restaurant => (
          <li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
        ))}
      </ul>
    )}
  />
);

export default IndexPage;

Hope this helps.

September 24, 20212 minutesauthorVatsal Sakariya
post

What is a PWA?

A Progressive Web App (PWA) is a hybrid of a regular web page and a mobile application. A PWA combines features offered by most modern browsers with the benefits of the mobile experience. They are built using standard web technologies, including HTML, CSS, and JavaScript. The functionalities include working offline, push notifications, and device hardware access and enabling creating user experiences similar to native applications.

How to make a PWA

Following Below steps

  • Create an app manifest.json file
  • Add it to your base HTML template
  • Create the service worker
  • Serve the service worker on the root of the scope you used in the manifest
  • Add a block to your base HTML template file
  • Site deploy in your server

Create an App Manifest

  • Add the following information in 'manifest.json'
 {
    name: `Name`,
    short_name: `Sort name`,
    start_url: `/`,
    display: `standalone`,
    icon:  `Favicon icon`,
    icons: [
       {
        "src": "icon by size",
        "sizes": "144x144",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "icon by size",
        "sizes": "192x192",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "icon by size",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "maskable"
      }
    ],
  theme_color: `Theme color`,
  background_color: `Background color`,
  ]
 }
  • Manifest.json file in add this type of code including name, short_name, start_url, display, icon, icons, theme_color, background_color.

Add the Manifest to Your Base HTML Template

  • Add the following line in yore 'index' file

Create offline.html as an Alias to index.html

By default, the service worker code below will render /offline.html instead of any resource it can't fetch while offline. Create a file at /offline.html to give your user a more helpful error message, explaining that this data isn't cached and the user is offline.

Create a Service Worker

  • Create one file in yore root (sw.js)
  • Link the sw.js file in the body tag

We have created some pages like

  1. Home page (/)
  2. Blog page (/blog)
  3. Contact information (/contact)
  4. Resume (/resume)
  5. offline.html
  • Add the code in your sw.js file
self.addEventListener("install", function(event) {
   event.waitUntil(preLoad());
});

 var preLoad = function(){
  return caches.open("offline").then(function(cache) {
    return cache.addAll(["/blog/", "/blog", "/", "/contact", 
 "/resume", "/offline.html"]);
    });
 };

 self.addEventListener("fetch", function(event) { event.respondWith(checkResponse(event.request).catch(function() 
  {
     return returnFromCache(event.request);
   }));
   event.waitUntil(addToCache(event.request));
  });

  var checkResponse = function(request){
   return new Promise(function(fulfill, reject) {
     fetch(request).then(function(response){
       if(response.status !== 404) {
         fulfill(response);
       } else {
         reject();
       }
     }, reject);
   });
  };

  var addToCache = function(request){
   return caches.open("offline").then(function (cache) {
     return fetch(request).then(function (response) {
       console.log(response.url + " was cached");
       return cache.put(request, response);
     });
   });
  };

  var returnFromCache = function(request){
   return caches.open("offline").then(function (cache) {
     return cache.match(request).then(function (matching) {
      if(!matching || matching.status == 404) {
        return cache.match("offline.html");
      } else {
        return matching;
      }
     });
   });
  };
  • Servicer worker file add your body tag

load the service worker file in

<script>
   if (!navigator.serviceWorker.controller) {
   navigator.serviceWorker.register("/sw.js").then(function(reg) {
         console.log("Service worker has been registered for scope: " + reg.scope);
     });
 }
 </script>

Last step

  • Deploy code in yore live site
  • Create lighthouse report and check PWA
July 28, 20214 minutesauthorVatsal Sakariya
post

We have recently developed a site into the gatsby.

We have a blog site and hosted it on a different domain but now we want to move to one place at our main site. now, we have challenges for displaying dynamic blogs on the gatsby site.

Finally, I found that gatsby provides support to render dynamic blogs as a static page. when build created that time fetch the blogs from the server and create a static page for all the blogs.

Gatsby is a very good platform and manages such a kind of thing easily.

So, I will show you how to create static pages from the API response into the Gatsby site.

Here are the steps you need to follow correctly.

Steps 1

Create a one blog file where you want to load a blog in your design.

For an ex. I created a file `blog/index.js` inside the component directory and the code looks like this,


Steps 2

Open a file `gatsby-node.js`

Declare the const for the API URL at the beginning of the file.

const blogURL = 'http://blog-api.com/api/posts';

We need to create an instance of the  `node-fetch` for fetching a data from API server.

const fetch = require(`node-fetch`);
Import the path for a resolve the page while creating a static page.
const path = require('path');
See the example how to create a static page from APIs. code look's like,
exports.createPages = (async ({graphql, actions}) => {
    const blogs = await fetch(blogURL);
    blogs.data.forEach((blog) => {
        createPage({
            path: 'blog/' + blog.slug,
            component: path.resolve(`./src/components/blog/index.js`),
            context: {
                // Data passed to context is available
                // in page queries as GraphQL variables.
                slug: blog.slug,
                blog: blog,
            },
        })
    })
Now we are done, and you can access blogpage via slug.


November 12, 20201 minuteauthorShailesh Ladumor
post

We have recently developed a site into the gatsby. We want to add Google Analytics to the website.

So, this is the way we implemented Google Analytics in the Gatsby site.

Use Gatsby Google GTag Plugin

Gatsby has a plugin gatsby-plugin-google-gtag that be used to easily add Google Global Site Tag to your Gatsby site.

Install the package by running the following command:

npm i gatsby-plugin-google-gtag --save

Configuration

Once the installation is complete, you can now add this plugin to your gatsby-config.js:

Configure trackingIds and other options. Add this into the plugins array. Like,

module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
              // You can add multiple tracking ids and a pageview event will be fired for all of them.
              trackingIds: [
                "GA-TRACKING_ID", // Google Analytics / GA
                "AW-CONVERSION_ID", // Google Ads / Adwords / AW
                "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
              ],
              // This object gets passed directly to the gtag config command
              // This config will be shared across all trackingIds
              gtagConfig: {
                optimize_id: "OPT_CONTAINER_ID",
                anonymize_ip: true,
                cookie_expires: 0,
              },
              // This object is used for configuration specific to this plugin
              pluginConfig: {
                // Puts tracking script in the head instead of the body
                head: false,
                // Setting this parameter is also optional
                respectDNT: true,
                // Avoids sending pageview hits from custom paths
                exclude: ["/preview/**", "/do-not-track/me/too/"],
              },
      },
    },
  ],
}

This plugin automatically sends a “pageview” event to all products given as “trackingIds'' on every Gatsby's route change.

If you want to call a custom event you have access to window.gtag where you can call an event for all products.

Check out this code.

typeof window !== "undefined" && window.gtag("event", "click", { ...data })

NOTE: This plugin only works in production mode! To test your Global Site Tag is installed and

You need to run the following command for firing events correctly.

gatsby build && gatsby serve

If you need to exclude any path from the tracking system, you can add one or more to this optional array.

November 22, 20202 minutesauthorShailesh Ladumor
post

We have recently developed a site into the gatsby. Basically, the contact us feature is common on all websites. and we are implementing Mailchimp because it's a very popular platform in the email market. So, I will show you how to set up a Mailchimp on the Gatsby site.

Using gatsby-source-mailchimp

Use your Mailchimp API key to download your campaigns into Gatsby’s GraphQL data layer! Install the package by running the following command: npm i gatsby-source-mailchimp --save. How to configure Once the installation is complete, you can now add this plugin to your gatsby-config.js, like so: Configure mailchimp Key and add this {resolve: gatsby-source-mailchimp} into the plugins array. code looks like

module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-source-mailchimp',
      options: {
        // Avoid including your key directly in your file.
        // Instead, opt for adding them to .env files for extra
        // security ;)
        key: 'asd712jdas90122jdas90122jkadsd1-usXX',
        rootURL: 'https://usXX.api.mailchimp.com/3.0',
      },
    },
  ],
  // ...
}

This plugin was made out of a specific necessity, so it doesn't cover all of Mailchimp’s data sources, focusing only on campaigns.

This plugin provides few options. you can refer here

Using .env variables to hide your key

If you don’t want to attach your API key to the repo, you can easily store it in .env files by doing the following:

// In your .env file
MAILCHIMP_KEY = 'asd712jdas90122jdas90122jkadsd1-usXX';

// In your gatsby-config.js file
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-source-mailchimp',
      options: {
        key: process.env.MAILCHIMP_KEY,
        rootURL: '[https://usXX.api.mailchimp.com/3.0',](https://usxx.api.mailchimp.com/3.0%27,)
        // ...
      },
    },
  ],
  // ...
};
October 31, 20201 minuteauthorShailesh Ladumor