There are plenty of Web Application Frameworks available over the internet. Each of them has its own rich documentation and tutorials. However, there is a lack of information about the structure of these Web Frameworks.
By structure, I mean simple description and graphical representation of relationships and communications between "Web-Server" & "Web-API/ Web-Framework" regardless of programming languages employed to implement them.
I've done surfing the Net but I have not found any proper reliable info.
It is a hard question to answer, but I will give it a try. So, first, we could ask ourselves:
How does Web-API communicate with Web-Server?
The overall structure you can imagine here is that basically the server as a machine has an open port on which a web-server is listening. The server has configuration files which tells it what to do. Basically in new frameworks the server only sends the request to a corresponding "internal" port where a web-application is listening, and that application basically handles the internal logic. Therefore the Web-Server just "dumbly" sends the data to the set port. This can be altered with the configuration files, where the server can in different ways modify the request.
What does a Web-Framework consist of?
Well it completely depends but I would say from a client side application (imagine React, Vue, Angular). A back-end side application (node, nest, django, flask) a database (mongo, maria, postgres). A more "complete" app would have caching for example (redis) or search specific capabilities (elastic). All in all it depends basically from the specific use case, because you need a different web framework for e-commerce then a B2B app.