Custom Maintenance Page with Gatsby

In today's fast moving world adaptability is a must, especially with technology. As important as it is to get a site up and running as quickly as possible, it is equally important to shut it down. Whether it is a bug that you need to fix or a new implementation you would like to add, going into a maintenance mode is a necessity. Here is a simple and quick solution that you can add into your own development using Gatsby.

Step 1.

Assuming you already have your Gatsby project created, we will start by adding a new file to the pages folder under src/ entitled maintenance.js. This will serve as the page that you point to in later steps. After you create the new file, go ahead and add the following code:

import * as React from "react"
import Layout from "../components/layout"

const MaintenancePage = () => (
  <Layout>
    <div>
      <h1>Maintenance Page</h1>
    </div>
  </Layout>
)

export default MaintenancePage

For now we will just use a boilerplate for this example.

Step 2.

Next, we will set up a .env file to control our variable of whether or not we are in maintenance. Start by adding a file to the project’s top layer folder entitled .env.development.

In this file all you have to add is the following:

IN_SITE_MAINTENANCE=true

In this example IN_SITE_MAINTENANCE will be the variable we read, but in order to read this variable we need to add a few lines to our gatsby-config.js. Add these three lines to the top of the gatsby-config.js file:

require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`, })

Step 3.

After you have the variable ready to use, locate your gatsby-browser.js file inside the project’s top layer folder. In this file we will first add Gatsby’s onClientEntry method. This method will allow whatever you code to run once someone accesses your site:

exports.onClientEntry = () => { console.log("We've started!") }

Now within this method there are two things that we need to check for. The first is whether the maintenance variable is true or not. Second, whether the site is already on the maintenance page. These can be done with the simple if statement of:

exports.onClientEntry = () => {
  if(process.env.IN_SITE_MAINTENANCE === "true" && window.location.pathname !== '/maintenance'){
    window.location = '/maintenance';
  }
}

You can see that if the variable is true and we are not on the maintenance page, the window location is then set to “/maintenance”, which brings us to the maintenance page.

Step 4.

Now even though we are going to the maintenance page when the site loads, the rest of the site is still accessible through any links in your header or footer. So to account for that we have two options. One is to disable all links within the components that are displayed or two add another method. In this example we will add the additional gatsby method of onRouteUpdate:

exports.onRouteUpdate = () => {
  if(process.env.IN_SITE_MAINTENANCE === "true" && window.location.pathname !== '/maintenance'){
    window.location = '/maintenance';
  }
}

As you can see, we use the if statement as before, but in this use case whenever a link is clicked on the site the onRouteUpdate is triggered and resets the url path to the maintenance page.

And there you have it. A quick and simple solution to adding a maintenance page to your very own gatsby site.