How to Embed HTML/JS Frontend Files into a C++ Web Server Executable?

Question

I have a C++ application that uses httplib to serve an HTML/JS frontend from a folder. Currently, I require both the compiled C++ program and this folder for the application to work. Is there a way to embed the frontend folder into the C++ executable to create a single-file application?

Here's a minimal example of my current setup:

#include <iostream>
#include <thread>
#include <httplib.h>

httplib::Server rest;

void run_rest_server(const int port)
{
    try
    {
        rest.set_mount_point("/", "./frontend");
        rest.listen("0.0.0.0", port);
    }
    catch (const std::exception&)
    {
        std::cout << "Could not start REST Server" << std::endl;
    }
}

int main()
{
    std::thread(run_rest_server, 81).detach();
    while (true) { /*...*/ }
}

I found a resource-based approach, but it requires embedding each file individually, which is impractical for a frontend folder with hundreds of files. Is there a more efficient method?

Additionally, I'm continuously updating the frontend, so it's crucial for me to maintain an efficient development workflow. Ideally, I'd like a solution where I can still work on the frontend code separately and only need to run the C++ compiler to publish a new version of the application.

Answer 1

Even if you are restricted with your C++ backend, there are multiple routes you can take to make your process scalable and dev friendly. Here are just two options, but there can be many more that you can take!

1. Serving your HTML files separately from your C++ backend. For eg: Every new html file generated should automatically push the changes to the directory to a github repository, which would start a Github Action / CI / CD process to update a webpage for your HTML files hosted on Vercel (or Netlify, or Github Pages even) for free. Now you can have this newly hosted webpage embedded as an iframe within your C++ backend and everytime there is a new HTML file generated, and subsequent deployment of the static file, you should be able to see it on your C++ hosted server as well.

2. Update your C++ code to continuously listen to any changes to a new directory and everytime you generate an HTML you should add it to that directory on the server (either by adding an endpoint that allows you as an admin to add files to the server, or by having the generation of HTML occur on the server itself). The C++ code listening for the changes to the directory should be able to help you update any new pages that might have been added or updated!

3. You can build all the html required for the user and then send that in the response of the request instead of using iframes/embedding content. You can build a new endpoint just for this purpose and generate the content at runtime.

4. ...

5. ..

6. Take whichever you are comfortable with!

Whichever way you go, know that as long as the files are hosted SOMEWHERE on the internet, you should be able to setup an iframe/redirect towards that page. Hope this helps.