javascriptdockerwindow.location

Can't access api folder url with javascript using Docker


I am using docker and trying to access api folder url with Javascript. My api folder is located in same folder as my template. How can I access api folder with Javascript?

I have tried this and this returns http://localhost:8000/api/api.php

 const API_URL = window.location.origin + '/api/api.php';

My fetch function

$('#input').on('input', function (e) {
    fetch(API_URL)
        .then((response) => {
          if (response.ok) {
            console.log(response);
            return response.json();
          }
        })
        .then((data) => {
            console.log(data);
        });
});

console says as I am trying to fetch API_URL

GET http://localhost:8000/api/api.php 404 (Not Found)

Folder structure

--project-assets
 |--templatefolder
 | |--dist
 | |--scripts
 | \--main.js
 |
  \--api
    \--api.php

docker-compose.yaml

version: '3.6'
services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: ${THEME_NAME}_wp
      MYSQL_USER: ${THEME_NAME}
      MYSQL_PASSWORD: ${THEME_NAME}
    networks:
      - wordpress

  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - 8080:80
    volumes:
    - ./wp-content:/var/www/html/wp-content/
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: root
      UPLOAD_LIMIT: 300M
    networks:
      - wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - 8000:80
    restart: always
    volumes:
      - ./project-assets/${THEME_NAME}:/var/www/html/wp-content/themes/${THEME_NAME}
      - ./project-assets/plugins:/var/www/html/wp-content/plugins
      - ./project-assets/uploads:/var/www/html/wp-content/uploads
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: ${THEME_NAME}
      WORDPRESS_DB_PASSWORD: ${THEME_NAME}
      WORDPRESS_DB_NAME: ${THEME_NAME}_wp
      WORDPRESS_DB_CHARSET: utf8mb4
      WORDPRESS_CONFIG_EXTRA: |
        define('WP_DEBUG_DISPLAY', true);
        define('WP_DEBUG_LOG', true);
        define('WP_DEBUG', true);
        define('FS_METHOD', 'direct');
        define('WP_MEMORY_LIMIT', '256M');
        define('WP_HOME','http://localhost:8000');
        define('WP_SITEURL','http://localhost:8000');
    ports:
      - 8000:80
    networks:
      - wordpress

networks:
  wordpress:
    name: ${THEME_NAME}

volumes:
  db_data:

Solution

  • So 2 things I had so change

    Added this to volumes in docker-compose file

    - ./project-assets/search-api:/var/www/html/wp-content/search-api
    

    and changed the API_URL

    const API_URL = window.location.origin + '/wp-content/api/api.php';