Browser Routing (React - like) for Anvil Apps

Show and Tell
1

Just wanted to share a new way for navigation of Anvil Apps that uses Browser Routing (commonly used in React apps). Turns out, it is also possible to do it in Anvil Apps (with some workarounds). And it has some great SEO benefits over Hash Routing.

Advantages

  • Better Crawling - Search Engines don’t prefer hash urls. Google has deprecated this method (although it still manages to crawl them). Bing also does not manage to fetch the new meta deta.

  • Control over Social Media meta tags - If you paste a link to example.com/#!/Page1, the preview in social medias will still show the title and description from example.com.

  • Better Support - Most of the popular sites like Facebook, Github, Linkedin, Netflix etc. use BrowserRouting. However, there is no example of any popular site using HashRouting.

Live Example

And here is a demo of how an individual article on my website appear

I will also be implementing this in my main website https://geeke.app once I fix the mess that I made previously for its navigation.

The Working

Browser routing uses History API. Javascript methods like pushState allow changing the URL on the browser without actually going to that URL. So, it will say that we are at example.com/_/api/page but we are still at example.com actually.

But still one big problem - What to do when the user directly goes to example.com/_/api/page1

This is where the workaround comes. We create an HTTP endpoint handler for page1 in our Anvil Server. The server will return an HTML file containing the source code of our app but with modified meta tags for page1

The Dependency

So far, I don’t have any dependency that others can also use in their App. But I will be working on making one. I just wanted to share the idea with others first and get their opinions and feedback.

6 Likes
2

Just out of curiosity - is this different to the Anvil Extras Hash Routing ?

3

What would happen if the http endpoint redirected to the correct URL rather than embedding it?

4

Yes I tried that out earlier. Search Engine crawlers will not index it most of the time due to the redirect

image
image811×198 18.9 KB

5

Um yes. That’s what the whole post covers.

6

Are you saying that pages with redirect are not indexed, but pages with an iframe containing the app and its hash part are indexed?

I don’t understand how crawlers can index the pages of an app if you embed it in an iframe.

7

Crawlers do index Iframes since a few years back. They have also been succesful in crawling my website with iframe so far.

But I just discovered that there might be an even better way without using iframes. Instead of returning an Iframe to that app, our endpoint can just return the entire HTML of your app!

Previously, when I tried that, it was giving me “Session Expired” errors (or just won’t load). But I just tried again and it works (Maybe a change to Anvil or maybe something wrong I did back then).

Although a proper workflow will have to be implemented since the HTML on the server may be outdated.

Edit : This works. I have now edited the post to show this method now

1 Like
8

sorry, I missed the bit at the very beginning which referenced hash routing.

1 Like
9

Getting an error when I navigate straight to the article:

image

10

Sorry about that error.

Should be fixed now.

1 Like