CODEWITHSUNDEEP
javascripthtmlcssdockerdockerfile
Hammed
Hammed

Reputation: 1557

How to add CSS & JS to Docker image

I've got 3 scripts

index.html style.css and script.js

$(document).mousemove(function (event) {
  $('.torch').css({
    'top': event.pageY,
    'left': event.pageX
  });
});
html {
  height: 100%;
}

body {  
  height: 100%;
  background: url("https://wallpapercave.com/wp/6SLzBEY.jpg") no-repeat left top;
  background-size: cover;  
  overflow: hidden;
    
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.text h1{
  color: #011718;
    margin-top: -200px;
  font-size: 15em;
    text-align: center;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7), -10px 10px 0px rgba(0,0,0,0.4), -15px 15px 0px rgba(0,0,0,0.2);
    font-family: monospace;
  font-weight: bold;
}

.text h2{
  color: black;
  font-size: 5em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    text-align: center;
    margin-top: -150px;
    font-family: monospace;
  font-weight: bold;
}
.text h3{
  color: white;
    margin-left: 30px;
  font-size: 2em;
    text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
    margin-top: -40px;
    font-family: monospace;
  font-weight: bold;
}
.torch {
  margin: -150px 0 0 -150px;
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 9999em #000000f7;
    opacity: 1;
  border-radius: 50%;
  position: fixed;
    background: rgba(0,0,0,0.3);
  
  &:after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    box-shadow: inset 0 0 40px 2px #000,
            0 0 20px 4px rgba(13,13,10,0.2);  
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
<link rel="stylesheet" href="style.css">
  <h1>404</h1>
    <h2>Hello Foo</h2>
  <h3>Sorry you're lost.. Come back later</h3>
</div>
<div class="torch"></div>

All in a src directory.

I'm trying to bundle this into a docker image in order to create a 404 error page. I able to build the image and it renders the index.html page but the CSS isn't loading and being new to this I'm not sure what I'm doing wrong.

This is my dockerfile.

FROM nginx:stable
COPY src/ /usr/share/nginx/html

Upvotes: 0

Views: 3307

Answers (2)

J W
J W

Reputation: 1360

The problem is not with docker but the html. You haven't included your script.js and the html you posted is just a fragment of a page, a not full html5 page

Assuming you have this directory structure, it will work once you include your js

./Dockerfile
./src
./src/index.html
./src/script.js
./src/style.css

Just run

docker build -t demo-nginx .
docker run -it --rm -d -p 8080:80 --name demonginx demo-nginx && docker attach demonginx

Upvotes: 1

adampweb
adampweb

Reputation: 1469

Set the /usr/share/nginx/html directory to **VOLUME: ** VOLUME ["/usr/share/nginx/html"] in docker and run container with -v ./src:/usr/share/nginx/html option

Upvotes: 0

Related Questions