Server Side Routing Attempt

Show and Tell
#1

Here is my try at a server-side routing. This makes Anvil no longer behave like a Single Page app. And to do this, HTTP endpoints are used.

The logic is simple. The main form is returned upon loading and all other forms are stored in a Data Tables. These forms are then returned over HTTP endpoints.

Here is a live example https://routing.anvil.app/

This has the following advantages

  1. Faster Loading Since all forms aren’t returned at the same time, this can avoid a long loading time for your Anvil App in the beginning. Although forms will no longer open instantly.

  2. Search Engine Indexing This means that Search Engines like Google can now index individual forms.

  3. Back/Forward Buttons This means that the browser’s back and forward buttons can be used easily to go back and forth between forms. Although HashRouting can do that as well.

And here’s a Clone Link
https://anvil.works/build#clone:SPDNUW247HTEQZGH=TON5XAQX3CZSZYDOCE22D24Y

I know the Clone Link doesn’t clear much and it’s not really suitable for actual production yet. But if you guys are interested, I can try building an easier way for that.

2 Likes
Form Specific Data Table Access
PageSpeed results
HTTP Endpoints for paths beyond 'api'
Monorepository vs Microservices for large 1000+ Files Anvil App
#2

Kudos on tackling the problem!

From a purely user standpoint, the links are opening in a new tab, which eliminates the back/forward button usage. That should be solvable with Javascript and the link’s click event, although I’m not sure at what point popup warnings show up.

From a programmer standpoint, what’s the process for creating a form, testing it, then getting it into the data table, then making changes to it?

#3

First of all, as you said, the problem is easily solvable. I just didn’t do it here.

Second of all, I currently did the job of storing the forms manually by going to the source page and copying the the list under “forms” key (You can find it here $(function() {var anvilServicePreloadModules=[]....). Although I think this process can be automated easily.

If many people are interested in it, I may try a website built with anvil for anvil like I did here Push Notifications Dependency which will allow users to manage their apps and easily convert to this method of routing (Not sure how exactly I will do it but I have some hints)

2 Likes
#4

Speaking of this and your push notifications, would you mind sharing how you do convert an app programatically to a .yaml file? I’ve been curious since that push notitication app.

#5

It’s actually really simple. I just declare some variables like this

var1="A placeholder value"

After that, I get the Yaml file and replace the placeholder value with the input from user. Nothing advanced. Just a simple string replace.

1 Like
#6

Great effort, thank so much.
How does it work with authentication? Any test?

#7

Really neat, I might have to play around with that to maybe make a similar thing that people could use to make Selenium Tests. I’ve been needing a side project, haha. Thanks!

1 Like
#8

Not yet. But since it works using anvil’s HTTP endpoints, it should be possible.

#9

That’s great! If you ever build something like that, I myself will be interested in testing it out

#10

Started working on a service for implementing hassle-free server-side routing. The above app may have worked well as an example but since real apps will have lots of further complications (like Modules, dependencies, etc), the website will fetch everything from your Anvil Apps and let you create packages instead of single forms. You can add forms, dependencies, modules, native libraries, CSS, etc. to each of your packages.

3 Likes
#11

So I managed to achieve the first step which was to get the data from the URL of an Anvil App. To make it suitable for production, there will be a Debug App (with normal open_form navigation) and a Published App (with server-side navigations). You can work on your app in the Debug version and once the update is ready, you can update the Published App with just a click.

Currently, it demonstrates getting the data from your anvil app and creating packages. The rest of the things will not work yet. You can see the unfinished version at https://server-routing.anvil.app/ to get an idea of how things wll work.

But please note the following

  • As I already said, it will only work till getting packages
  • Currently, authentication username, password and verification code have no use. So you can skip those steps
  • Do not try this with big apps yet
3 Likes