Although called a layout page, the layout is in fact a template. Node/Express is a template engine which enables the use of a static template file. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. A layout (template) page created by Wappler will look similar to:
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<script src="dmxAppConnect/dmxRouting/dmxRouting.js" defer=""></script>
</head>
<body id="template" is="dmx-app">
<div is="dmx-view" id="content">
<%- await include(content, locals); %>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Within the body element, you can see the variable <%- await include(content, locals); %>. This will be replaced by the content page.
When a request is made to the home page, the index page will replace the variable in the layout (template) page and the combined files will be rendered as HTML. The Routing system plays an important part in this process, because it determines the content to be pulled into the layout (template) page.
In fact, this is the closest thing to a single page app without being a SPA.
Oh! the code coloured green in the content page is for Wappler’s benefit only. This is so that the Wappler user can use all of the goodies that Wappler could otherwise not supply.