# Backend frontend integration

**URL:** <https://community.traefik.io/t/backend-frontend-integration/19231>\
**Category:** Traefik v2\
**Tags:** file, docker\
**Created:** [July 14, 2023, 1:47pm UTC](https://community.traefik.io/t/backend-frontend-integration/19231 "2023-07-14T13:47:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Benevolens1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.traefik.io/benevolens1/32/7344_2.png) [@Benevolens1](https://community.traefik.io/u/Benevolens1)\
**Post date:** [July 14, 2023, 1:47pm UTC](https://community.traefik.io/t/backend-frontend-integration/19231/1 "2023-07-14T13:47:06Z")

</div>

Hello,

I have a web project, with backend and frontend. I try to containerize each part, and use traefik so that requests are redirected to frontend ; but if there is the '/api' prefix, it goes to backend. Here's my docker-compose :

```auto
services:
  fini-back:
    build: ./fini
    ports:
      - "3000:3000"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.fini-front.rule=PathPrefix(`/api`)"

  fini-front:
    build: ./fini-front
    ports:
      - "3002:3000"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.fini-front.rule=Host(`localhost`)"
      - "traefik.http.routers.fini-front.entrypoints=web"

  traefik:
    image: traefik:v2.10
    container_name: "traefik"
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"

    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

```

I also have this traefik.yml :

```auto
providers:
  docker: {}

```

How do I achieve my goal ?

---

<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:** [July 14, 2023, 7:55pm UTC](https://community.traefik.io/t/backend-frontend-integration/19231/2 "2023-07-14T19:55:38Z")

</div>

Check this [simple Traefik example](https://github.com/bluepuma77/traefik-best-practice/tree/main/docker-traefik-dashboard-letsencrypt).

Use a Docker network, assign all services to it, don’t expose ports on the target services, enable all required labels on target services, use different router and service names in labels per target service.

When using LetsEncrypt, make sure to use `Host()` in rule for domain certificate, for backend use `Host() && PathPrefix()`, that’s longer, has higher priority and will be checked for match first.