Vibe.d tutorial
  • Build web apps with Vibe.d
  • Setting up
  • The default hello world app
  • Use your own HTML page
  • Serving other static files
  • Diet templates
  • More template pages
  • Use your own functions
  • Templates for ease of maintenance
  • Using include in templates
  • Responsive layout using CSS Grid
  • A fixed navbar and sticky footer
  • CSS modal dialogues
  • The web interface
  • Setting up MySQL server and tools
  • The schema
  • Setting up MySQL for Vibe.d
  • The EmployeeController class
  • The EmployeeModel class
  • A form for adding a new employee
  • Saving form data into the database
  • Testing the whole thing
  • Listing all the employees
  • Retrieving a record for editing
  • Saving form changes to the database
  • Deleting a record from the database
  • Finding an employee record by name
  • Displaying error messages with _error
  • Authentication and authorization
  • Logging in and authentication
  • Saving the login state to the session
  • Enforcing authorization through the session
  • Logging out
  • All the sources so far
  • A new project
    • The timekeeping system
Powered by GitBook
On this page

Use your own HTML page

PreviousThe default hello world appNextServing other static files

Last updated 2 years ago

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.