The requested <url> was not found on this server ... Apache (Ubuntu) server at <hostname> port 443"

It turns out the issue stemmed from permissions on the .htaccess file located in /path/to/public_html/ . By adding the <Directory> directive in the Apache configuration to grant the necessary permissions, I could navigate the web site again.

Here's my final vhost configuration for port 80 and port 443.

<VirtualHost *:80>
  # ... Other configuration
  RewriteEngine on
  RewriteCond %{SERVER_NAME} =dev.bar.co.za
  RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

  <Directory /path/to/the/app/dir/>
    AllowOverride All
  </Directory>
  # ... Rest of configuration
</VirtualHost>
<VirtualHost *:443>
  # ... Other configuration
  SSLEngine on
  SSLCertificateFile /etc/letsencrypt/live/dev.bar.co.za/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/dev.bar.co.za/privkey.pem
  ServerAdmin webmaster@localhost
  ServerName dev.bar.co.za
  Include /etc/letsencrypt/options-ssl-apache.conf

  <Directory /path/to/the/app/dir/>
    AllowOverride All
  </Directory>
  # ... Rest of configuration
</VirtualHost>

I saw this solution before and had ruled it off because the initial assumption about what the issue could be was wrong. Humph!

NB: The directives i.e. AllowOverride All in <Directory> directive aren't exhaustive at all. I've added the least amount of directives to solve my problem.