Let's group the various ways of doing this into several groups:
Single front-end page with no deep linking
Using the URL params to figure out what they want
Using the # part of a URL to synthesize the target
Sending all requests to a single page (.htaccess or cloud hosting rules)
Letting someone else do it (the frameworks: React, Angular, and friends)
Server-side Rendering (Express/flask/APIs for a future lecture)
Single Page, no deep links
I'll start here because it's the simplest and most "conceptual".
Instead of a separate file per page we use a function to draw our new page.
All animation engines will wipe the screen and redraw it at least 20 times per second. We can use the same
notion, clear the body or hide a div, now draw an appropriate page.
Simple Pages: Add a fourth to this example. What are the differences with
the first trick. Any pros and cons that you can see?
For what it's worth, the 3rd trick is the one I see most often in simple page examples. Another trick is to keep
separate HTML template files and use a library to help you load them.
Using URL params for deep linking
So this is the same as above but you can pack your data into URL parameters.
You see this a ton in marketing analytics links, there are many ways to call google.com
with various params that don't change your results at all (but do tell them a lot about you).
I won't spend a ton of time on this, but here's how you can read URL params:
When you do firebase init for hosting you'll select single Page App mode which sends all 404 errors to index.html
Node Static
Here's a demo for the second option (using NODE to augment your routing). The second is the one I use most often (a sample .htaccess follows). The third one is what I used for Minceraft
Head to Glitch.com and make a new
"hello-node" app. Change the one line in server.js which said fastify.get("/", function(request, response) {
and add the wildcard character: fastify.get("/*", function(request, response) { AND
add the line wildcard: false to the "fastify-public" configuration. (If you're feeling lazy I've got an entire server.js below.)
Visit your URL, then your URL/farts, then your URL/hello/world.
For posterity here's an .htaccess for sending all URLs to the same spot (a PHP file in this case):
The Frameworks
So all of these methods we've learned so far are under the hood of how the web app frameworks do it.
Thus, this section is almost to show you concepts of how you might consider engineering wrappers
for your routing one day.
The earlier glitch example is essentially the hello world you need, but we'll do a whole bit on building REST APIs soon.
So we can handle this case later. (In essence have the server handle /:param1/:param2 with some templating.)
Baby API
This is the same tech of a typical REST API, so here's a dumb example:
