Deploy a single page application with 200.html

Hey there people

So I'm a JavaScript fan and really love working with JavaScript as it is really powerful and has a huge community behind it.

One of the most demanded things that recently got popular is SPA which stands for Single Page Application. The name actually describes it pretty well.

A SPA works pretty straightforward actually and the only thing it does is that it loads only one page which usually happens to be index.html and rest is handled by JavaScript on the client-side and there won't be any server-side routing like Laravel or any other framework indeed.

Let's be clear that this is only for the client-side and you would still need some application for your server-side stuff.

Let's see how a SPA works:

Image from https://dotcms.com/

This is one of the best images I found to describe how different are SPA's and MPA's. By the way MPA stands for Multi Page Application which is standing exactly in front of SPA.

So to describe a SPA it is best to say that you actually load one page and the rest will be some AJAX calls which will get you the content and your browser will kindly render them with no effort for sure.

On the other hand with MPA, which is actually the most used method among websites made with thousands of CMS's like WordPress, Joomla or Drupal or..., your browser would ask the server every single time to send the page and that's how it goes.

Which one of these are better is beyond the scope of this article so I won't discuss about it in here.

I know, I know! I promise I will be writing some article about comparing these two.

Now that we know how SPA technology works we need some further steps to deploy one.

There are several ways like using a shared-hosting with Apache or NGINX or IIS if you prefer or using native Node.js on a server and so on...

Every one of these are going to require some configuration but the most common one is Apache.

What every one is used to do is to redirect every hitting traffic to index.html using .htaccess file like below:

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) /index.html [QSA,L]
</ifModule>

Which works perfectly fine but there is another method with no configuration!!!

Just change change your index.html file's name to 200.html

WHAT???

Yes that's it.

So how does it work Adnan?

It has a very simple explanation, what happens when your server doesn't find the address that user requested for? It searches for a file named 404.html which is a fallback for HTTP 404 error code.

Now you answer me! What is a successful result code for a HTTP request?
If you said 200 you are completely right. So can you now imagine which file would be the fallback for a 200 status code? For sure 200.html.

By this method every address except for real files will be redirected to the 200.html and the rest is about how you handle the address.

This works on Vue.js, Nuxt.js and for the rest I haven't tried yet but it's highly unlikely that it wouldn't work on React or Angular or any other thing since this step is pretty much the same for all of them. And this would also work with NGINX I assume.

Comment below and let me know if I'm wrong or if you have any other suggestions.

Comments

[Bayu Angora]

What if I have both of index.html and 200.html?

[Adnan Babakan (he/him)]

Actually Nuxt.js does the thing you said I don't get the purpose of this since everything is going to be redirected to 200.html.
In Nuxt.js both index.html and 200.html are same I assume this is a kind of fallback I think for some web servers which I'm not sure about.