Smoothly Transitioning Into Maintenance Mode with Vite and React

jwald1 — Wed, 07 Feb 2024 23:27:44 +0000

Hi everyone!

I successfully set up maintenance mode in a recent project with Vite and React. I'm eager to share my insights and experiences on this topic.

We'll begin with a basic approach and then explore an advanced technique in the next post.

Let's set an environment variable, like "UNDER_MAINTENANCE," to a positive value.

Next, we'll create a simple component to display when the application is undergoing Maintenance. Let's call this the "Maintenance" component. Here's a simple setup:

//Maintenance.jsx

const Maintenance = () => {
  return (
    <div>
      <h1>We are currently under Maintenance.</h1>
      <p>Please check back soon.</p>
    </div>
  );
};

export default Maintenance;

This component is straightforward, but feel free to enhance it with your branding and any extra information you want to include.

After handling the component, let's implement it in our app.

The approach includes displaying the Maintenance component conditionally, depending on the value of the process.env.UNDER_MAINTENANCE environment variable. In the application's entry point, usually the main.jsx, we can incorporate a straightforward check to decide which component to show.

Here's a basic example:

// main.jsx
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import "./index.css"
import Maintenance from './Maintenance';

// Double-bang (!!) converts process.env.UNDER_MAINTENANCE to a boolean
const isUnderMaintenance = !!process.env.UNDER_MAINTENANCE;

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {isUnderMaintenance ? <Maintenance /> : <App />}
  </React.StrictMode>
)

During the build process, Vite replaces process.env.UNDER_MAINTENANCE with its actual value. For instance, if the value is 'true', the output will be 'true', and the double-bang operator !! will convert it to a boolean, subsequently rendering the Maintenance component.

That's a very basic approach. In the next post, I'll show you how to build it with a custom plugin.

DEV Community: jwald1

Smoothly Transitioning Into Maintenance Mode with Vite and React