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
(https://dev.to/programliftoff/create-a-basic-webpage-with-css-and-javascript--104i)
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.
Last updated