# How to serve docker-compose app (react-flask) using Kong?

**URL:** <https://discuss.konghq.com/t/how-to-serve-docker-compose-app-react-flask-using-kong/1492>\
**Category:** Questions\
**Created:** [July 18, 2018, 1:32am UTC](https://discuss.konghq.com/t/how-to-serve-docker-compose-app-react-flask-using-kong/1492 "2018-07-18T01:32:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maitray\_Shah](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Maitray\_Shah](https://discuss.konghq.com/u/Maitray_Shah)\
**Post date:** [July 18, 2018, 1:32am UTC](https://discuss.konghq.com/t/how-to-serve-docker-compose-app-react-flask-using-kong/1492/1 "2018-07-18T01:32:59Z")

</div>

I have a docker-compose application combining ReactJS, Flask, and MongoDB.  
(Kong noob here)

```auto
├── Makefile
├── docker-compose-dev.yml
├── docker-compose-prod.yml
└── services
    ├── flask_server 
    ├── react_ui 
    ├── nginx 
    └── swagger 

```

I used Nginx as a reverse proxy for deployment and it works well.

But I came across Kong API Gateway and it looks great because of the plugins and integrations. So I wanted to understand (if possible) how can I serve my react frontend and the whole application using kong instead of nginx.

---

<div class="post-metadata">

**Author:** ![kikito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discuss.konghq.com/kikito/32/15_2.png) [@kikito](https://discuss.konghq.com/u/kikito)\
**Post date:** [July 18, 2018, 10:30am UTC](https://discuss.konghq.com/t/how-to-serve-docker-compose-app-react-flask-using-kong/1492/2 "2018-07-18T10:30:06Z")

</div>

Hi,

Kong _is_ an Nginx instance, so you could definitively replace your Nginx instance with a Kong instance.

The biggest hurdles would be:

- Kong uses a database (PostgreSQL or Cassandra) in order to store state. You would have to include a database in your setup so Kong can use it. Please give a look at the [Docker installation guide](https://docs.konghq.com/install/docker/).
- You would have to translate your custom Nginx reverse-proxy settings to Kong configurations. Depending on how complex they are, this could take some work, or be very straightforward.

---

<div class="post-metadata">

**Author:** ![Maitray\_Shah](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Maitray\_Shah](https://discuss.konghq.com/u/Maitray_Shah)\
**Post date:** [July 18, 2018, 4:51pm UTC](https://discuss.konghq.com/t/how-to-serve-docker-compose-app-react-flask-using-kong/1492/3 "2018-07-18T16:51:08Z")

</div>

It would be awesome if you could point me to a tutorial or documentation. I found this link - [https://docs.konghq.com/0.11.x/configuration/#serving-both-a-website-and-your-apis-from-kong](https://docs.konghq.com/0.11.x/configuration/#serving-both-a-website-and-your-apis-from-kong) which seems similar.

As for my nginx conf for now, I think its pretty simple as of now.

```
server {

  listen 80;

  location / {
    proxy_pass http://react_ui:80;
    proxy_redirect default;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
  }

  location /cargo {
    proxy_pass http://flask_server:5000;
    proxy_redirect default;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
  }

  location /swagger {
    proxy_pass http://swagger:8080;
    proxy_redirect default;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
  }
}

```

And when react app is built, I copy over my built html file to nginx - Dockerfile

```
FROM nginx:1.15.0-alpine

RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

```

default.conf

```
server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root /usr/share/nginx/html;
  }
}

```

If you want you can look at the code - [https://github.com/maitray16/Cargo](https://github.com/maitray16/Cargo) that should give you a fair idea of how its setup as of now.

---

<div class="post-metadata">

**Author:** ![niko47](https://yyz2.discourse-cdn.com/flex036/user_avatar/discuss.konghq.com/niko47/32/3135_2.png) [@niko47](https://discuss.konghq.com/u/niko47)\
**Post date:** [December 7, 2021, 4:48pm UTC](https://discuss.konghq.com/t/how-to-serve-docker-compose-app-react-flask-using-kong/1492/4 "2021-12-07T16:48:47Z")

</div>

Regarding the translation of nginx reverse-proxy settings to Kong configurations, how do the proxy\_set\_header directives get translated to Kong environment variables? Thanks