DEV Community

jwald1
jwald1

Posted on

Smoothly Transitioning Into Maintenance Mode with Vite and React

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;
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay