My Blog

Category: Uncategorized

  • Client-side environment variables

    With regard to environment variables that need to be available in the client-side JavaScript bundle generated by Gatsby, it’s a best practice to create an environment configuration file, which carries the prefix .env and usually an extension that identifies the environment in question. For a development environment, this takes the form .env.development, whereas for a production environment, the form is .env.production.…

  • Defining Environment Variables

    Environment variables in Gatsby can be placed: In client-side JavaScript through environment configuration files, as we’ve seen in previous sections In server-side Node.js implementations via infrastructure providers like Netlify, operating systems, or command-line executions of NPM scripts Let’s take a closer look at client-side environment variables and server-side environment variables in turn.

  • Environment Variables

    Gatsby developers can use environment variables to provide values that need to be distinct across development environments. They are most commonly used to obfuscate certain information that may be sensitive and should not be exposed to others. Some environments require different information to customize behavior in those environments. Others, for security reasons, need to ensure certain…

  • Deploying Gatsby

    Once you’ve done the work to spruce up your codebase (through best practices for testing and debugging your Gatsby site), it’s time to push your site into production so your users can begin to interact with your Gatsby implementation. Because it’s an SSG at its core, there are several aspects of Gatsby that require some…

  • Conclusion

    Getting a Gatsby site ready to go live in production isn’t just a matter of putting the finishing touches on implementation. During the development process, it’s often the case that small bugs or larger issues creep into code that can stymie even the best-planned development cycle. For this reason, Gatsby provides a robust set of…

  • Debugging Asynchronous Lifecycle Methods

    For Gatsby developers who are used to previous paradigms of JavaScript programming, the introduction of specific syntax for asynchronicity into JavaScript may be a rude awakening. As of Node.js v8, Node.js can natively handle the async and await keywords, which are used to identify functions that should be treated asynchronously but are written as if they were synchronous. The async and await keywords are…

  • Debugging Cache Issues

    Gatsby contains its own internal cache that is used to accelerate plugin handling, and especially the data sourcing process. Sometimes the Gatsby cache can fail, manifesting in strange and perhaps silent errors involving stale content, where the most up-to-date content doesn’t display despite an upstream content update, and recent modifications to plugin code that don’t appear…

  • Debugging Server-Side Rendering Issues

    Gatsby performs server-side rendering as part of its build process to facilitate faster page loads on the browser. Hooking into this rendering process involves creating or modifying the gatsby-ssr.js file. One of the server-side rendering APIs commonly leveraged during the build process is the replaceRenderer API, which can be used to customize or otherwise adjust the ways in which Gatsby renders…

  • Debugging the Build Process

    Because both the gatsby build and gatsby develop scripts are technically Node.js applications at their core, you can debug issues that occur within the execution of those scripts using commonly available standard approaches and tools for Node.js application development. Using Node.js debugging tools can be useful for situations where you need to identify a problem area in a gatsby-node.js file or another…

  • Debugging Static Builds

    Because Gatsby’s static build process ultimately generates a series of HTML files that maximize the speed at which Gatsby sites load in the browser, some issues can be difficult to diagnose. In many cases, issues surrounding static builds involve inaccessible globals or Webpack bundling issues. The Gatsby documentation outlines four specific cases that are common in…