I’m currently trying to create a website that is static. Using JavaScript I make a request to my API and get the content for the page. But my issue is I don’t want the links to be using query params like example.com/list?item=item-id I want it to be example.com/list/item-id.
A good example of my question would be how to recreate the express routing app.get('/list/:item_id') with links on a static website where the server won't throw a 404 because the page doesn't exist but it will route exaple.com/list/item1 and example.com/list/item2 to the same page where the client-side javascript will determine whether the page exists.
It depends on which webserver you are using to host your static site. Here is one way of doing it with a static site hosted on Apache:
.htaccess:# Allow static files to have extended paths
AcceptPathInfo On
# Default charset
AddDefaultCharset utf-8
# Make sure that an HTML file name "list"
# (with no .html extension) gets the right content type
AddType text/html list
list (an HTML file saved without a .html extension):<!doctype html>
<html>
<head>
<script>
alert(location.pathname)
</script>
</head>
<body>
HELLO WORLD
</body>
</html>
I tested this configuration on my Apache server. When I visit https://example.com/list/item-id, Apache serves the contents of /list as HTML. The JavaScript in that HTML alerts /list/item-id.
Your JavaScript would have to parse the item id out of the pathname and call your API with it.
There are other techniques that you could use to serve a single HTML file for many different paths. It is very common to use a front controller powered by a rewrite rule. You might also be able to use multiviews to acheive the same results with Apache's content negotiation module.
You'll need to find similar techniques if you want to host the static content on other web servers like Nginx or IIS.