Azure Question posted in
The official documentation to get you started can be found here.

How deployment downtime maintenance page enabled/disabled for React APP in azure?

I want to enable/disable maintenance page for my react application in Azure without deployment.

Approach followed:
added one variable in .env file (REACT_APP_IS_MAINTENANCE_PAGE_ENABLED= 0) and same key in App settings of Environment variables in azure App, but unable to read value from environment variable from Azure App service.
How can we achieve this?

please suggest any other approaches if this won’t work.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Achieved using Deployment Slots. Steps followed:

    1. New Deployment Slot created and deployed maintenance Page.enter image description here Changing deployment slot Traffic% Percentage to 100%, whenever down time is required.

    enter image description here


  2. 0

    I have manually added a toggle button between the maintenance page and regular content without fetching from an external source. It worked locally and in the Azure web app.

    Code :

    src/components/App.js :

    import React, { useState } from 'react';
import MaintenancePage from './MaintenancePage';

const App = () => {
  const [isMaintenancePageEnabled, setIsMaintenancePageEnabled] = useState(false);

  const toggleMaintenancePage = () => {
    setIsMaintenancePageEnabled(!isMaintenancePageEnabled);
  };

  return (
    <div>
      <button onClick={toggleMaintenancePage}>
        Toggle Maintenance Page ({isMaintenancePageEnabled ? 'Enabled' : 'Disabled'})
      </button>
      {isMaintenancePageEnabled ? (
        <MaintenancePage />
      ) : (
        <div>
          <h1>Welcome to the App!</h1>
        </div>
      )}
    </div>
  );
};

export default App;

    src/components/maintenancePage.js :

    import React from 'react';

const MaintenancePage = () => {
  return (
    <div>
      <h1>Maintenance Page</h1>
      <p>Sorry, we are currently undergoing maintenance. Please check back later.</p>
    </div>
  );
};

export default MaintenancePage;

    Output :

    I was able to build and run the react app successfully using below commands,

    npm run build

    npm start

    enter image description here
    enter image description here

    I got the below output with the port 3000. Then, I clicked on Toggle Maintenance Page(Disabled) to get the maintenance page as below,

    enter image description here

    I could enable and disable the maintenance page using the below toggle button as below,

    enter image description here

    Then, I deployed my build folder to Azure web app as below,

    enter image description here

    I could enable and disable the maintenance page using the toggle button** in the Azure web app below.

    enter image description here

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search