1

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.

askrill
  • 33
  • 6
  • 1
    How do you statically host an API? – Stephen Ostermiller Jan 25 '22 at 23:59
  • no I'm running my API using elastic bean stock on aws. the purpose of this project is that when I create websites I can integrate my clients into my API so I don't need to create a backend for every site. now for my client's site, I understand fetching info from the API. 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. – askrill Jan 26 '22 at 14:30
  • 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. – askrill Jan 26 '22 at 14:35
  • If you want a path to serve up an HTML document then the *server* needs to serve up the HTML document for that path. There is no way to avoid that. Many servers could be configured to serve up the same HTML document for all URLs that don't otherwise resolve to a file but that (a) is pretty poor as it breaks 404 handling and leaves the client completely dependant on being able to run the JS and (b) depends very much on your HTTP server. – Quentin Jan 26 '22 at 14:43

1 Answers1

0

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.

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
  • Is it possible to configure it in the dns settings – askrill Jan 26 '22 at 15:29
  • No, DNS only points a domain name to a particular IP address. It has no control over URL paths at all. – Stephen Ostermiller Jan 26 '22 at 15:29
  • I'm using s3 to host my static website I'm kinda new to dealing with hostings. Is this a method that can work on s3 or is there something else I can learn that will allow me to do it using s3 because I'm trying to avoid spinning up another instance? In addition, if I keep it the way it is using query params my only option? – askrill Jan 26 '22 at 15:37
  • You'd have to use Cloudfront in front of S3 to get that behavior there: https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-distribution-serve-content/ – Stephen Ostermiller Jan 26 '22 at 15:44
  • Awesome thank you – askrill Jan 26 '22 at 15:49