NGINX temporary redirection with Angular app

I’m building an Angular app that has a ‘maintenance’ page (a simple static page in case there is ongoing maintenance on the backend API).

I have an NGINX reverse proxy that serves the Angular app with the current configuration:

location / {
  root /sites/mysite/;
  try_files $uri $uri/ /index.html;
}

When switching to “maintenance mode,” I want all traffic to be redirected to domain.com/maintenance.

I understand that there are two simple solutions:

  1. Have the redirection configured inside the Angular router. However, this means that for every switch, the entire website needs to be rebuilt and pushed to the server. So, I’m trying to avoid this.
  2. Create a standalone static HTML/CSS maintenance page outside the Angular app. However, this approach would prevent me from leveraging all the existing UI components.

Therefore, what I’m thinking is to achieve it by changing the NGINX configuration to redirect the traffic. However, I can’t figure out if it’s possible because an Angular app is a Single Page Application (SPA).

Read more here: Source link