How to Setup Web Hosting Fallback to index.html

General
1

App ID: 8149FCCE-07DA-F988-FFBB-6154872C9500

Hello,

I’m hosting a Single Page App from a subdirectory of root/web. I need to redirect all calls to urls in that directory to index.html. I see from other old support topics that this behavior is automatic if one has a custom domain, so I would like to set that up. Some direction on the Custom Domain setup page would really be appreciated. Specifically:

  1. There is an undocumented “Get your subdomain now” button that returns several domains that I don’t recognize, and I don’t know if I need to pick one of these, or on what basis I would do so. Or are these simply “suggestions” for subdomains?

  2. I don’t have an existing domain from which to create a subdomain to map to develop.backendless.com, and more importantly, I don’t have an ISP to provide DNS utilities. So, whose DNS server would I use to create such a mapping when Backendless is the only host involved for this project? Do I have to set up a domain with an ISP, then use their cPanel to create the CNAME record?

  3. Is there an easier way to route everything to index.html, since I really don’t care about a Custom Domain otherwise?

Thank you, Kelly

2

Hello @Kelly_Oglesby

  1. Each Backendless application is assigned a subdomain in the backendless.app domain. This subdomain can be used for all API operations. If the application did not have a subdomain before, the get subdomain button allows you to get such a domain.
  2. Information on setting up a domain is available at this link Custom Domains - Backendless REST API Documentation
  3. You should use a custom domain

Regards,
Inna

3

Believe me, I have studied that documentation page, and I truly don’t understand. Before I waste more of your time, please let me verify what I am trying to do. I just want a fallback “redirect” to index.html. Normally, I would just create simple rewrite rule in .htaccess, or a one-liner location rule in nginx. It would take about a minute. Am I in the correct ballpark for accomplishing that if I go to all the trouble for a subdomain?

If I really need one, is there a way to get a subdomain that reflects the company name for which my app is being developed, or do I have to use one from the list, which appear to be generated? And is it still necessary to create a DNS record? Where would I do that?

Thank you, Inna

4

Hi Kelly,

Am I correct in understanding that no matter what file is fetched from root/web, you want the browser to always render index.html? To be more specific, say root/web contains the following files:
fileA.html
fileB.html
index.html
When a client fetches fileA.html (using any of the available mechanisms, i.e. custom domain, or backendless.app subdomain or backendlessappcontent.com URL) you want index.html to return?

Regards,
Mark

5

Hi Mark,

No, I want it to return index.html only for files and directories that don’t exist. In my app I’m using Vue and Vue Router in a single page app, in history mode. There is only one physical file, or entry point, index.html. Vue Router handles navigation inside the app to display virtual pages, or routes. For example, the app resides at

https://backendlessappcontent.com/.../.../files/web/elite/index.html

Once a user is in, Vue router handles virtual routes such as

/files/web/elite/dashboard
/files/web/elite/admin/reports

These virtual routes don’t exist in the Files repository, its all smoke and mirrors inside the client. The problem is a browser problem. If I am at

https://backendlessappcontent.com/.../.../files/web/elite/dashboard

and hit the browser Refresh button, the browser sends that request to Backendless, which, not finding a “dashboard” directory, correctly returns

{"code":6007,"message":"The specified resource was not found","errorData":{}}

The usual solution is server configuration - on Apache this means adding a rewrite rule, such as

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

or on nginx to add a location directive, such as

location / {
  try_files $uri $uri/ /index.html;
}

To achieve a similar result on Backendless, I was investigating the solution you provided Karol at Automatically serve index.html in web hosting. But I don’t understand this CNAME business, or how it will help me with a SPA. Also, my Custom Domains screen in the console only barely resembles the documented behavior, which is a bit confusing given that I admittedly don’t have a friggin clue what I’m doing. I know how to create a CNAME record for a domain I own, but I have no idea where to create one for a domain not under my control.

Thank you!

6

The solution with a custom domain will work only for one scenario:

When a user enters http://some-custom-domain.com
the server will return http://some-custom-domain.com/index.html

That’s it.

This solution does not mean that if they enter http://some-custom-domain.com/foo.html and foo.html does not exist on the server, the server will default to index.html.

You’re right, it would be rather straightforward to add a custom configuration in nginx or apache, however, Backendless Cloud is sort of a shared hosting type of setup. We do not allow custom configurations in our web tier.

I checked if there is a client-side (JS) solution to intercept browser’s refresh event and looks like there is:

Hope this helps.

Regards,
Mark