Conceptualizing How a Modern Single Page App is ServedMay 11, 2017
I’ve noticed some confusion in how Single Page Applications are served among developers who are new to these apps. This post is a short explanation of how a Single Page Application gets from the web server to a user’s web browser.
First, what is a Single Page Application?
A Single Page Application (SPA) is a web application or web site that fits on a single web page, with the goal of providing a user experience similar to that of a desktop application.
What might this look like?
This is the only HTML file for the entire application, and the only file returned to a client who
requests the application. Both the
app.css file and the
app.js file contain all the necessary
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>A single page app</title> <link rel="stylesheet" type="text/css" href="app.css" /> </head> <body> <div id="app_root"/> <script type="text/css" src="app.js"></script> </body> </html>
In this example,
app.js could be a React application that
produces rest of the DOM elements when it is evaluated.
What about interaction with the web server?
The sequence diagram below shows how and when the front end SPA interacts with the back end web server.
The UI server below has one and only one job: deliver the single page and all assets that the application needs when a browser requests them. Therefore, the UI server must be configured as follows:
- Match all other routes. The UI server uses a “match all” strategy so that any received request that does not match a static asset will be handled by returning the single page of the application, usually called index.html. This is necessary because the user could force a page load while on a specific URL within the application, as shown in the diagram below.