In this tutorial, we will see how we can add maintenance mode to our React Application via Netlify using their Split-Testing deployment strategy. It can also be used for Slow rollouts, rollbacks, etc.

Maintainance mode is helpful when you are deploying some site and you have associated other applications dependency and you don't want to make users annoyed by releasing half changes onto PRODUCTION.

So during PRODUCTION, you will like to show some kind of maintenance page until you want to give the go-ahead to make the site back LIVE. Obviously, this is useful if you can have a downtime of a few minutes depending on application criticality. Else for the more critical application, you will go with other deployment strategies like Blue-Green deployment, A/B deployment, etc. which we will cover soon.

This blog is specifically on how to use maintenance mode in Netlify which has become one of the leading providers to serve SPA via Angular, Vue, React, etc. but can be extended a lot more deployment strategies like Blue-Green, etc.

Pre-requisites:

• Complete initial step to host ReactJS application via Netlify as per this part of a blog.

Maintainance Mode using Split Testing Deployment Strategy

Netlify uses Split Testing deployment strategy to route traffics to different deployment which in our case with be branching deployment co-relating to different branches in your repository be it Github, Gitlabs, Bitbucket.

Application Changes

Let's start, we will clone our main (PRODUCTION) branch from our repository we created as part of the blog which is part of pre-requisites.

git clone git@github.com:cycorax12/react-netlify.git

Now we will create a new branch out of it, named maintenance using the below command

git checkout -b maintenance

We will just keep maintenance information in App.js of our ReactJS application which is a container component, within our maintenance branch as below

import './App.css';

function App() {
  return (   
        <article>
            <h1>Site is temporarily unavailable.</h1>
            <p>Scheduled maintenance is currently in progress. Please check back soon.</p>
            <p>We apologize for any inconvenience.</p>
            <p id="signature">&mdash; <a href="mailto:[Email]">[Name]</a></p>
        </article>
  );
}
export default App;

Test application once on localhost using maintenance branch and then push it to a remote server, so Netlify can read for our further changes.

Netlify Changes

Let's Visit our Netlify dashboard, select an existing Site or create a new one as per your need with main as the PRODUCTION branch, I have created a new one to link my repository.

Post deploy of "main", check if the site is LIVE, we look good.

Now we first need to pull in the new branch maintenance branch into our Netlify site.

To do that,

Go to Site Settings --> Build & Deploy --> Branches --> Edit Settings --> Branch deploys --> Let me add individual branches

Add new branch maintenance in Additional branches and Save.

Just Save the above settings, then make a commit git push to maintenance branch so new deploy gets triggered automatically as below.

Once the build is successful as above, we can individually view that branch changes apart from the LIVE site page before we make it LIVE to the public by clicking on the build which was triggered, and then Click on Preview, you will get random URL for that branch so we can make sure all UI changes are fine before we make it LIVE as below.

Preview of maintenance before making it LIVE

Split Testing changes

Now that our both branches are successfully deployed, we can start Split Testing which is also maintenance mode or something very special Rollback which can be achieved using the same strategy :)

Go to Split Setting, from that Site navigation bar as below, if you have more than 1 branch it will show you to activate or what they call Test it

As we are testing maintenance mode, so I will Split 0 and 100 in favor of maintenance mode as below so all traffic is routed to the maintenance branch. This number on the slider represents the percentage of traffic:

And now Click Start Test

Now if you visit your PRODUCTION SITE URL which is same as site name, you will see the maintenance page as below:

Now if you want to activate the main site back, post successful publish of code to main branch, followed by successful deploy and preview, we just update the Split test back to 100 in favor of the main branch as below

The site is back live now.

I really like this feature, it's not just about maintenance, you can Split Test in case of rollback within seconds, or you want to release say Beta Features for only 25% of users you can set the test in the required form based on percentage split by branches you have.

Give it a try and let me know.

Resouces

• Netlify Split Testing
• Source Code for Blog

Thank you for reading, If you have reached it so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback and suggestions!

I would love to connect with you at Twitter | LinkedIn.