Traefik redirect external domain for developing react app

Traefik Traefik v2
1

Hello,

I am new to traefik and i am trying to find solution for my problem but after a lot of googling i can't find anything.

I would like the following :

I launch a react app that after login it does redirect to a domain name let's say www.example.com. In windows we change hosts file in we add that when www.example.com do 127.0.0.1.

I want to do the exact same thing in docker container traefik because we have some people develop in linux and the setup for the proxy/localhost is way different.

I tried the following script but when i go to browser and type www.example.com it does redirect me to the official site and not the localhost one i have running on my machine.

version: '3.7'

services:

  traefik:
    image: traefik:v2.3.1
    ports:
      - 80:80
      - 443:443
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
    command:
      - --log.level=INFO
      - --api

      - --providers.docker.exposedbydefault=false
      
      - --entrypoints.web.address=:80
      - --entrypoints.web.http.redirections.entryPoint.to=websecure
      - --entrypoints.web.http.redirections.entrypoint.scheme=https

      - --entrypoints.websecure.address=:443
      - --entrypoints.websecure.http.tls=true
    labels:
      traefik.enable: 'true'

      # Dashboard
      traefik.http.routers.traefik.rule: Host(`traefik.localhost`)
      traefik.http.routers.traefik.service: api@internal

      # Redirection from https://abc.localhost (or http://abc.localhost) to https://xyz.localhost
      traefik.http.routers.domain.rule: Host(`abc.localhost`)
      traefik.http.routers.domain.service: noop@internal
      traefik.http.routers.domain.middlewares: to_xyz
      traefik.http.middlewares.to_xyz.redirectregex.regex: ^http://example.com/(.*)
      traefik.http.middlewares.to_xyz.redirectregex.replacement: https://xyz.localhost/$$1

  # just to have xyz.localhost
  reactui:
        build: .
        environment:
            - CHOKIDAR_USEPOLLING=true
            - CI=true
        ports:
            - 3000:3000
        labels:
          traefik.enable: true
          traefik.http.routers.reactui.rule: Host(`xyz.localhost`)

What more i need to do?

This all thing we need to do is for development of the react app and the callback url can't be changed so we do all this.