User:Jayprakash12345/Integrating frontend and backend web app on toolforge

Problem

Many of web developers prefer to create and manage frontend and backend separately. Separating the backend and frontend components of a web application offers numerous advantages in terms of scalability, maintainability, and flexibility.

Since Toolforge offers one webapp deployment at same instance and you don't have much control over server configurations. So you need to create two tool on Toolforge like mytool and mytool-backend.

Now, Since frontend and backend webapp gets different URL so whenever frontend will make call to backend. There will be Cross-Origin Resource Sharing (CORS) issue. You can resolve this issue by using some packages or changing HTTP request/respoonse headers.

Example: Python's Flask has Flask-CORS library to resolve this issue.

This will work for most of the browser but but Safari :(

Safari browser has "Prevent cross site tracking" which does not send the session cookie in frontend's request. This make frontend to not work with backend

Solution

Solution the configure the reverse proxy from frontend to backend with some suffix like

mytool.toolforge.org/api ----> mytool-backend.toolforge.org

1. Deploy frontend at mytool

2. Deploy backend at mytool-backend (or whatenver)

3. Configure the reverse proxy from frontend to backend

3a. Create a phab task from here like phab:T337190 to bump the +1 service.

3b. Create reverse-proxy.yaml file in frontend with following content

---
# Service object for routing requests to bodh-backend.toolforge.org
apiVersion: v1
kind: Service
metadata:
  name: bodh-com
  namespace: tool-bodh
spec:
  type: ExternalName
  externalName: bodh-backend.toolforge.org
---
# Ingress object for routing requests to bodh-backend.toolforge.org
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: proxy-bodh-com
  namespace: tool-bodh
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/upstream-vhost: bodh-backend.toolforge.org
    nginx.ingress.kubernetes.io/backend-protocol: https
    nginx.ingress.kubernetes.io/proxy-ssl-server-name: "on"
    nginx.ingress.kubernetes.io/proxy-ssl-name: bodh-backend.toolforge.org
spec:
  rules:
    - host: bodh.toolforge.org
      http:
        paths:
          - backend:
              service:
                name: bodh-com
                port:
                  number: 443
            path: /api(/|$)(.*)
            pathType: ImplementationSpecific

3c. Now finally kubectl apply -f reverse-proxy.yaml

Note: Please make to update in code to use the "mytool.toolforge.org/api/<endpoint>" instead of "mytool-backend.toolforge.org/<endpoint>"

Credit

Thanks to User:BryanDavis and User:Arturo Borrero Gonzalez to help me figure out this and set up config.