title: How to use Docker container name for URL endpoint in React app when building app with docker-compose?
body: <p>Recently I'm working with a MERN stack application. Then I have a docker-compose.yml look like this:</p>
  <pre><code>version: &quot;3&quot;
  
  services:
    web:
      build: ./concept.io-frontend
      ports:
        - &quot;80:80&quot;
      depends_on:
        - api
      networks:
        - network.concept.io
      container_name: concept.io
    api:
      build: ./concept.io-backend
      restart: always
      ports:
        - &quot;5328:5328&quot;
      depends_on:
        - db
      networks:
        - network.concept.io
      container_name: api.concept.io
    db:
      image: mongo
      restart: always
      networks:
        - network.concept.io
      container_name: db.concept.io
  networks:
    network.concept.io:
      driver: bridge
  </code></pre>
  <p>So in the backend (Express) code, I wrote:</p>
  <pre><code>const URL = &quot;mongodb://db.concept.io:27017/conceptio&quot;;
  
  module.exports = {
    url: URL,
  };
  </code></pre>
  <p>The API container connects flawlessly with Mongo one when I declare that API container depends on Mongo container.</p>
  <p>But when it comes to the frontend container, I have reproduced the same setup, which frontend container depends on the API container, and replace the &quot;localhost&quot; with the container name as the API and Mongo ones.</p>
  <pre><code>// const URL = &quot;http://localhost:5328/&quot;;
  const URL = &quot;http://api.concept.io:5328/&quot;;
  export const API_URL = URL + &quot;api/&quot;;
  export const AUTH_URL = API_URL + &quot;auth/&quot;;
  </code></pre>
  <p>But I can't make a request to that endpoint.</p>
  <p>Is there any mistake or any idea to make HTTP Request to another container in the same network of Docker containers?</p>
  <p>Here are Dockerfiles:</p>
  <p>API:</p>
  <pre><code>FROM node:lts-alpine3.12 as builder
  RUN apk add yarn
  
  WORKDIR /opt/app
  COPY package.json yarn.lock ./
  RUN yarn install
  COPY . ./
  EXPOSE 5328
  
  CMD [&quot;yarn&quot;, &quot;start&quot;] 
  </code></pre>
  <p>Frontend:</p>
  <pre><code>FROM node:lts-alpine3.12 AS builder
  RUN apk add yarn
  
  WORKDIR /opt/web
  COPY package.json yarn.lock ./
  RUN yarn install
  
  ENV PATH=&quot;./node_modules/.bin:$PATH&quot;
  
  COPY . ./
  RUN yarn run build
  
  FROM nginx:1.19.1-alpine
  RUN apk add curl
  RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.2.0/envsubst-`uname -s`-`uname -m` -o envsubst &amp;&amp; \
      chmod +x envsubst &amp;&amp; \
      mv envsubst /usr/local/bin
  COPY ./nginx.config /etc/nginx/nginx.template
  EXPOSE 80
  CMD [&quot;/bin/sh&quot;, &quot;-c&quot;, &quot;envsubst &lt; /etc/nginx/nginx.template &gt; /etc/nginx/conf.d/default.conf &amp;&amp; nginx -g 'daemon off;'&quot;]
  COPY --from=builder /opt/web/dist /usr/share/nginx/html
  </code></pre>