Handling Dynamic Routes Without a Server

Question

Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?

Edit

To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.

I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.

I think this architecture demands that there's either a server to handle route redirects or a SPA framework.

Is there something I'm missing?

So you want single page application behavior...without a single page application? — Daniel Lizik, Mar 30 '16 at 15:18
"I think this architecture demands that there's either a server to handle route redirects or a SPA framework." — No, it demands that there is a server to handle route redirects. You really should make the URL reflect pages the server can actually deliver. Don't be tempted to use JS to set a URL which just looks nice but which the server can't deliver the correct page for when the JS fails. — Quentin, Mar 30 '16 at 16:14

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.

Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.

Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 30 '16 at 15:37

S4beR

1,872
1
17
33

I should clarify, this will be served from the index file. So, the server will serve index.html from the domain. This is functionally a micro site. Once the index is loaded it needs to operate independently of the platform server. – user3162553 Mar 30 '16 at 15:48
when you say user will visit `my-domain/option-a`, how user will do that? Is it some link on current page or they will type http://my-domain/option-a in browser address bar? – S4beR Mar 30 '16 at 15:59
Both and I think the problem is that there will be no way to manage the second option because that route doesn't exist. – user3162553 Mar 30 '16 at 16:06
yes and my point was exactly for second option. When user types the URL in address bar, you need to configure your web server to redirect anything to html page irrespective of URL i.e. if user types http://mydomain/xyz your server need to ignore everything after mydomain and redirect to your index.html. Then your SPA framework can choose the proper route based on /xyz – S4beR Mar 30 '16 at 16:47

score 0 · Answer 2 · answered Mar 30 '16 at 16:12

I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.

Carlos Pinzón · Answer 3 · 2022-08-07T20:46:22.963

It is not possible, but there is a workaround using url parameters like this:

my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games

const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"

Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.

BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.

Handling Dynamic Routes Without a Server

3 Answers3