Menu
I have a React application that lives separately from the backend Rails API application and I would like to introduce a feature of putting the frontend app into maintenance mode and I can't come up with any good idea.
My client wants to have a button to click and so that when he clicks it, the app would go to a maintenance mode.
Since this is a React app, obviously the HTML is not rendered by any backend server (the backend API serves only for providing data to the frontend and as an admin panel) but by JS. I use react-router and I have many routes which render different components, those, in turn, make several API calls to the backend. I could put the backend in a maintenance mode and make the frontend app react on responses from the backend (503 Service Unavailable) but it would take a lot of effort and time since I'd have to modify all routes and sagas to make them react appropriately to the responses from the backend.
I am thinking of creating a separate branch holding just a maintenance page and have the customer to deploy this branch whenever he wants to instead of having the button to click. I've tried using Express.js middleware Maintenance but either it doesn't work or I don't know how to use it (I am pretty new to this). The app runs on an Express server on Node. How can I solve this problem?
348
I think your best bet would be to have a simple index.html page for the maintenance mode. Then simply swap the index.html and maintenance_index.html. This is great since it bypasses all React in case there is something broken in there.
I'm not sure about the environment you are using for that Express server but you could use Bash to swap the files quickly and easily:
$ mv index.html tmp_index.html && mv maintenance_index.html index.html && mv tmp_index.html maintenance_index.html
Simple maintenance html:
<!-- To use swap with index.html and invalidate web cache -->
<!DOCTYPE html>
<title>Site Maintenance</title>
<style>
body {
text-align: center;
padding: 20px;
}
@media (min-width: 768px) {
body {
padding-top: 150px;
}
}
h1 {
font-size: 50px;
}
body {
font: 20px Helvetica, sans-serif;
color: #333;
}
article {
display: block;
text-align: left;
max-width: 650px;
margin: 0 auto;
}
</style>
<article>
<h1>We’ll be back soon!</h1>
<div>
<p>
Sorry for the inconvenience but we’re performing some maintenance at the moment.We’ll be back online
shortly!
</p>
<p>— The XX Team</p>
</div>
</article>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
