Can't load css and js files with docker

Question

I am new to docker and i ran into a problem when i call css and javascript files in php file i found that they are not loaded

Following my code: docker-compose.yml

version: '3.9'

services:
  php-env:
    build: .
    volumes:
      - ./src:/var/www/html
    ports:
      - "8080:80"
  db:
    image: mysql:latest
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_DATABASE: airline
      MYSQL_ROOT_PASSWORD: root

  phpmyadmin:
    image: phpmyadmin:latest
    restart: always
    ports:
      - "8081:80"
    environment:
      - PMA_ARBITRARY=1

dockerfile

FROM php:8.0-apache
WORKDIR /var/www/html
RUN apt-get update -y && apt-get install -y libmariadb-dev
RUN docker-php-ext-install pdo_mysql

my file layout is like this

-resources
--app.css
--app.js
-src
--index.php

I'm fetching the css file like this: <link rel="stylesheet" href="/resources/app.css">

The error I get when I go to the css or js file is:

Not found

The requested URL was not found on this server.

Apache/2.4.54 (Debian) Server at localhost Port 8080

JasonS · Accepted Answer · 2022-08-04 18:43:09Z

1

I have managed to get it working on my end, here is the application I created:

/src/index.php

<link rel="stylesheet" href="/resources/app.css">
<?php ?>
<p>Hello World</p>

/resources/app.css:

p {
    color: #FF0000
}

Here are the changes I made to the docker-compose.yml and Dockerfile to get it working:

docker-compose.yml

Removed the volume binding for php-env service (since we are going to copy this in the Dockerfile)

version: '3.9'

services:
  php-env:
    build: .
    ports:
      - "8080:80"
  db:
    image: mysql:latest
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_DATABASE: airline
      MYSQL_ROOT_PASSWORD: root

  phpmyadmin:
    image: phpmyadmin:latest
    restart: always
    ports:
      - "8081:80"
    environment:
      - PMA_ARBITRARY=1

Dockerfile

Copied the /src directory into /var/www/html
Copied the /resources directory into /var/www/html/resources

FROM php:8.0-apache
WORKDIR /var/www/html
COPY ./src ./
COPY ./resources ./resources
RUN apt-get update -y && apt-get install -y libmariadb-dev
RUN docker-php-ext-install pdo_mysql

edited Aug 4, 2022 at 18:43

answered Aug 4, 2022 at 12:53

JasonS

2751 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JFeel Over a year ago

I think I understand what you're saying; Do I have to write like this as an example? volumes: - ./src:/var/www/html - ./resources:/var/www/html I tried this but I still get the same error.

JasonS Over a year ago

kinda, you can’t mount two directories to the same volume, but you can copy the folders over in the Dockerfile, will edit my answer with how I think it could be done

JasonS Over a year ago

@JFeel Please look at my edited answer and let me know if any more problems

JFeel Over a year ago

yes it is working now thank you very much. I have one last question, will I apply the same procedure when I add another file?

JasonS Over a year ago

@JFeel No problem :) The COPY ./resources ./resources line in the Dockerfile should now cover any new files/folders added inside of your /resources directory. If you decide to put them in another folder, you'll have to add another line to your Dockerfile.

Collectives™ on Stack Overflow

Can't load css and js files with docker

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related