Use your own HTML page

Inside the views folder, create a new HTML file named views\hello.html

with the following contents:

<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>
  </body>
</html>

Vibe.d is a stickler to proper indentation so follow the indentation rules for HTML tags. Sometimes, your editor saves tabs as spaces so make sure the spacing in the file is consistent, either all tabs or all spaces, or you will see mysterious errors when compiling. If you encounter that, click on the indentation setting at the bottom of VS Code. Click on 'Tab Size:'

And the drop-down indentation options will show at the top

Choose ‘Convert indentations to Spaces’ or ‘Convert indentations to Tabs’, whichever is your preference as long as you are consistent, then save the file again.

Next, edit source\app.d to make it display the hello.html page.

import vibe.vibe;
void main()
{
    auto settings = new HTTPServerSettings;
    settings.port = 8080;
    settings.bindAddresses = ["::1", "127.0.0.1"];
    auto listener = listenHTTP(settings, staticTemplate!"hello.html");
    scope (exit) listener.stopListening();
    runApplication();
}

And delete the hello() function at the bottom as it is no longer called.

Stop the application if it is still running by pressing Ctrl-C in the terminal window (maybe twice).

Compile and run the project with dub.

c:\vibeprojects\hello>dub
…
C:\Users\Owner\AppData\Local\dub\packages\vibe-d-0.9.5\vibe-d\stream\vibe\stream\wrapper.d(375,12): Deprecation: reference to local variable `chars` assigned to non-scope parameter `elems` calling `put`
     Linking hello
vibe-d_web.lib(common.obj) : warning LNK4255: library contain multiple objects of the same name; linking object as if no debug info
diet-ng.lib(html.obj) : warning LNK4255: library contain multiple objects of the same name; linking object as if no debug info
eventcore.lib(driver.obj) : warning LNK4255: library contain multiple objects of the same name; linking object as if no debug info
eventcore.lib(driver.obj) : warning LNK4255: library contain multiple objects of the same name; linking object as if no debug info
eventcore.lib(core.obj) : warning LNK4255: library contain multiple objects of the same name; linking object as if no debug info
    Finished To force a rebuild of up-to-date targets, run again with --force
             Copying files for vibe-d:tls...
     Running hello.exe
[main(----) INF] Listening for requests on http://[::1]:8080/
[main(----) INF] Listening for requests on http://127.0.0.1:8080/

This time around, you notice that the required libraries were no longer downloaded so the compilation is a bit faster. Refresh your browser and you should see the new message.

To stop the running app, press Ctrl-C (maybe twice).

As you have noticed, this is the conventional directory layout of a Vibe.d app:

\source - your D code should reside here

\views - the HTML or template pages stay here

\public - for other files such as CSS, scripts, images, videos, etc.

PreviousThe default hello world appNextServing other static files

Last updated