Serve reactapp under pathprefix

Traefik Traefik v2 (latest)
,
1

Hello, i have react app running on local server, and what I'm trying to achieve it's to get listen on specific path /login.

Somehow it's reaching the backend but the content is trying to get served on the top-level of the domain :

Here is my dynamic config :

[http.routers.login]
rule = "Host(`mydomain.com`) && PathPrefix(`/login`)"
entryPoints = ["web"]
service = "FE"
middlewares = ["FE"]

[http.services]
[http.services.FE]
    [http.services.FE.loadBalancer]
    serversTransport = "APP2"
    [[http.services.FE.loadBalancer.servers]]
    url = "http://localhostforreactapp:3000"

[http.serversTransports.APP2]
  insecureSkipVerify = true
[http.serversTransports.APP2.forwardingTimeouts]
  responseHeaderTimeout = "40s"
  dialTimeout = "40s"

[http.middlewares]
  [http.middlewares.FE2]
  [http.middlewares.FE.headers]
    accessControlAllowMethods= ["GET", "OPTIONS", "PUT", "DELETE", "PATCH"]
    accessControlAllowHeaders= "*"
    accessControlAllowOriginList = "*"
    accessControlMaxAge = 100
    addVaryHeader = true
   [http.middlewares.FE.headers.customrequestheaders]
    Host = "mydomain.com"





[[tls.certificates]]
  certFile = "/opt/zero-downtime/config/ssls/cert.pem"
  keyFile = "/opt/zero-downtime/config/ssls/certkey.pem"

When I try to visit my website, it's partially loaded, and trying to get the files from the top level of the domain mydomain.com not under MyDomain Login and read it from the backend host. Is there something that I'm missing?

2

The Traefik router is responsible for matching an incoming request. You configuration is only active for Host() with PathPrefix(), otherwise you will get a "not found". That happens also for scripts and images which might be loaded from a different path like /.

What's the difference between login and the rest, why can't the router just use Host()?

3

Hi, thanks for the response.

I want to host something different on the main domain.

I have added this middleware :

   [http.middlewares.LoginStrip.stripPrefix]
  prefixes = ["/login"]

And all content under /login is getting reading correctly.

But when I visit the actual site MyDomain Login , if I open the console it's still getting read from the base path /

4

You are running a react app, that's a complicated beast with a lof af JS and dependencies :slight_smile:

Can you describe again what you want to achieve?

Is your login app native path /login or is it /?

Check on the browser's console network tab what files are loaded when running only login app.

5

Thanks again @bluepuma77

I'm trying to achieve this :

I have a local application host on a local machine on port 3000 and the reactapp is running successfully on path /

on mydomain.com will have other pages that will be called from other backends

but on MyDomain Login I want to call that localhost:3000 react app.

I'm successfully calling, but the paths of their core files are being pointed to / of my domain.

console
console1910×114 16.5 KB

But if I access directly mydomain.com/login/src/App.tsx, I'm getting the file opened successfully.

6

From my experience this usually does not work. Apps are mostly build with absolute paths for redirects, scripts and images.

So if it does not specifically support something like a "base path", it will not work. Even if you can access the page with /login, it might require a JS from /js, so the "login" context is lost.

The common solution is to use a different sub-domain, so the app can use the root path.

7

Do you mean the different backend domain?

8

Instead of Host(`mydomain.com`) && PathPrefix(`/login`) use Host(`login.mydomain.com`)