Serving other static files

What if an HTML page requires CSS and JavaScript files? Where do we place them?

Create views\helloagain.html with the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My webpage!</title>
    <link rel="stylesheet" href="css/helloagain.css" />
    <script async src="js/helloagain.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <h4 id='date'></h4>
    <div class="image-section">
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A  random image courtesy of unsplash.com.</p>
      </div>
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200"alt=""/>
        <p>A random image courtesy of unsplash.com.</p>
      </div>
    </div>
    <divclass="image-section">
      <divclass="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>
    </div>
  </body>
</html>

Actually, I got this from the wild wild web courtesy of Programming Liftoff

Create a css\ folder inside the public\ folder (you can right-click on it)

Then create the public\css\helloagain.css stylesheet file (also from Programming Liftoff) inside that new folder.

body 
{
  text-align: center;
  background-color: #f0e8c5;
}
div 
{
  margin-top: 15px;
}
.image-section 
{
  display: flex;
  justify-content: center;
}
.section-style 
{
  margin-right: 25px;
  margin-left: 25px;
  background-color: white;
}

Next, create the public\js folder.

Then create the public\js\helloagain.js with the following contents (also from Programming Liftoff)

document.getElementById('date').innerHTML = new Date().toDateString();

Then edit source\app.d to use a router

import vibe.vibe;
void main()
{
  auto settings = new HTTPServerSettings;
  settings.port = 8080;
  settings.bindAddresses = ["::1", "127.0.0.1"];
  auto router = new URLRouter;
  router.get("/", staticTemplate!"helloagain.html");
  router.get("*", serveStaticFiles("public/"));
  auto listener = listenHTTP(settings, router);
  scope (exit) listener.stopListening();
  runApplication();
}

The line

  router.get("/", staticTemplate!"helloagain.html");

means display helloagain.html when the URL simply shows “/”. This means the helloagain.html is the index page or home page. The “/” URL expands to

http://localhost:8080/

which is the root of the application.

The line

  router.get("*", serveStaticFiles("public/"));

means for all other files not indicated by any route, treat them as static files and look for them inside the public/ folder.

We indicated in the helloagain.html page that the stylesheet and the javascript files are in /public/css/ and /public/js/ but without mentioning the public/ folder:

    <link rel="stylesheet" href="css/helloagain.css" />
    <script async src="js/helloagain.js"></script>

We do not mention the public/ folder in the path.

After refreshing the browser, something similar is what you will see:

The images you see will most likely be different as they are randomly selected every time you refresh the page, so try to refresh the page a few times to see a different set of pictures.

PreviousUse your own HTML page NextDiet templates

Last updated 2 years ago

<!DOCTYPE html> <html> <head> <title>My webpage!</title> <link rel="stylesheet" href="css/helloagain.css" /> <script async src="js/helloagain.js"></script> </head> <body> <h1>Hello, World!</h1> <h4 id='date'></h4> <div class="image-section"> <div class="section-style"> <img src="https://source.unsplash.com/random/400x200" alt="" /> <p>A random image courtesy of unsplash.com.</p> </div> <div class="section-style"> <img src="https://source.unsplash.com/random/400x200"alt=""/> <p>A random image courtesy of unsplash.com.</p> </div> </div> <divclass="image-section"> <divclass="section-style"> <img src="https://source.unsplash.com/random/400x200" alt="" /> <p>A random image courtesy of unsplash.com.</p> </div> <div class="section-style"> <img src="https://source.unsplash.com/random/400x200" alt="" /> <p>A random image courtesy of unsplash.com.</p> </div> </div> </body> </html>

body { text-align: center; background-color: #f0e8c5; } div { margin-top: 15px; } .image-section { display: flex; justify-content: center; } .section-style { margin-right: 25px; margin-left: 25px; background-color: white; }

import vibe.vibe; void main() { auto settings = new HTTPServerSettings; settings.port = 8080; settings.bindAddresses = ["::1", "127.0.0.1"]; auto router = new URLRouter; router.get("/", staticTemplate!"helloagain.html"); router.get("*", serveStaticFiles("public/")); auto listener = listenHTTP(settings, router); scope (exit) listener.stopListening(); runApplication(); }