< Go Back

Getting Started with a Drogon Hypermedia Driven Application with HTMX and C++

A simpler approach to building applications on the Web and beyond with htmx and Hyperview.

Summary

In this how-to, we will be projecting our first hypermedia driven web application (HDA) built on the C++ Drogon web server with Ubuntu 22.04 Linux.

Requirements

A Linux OS
Basic CLI Experience
A C++ Package Manager like vcpkg
C++20 Compiler

In the past, we travelled down a road of monolithic javascript frameworks that created excessive complexity, frustration and resource heavy frameworks.

The Application Architecture

The frontend uses the htmx library and some Bootstrap resources for styling. There is no hand-written JavaScript running as htmx already provides the responsive stuff we expect any modern web app to offer.

The backend is based on the very fast C++ web framework called Drogon.

The database in use is SQLite3, but this can be replaced; see more at:

https://github.com/brakmic/HDA_with_Cpp/blob/main/README.md

A Deep Dive

If you would like to learn more about the details of what a hypermedia web application is, I recommend a book from Bigskysoftware that is freely available on the world wide web.
https://hypermedia.systems/

Brakmic also has extra tidbits on the hypermedia application we will be building today and is the one who originally created the C++ HDA; If you are using OSX or Windows, instructions will also be at the following link.
https://github.com/brakmic/HDA_with_Cpp

In this how-to, we are focusing on Linux.

Install Linux Dependencies

sudo apt install uuid-dev libcriterion-dev

Install C++ Packages

To install a package, simply invoke vcpkg install PACKAGE_NAME.

drogon
drogon[ctl]
fmt
argparse
brotli
zlib
openssl
sqlite3
soci[core]
soci[sqlite3]

Clone the HDA with CPP

In a directory for application development, clone the example C++ HDA Brakmic created.

git clone https://github.com/brakmic/HDA_with_Cpp.git
cd HDA_with_Cpp

Update the vcpkg_root

In a text editor of your choosing, open up the meson.build file in the root of the project and edit the following line.

nano meson.build

vcpkg_root = '/home/username/vcpkg'

Then, update the triplet for Linux

triplet = 'x64-linux'

Update Criterion

I created a patch on GitHub that fixes a couple of issues with the Linux build system; if for some reason the patch hasn't been merged into the main branch, you may copy the build.meson I created.

The patch adds where the location of criterion has been installed; see lines 106-126 via the patch-1.

https://github.com/csharpee/HDA_with_Cpp/blob/patch-1/meson.build

You may view the debugging process I went through here:

https://github.com/brakmic/HDA_with_Cpp/issues/3#issuecomment-1550002758

Build & Compile the HDA

After the meson.build file has been updated, we build and compile the C++ HDA.

./buildall.sh

Run the Drogon Web Server

./builddir/demo_web_server

Goto your favorite web browser and open the localhost on port 8081.

localhost:8081
or
127.0.0.1:8081

Congrats, you have projected your first HDA built with C++ and served with Drogon's speedy web server!

From here, you may begin learning how to add your own html styling, database tables and other things like authentication. To learn more, I recommend learning more with Drogon at: https://github.com/drogonframework/drogon and joining the Telegram channel via https://t.me/joinchat/_mMNGv0748ZkMDAx .

Financial Support & Donations

I mainly debug code, drive, yak shave and deep dive into research for Linux base operating systems.

I am a Free Software Associate (FSF), privacy advocate and Cosmopolitan that enjoys philosophie, meta-physics, hacking and debugging computer hardware/software.

https://liberapay.com/oDinZu/