# Serve reactapp under pathprefix

**URL:** <https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656>\
**Category:** Traefik v2\
**Tags:** cli, middleware\
**Created:** [December 1, 2023, 12:55pm UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656 "2023-12-01T12:55:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![xmanag3r](https://avatars.discourse-cdn.com/v4/letter/x/e47c2d/32.png) [@xmanag3r](https://community.traefik.io/u/xmanag3r)\
**Post date:** [December 1, 2023, 12:55pm UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/1 "2023-12-01T12:55:50Z")

</div>

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 :

```auto
[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](http://mydomain.com) not under [MyDomain Login](http://mydomain.com/login) and read it from the backend host. Is there something that I'm missing?

---

<div class="post-metadata">

**Author:** ![bluepuma77](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@bluepuma77](https://community.traefik.io/u/bluepuma77)\
**Post date:** [December 1, 2023, 3:30pm UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/2 "2023-12-01T15:30:24Z")

</div>

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()`?

---

<div class="post-metadata">

**Author:** ![xmanag3r](https://avatars.discourse-cdn.com/v4/letter/x/e47c2d/32.png) [@xmanag3r](https://community.traefik.io/u/xmanag3r)\
**Post date:** [December 1, 2023, 3:34pm UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/3 "2023-12-01T15:34:30Z")

</div>

Hi, thanks for the response.

I want to host something different on the main domain.

I have added this middleware :

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

```

And all content under /login is getting reading correctly.

But when I visit the actual site [MyDomain Login](http://mydomain.com/login) , if I open the console it's still getting read from the base path /

---

<div class="post-metadata">

**Author:** ![bluepuma77](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@bluepuma77](https://community.traefik.io/u/bluepuma77)\
**Post date:** [December 1, 2023, 3:39pm UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/4 "2023-12-01T15:39:16Z")

</div>

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

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.

---

<div class="post-metadata">

**Author:** ![xmanag3r](https://avatars.discourse-cdn.com/v4/letter/x/e47c2d/32.png) [@xmanag3r](https://community.traefik.io/u/xmanag3r)\
**Post date:** [December 1, 2023, 3:45pm UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/5 "2023-12-01T15:45:39Z")

</div>

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](http://mydomain.com) will have other pages that will be called from other backends

but on [MyDomain Login](http://mydomain.com/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](https://us1.discourse-cdn.com/flex020/uploads/containo/original/2X/5/559c147149a47ab9a76e23b7c7672e578ad87038.png)

But if I access directly [mydomain.com/login/src/App.tsx](http://mydomain.com/login/src/App.tsx), I'm getting the file opened successfully.

---

<div class="post-metadata">

**Author:** ![bluepuma77](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@bluepuma77](https://community.traefik.io/u/bluepuma77)\
**Post date:** [December 2, 2023, 8:48am UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/6 "2023-12-02T08:48:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![xmanag3r](https://avatars.discourse-cdn.com/v4/letter/x/e47c2d/32.png) [@xmanag3r](https://community.traefik.io/u/xmanag3r)\
**Post date:** [December 4, 2023, 9:19am UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/7 "2023-12-04T09:19:13Z")

</div>

Do you mean the different backend domain?

---

<div class="post-metadata">

**Author:** ![bluepuma77](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@bluepuma77](https://community.traefik.io/u/bluepuma77)\
**Post date:** [December 4, 2023, 10:38am UTC](https://community.traefik.io/t/serve-reactapp-under-pathprefix/20656/8 "2023-12-04T10:38:34Z")

</div>

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