Looking for architecture advice

Anvil Q&A
1

Hi all,

I’ve been developing a website/webapp using Anvil that has some specific requirements. I have an approach I’ve been using to putting all the pieces together, but would like to run it by those of you who’ve done this sort of thing before. I’m particularly interested in hearing from people who’ve been running a site with similar requirements for some time, so have a good idea of what works well and what doesn’t.

I stalled on development of this a couple of years ago when I tried to break it out into prod/dev versions. With three Anvil apps that share some data tables, that process just was too cumbersome.

Now that I’m coming back to it, I know I need some major rewrites to take advantage of new Anvil features (great job Team Anvil at adding cool new features!), so I figured it was a good time to revisit the entire architecture and see if those of you with more experience had some lessons learned to share.

Let me describe the requirements, then I’ll describe how I’ve organized things to meet them.

  1. The website uses pretty URLs, not ones with #!
    So https://example.com/page1 not https://example.com/#page1

  2. The static parts of the website are not served by Anvil
    I don’t want to build an entire CMS in Anvil, I have other solutions for generating static content pages, and static pages are easier for web designers to work with. This also takes Anvil usage out of the “casual user browsing” category and puts it into the “person has spent money” category.

  3. The dynamic parts of the website are served by Anvil
    I’m building a shopping cart, checkout system, and account system that integrates with the static website

There are other Anvil apps that interact in this system, but do not directly integrate with the static website. I’m fine using hash routing on those apps (they’re private apps, not public pages I want indexed by search engines)

What I’ve done so far (this is based on a design from several years ago, before we’ve had a lot of Anvil improvements):

  1. Built a static site using a Python based static site generator
    I looked through a bunch that were focused on blogs, and found https://urubu.jandecaluwe.com/start.html that matched the way I think, and allowed me to write some custom Python code to generate the site from a list of product descriptions.

  2. In the static site templates, used iframes to embed specific Anvil forms
    This works reasonably well, although it’ll take a web designer to make the forms fit in with the rest of the site

Any ideas for a better way to architect something like this?

2 Likes
2

For anyone who runs across this post and might be wondering what I ended up going with, I elected to not use iframes to embed Anvil forms in the static site. Instead, I’m using Javascript to manage the shopping cart and calling out to HTTP endpoints in the Anvil app as needed (to validate discount codes or checkout, primarily).

This keeps the entire static site in the realm of something I can give a web designer to make look nice, without worrying about trying to integrate the Anvil look and feel into it.

1 Like
3

Using Anvil as the API seems a reasonable approach to me. Getting the look and feel to match between the static and the Anvil site would probably be more maintenance overhead than you’d want to put in.

The “Pretty URLs” is a feature I’d like as well. In my case, I don’t even need it to be so pretty, but even if I were able to make a copy-pasted-able link I can pass to a client to say: “look at this record”, it’d be nice. On my TODO list is to put some JavaScript code in a component to implement this type of functionality to read from the query string, but I’ve got higher priorities keeping me from implementing it.

4

Yeah, the look and feel synchronizing was getting to be a pain in the old version. I like the feel better of the Javascript/API version.

If you’re just looking for a link direct to a form that can be copied and pasted, use the Hash Routing library: Routing, navigation with URL Hash It does all the Javascript and browser history management for you. I wouldn’t do a project these days without it.

2 Likes