Blog Learn Features Forum Docs Start Building

Anvil Community Forum

Best Practices for combing static site with Anvil App?

#1

Given that forms in an Anvil app aren’t discoverable by search engines, my current thinking for my project is to combine a static site with an Anvil app. The static site will have product description pages, the app itself will handle purchases, account management, etc.

I see two main ways to do this:

  1. Use an iframe to embed the Anvil app into an appropriate page of the static site.

  2. Style the Anvil app identical to the static site, and send the user back and forth between the two, using a subdomain of the static site for the Anvil app.

I’m leaning toward #1, to avoid a couple of possible issues with #2 (keeping the styling the same between the two, and Anvil opening external links in separate tabs).

What are other people doing to combine static content with Anvil apps? What approaches haven’t I considered that I should?

#2

+1 for iFrame. Works for me.

1 Like
#3

I’ve been working on the iframe angle, and ran into a snag. I’d been hoping to have a small iframe for displaying the Login/Register and Logout links, but when I click Login/Register inside that iframe, the login window is also constrained by the space available to the iframe, so I don’t see it.

Are there options beyond just giving the iframe enough space to show the login window? I’ve been looking to see if there was something CSSy to do to solve this, but haven’t found anything.

@david.wylie do you do anything with logging in inside an iframe?

#4

Hmm, no actually.
So the issue is you want the login popup to appear outside of the iframe (like a normal popup for the web page).

I don’t think that’s possible as the entire app is loaded inside the iframe, but Anvil Central would have to confirm.

#5

Yeah, I’ve about concluded it’s impossible, too. I really like the Anvil built in logging in UI, but since it isn’t an actual popup window, it’s stuck inside the iframe.

The main workarounds seem to be to fiddle with the iframe to make it full screen temporarily (or open a new iframe that’s full screen, I’m not clear on the details). It all sounds way more complicated than I really want to get.

I’ll play with some other ideas. It’s too bad there isn’t a parameter to login_with_form that would put it into an actual pop up window. That could display outside of the iframe just fine.

#6

Link to related feature request: Show login form in popup window

Are you familiar with the Custom Signup library? It’s an app you can clone that allows you to create your own login forms and other user flow elements. You might be able to use it to create a login form that looks good in your iframe.

https://anvil.works/blog/custom-user-auth

https://anvil.works/ide#clone:TTLCYBO7UWVCSTWL=T37TCLU5COZYUZ2WONZ7RKXU

2 Likes
#7

Have you tried creating a separate app for the login, and changing your main app to redirect to the login one instead of showing the login form?

If that works (I haven’t tried) you could have two different container pages, one with the iframe optimized for the login app and one for the app itself.

I don’t think Anvil supports redirecting, but it should be possible with a little javascript (again, I haven’t tried).

As a side note, it is possible to remove target="_blank" from the Anvil links to avoid them to open in a new tab (this I have tried, both in a custom component (if a form has the custom component then the target="_blank" is removed from all the links in the page) and as in a role assigned to a link).

#8

Replying to @jshaffstall’s original post, I didn’t realize that different forms on Anvil are not assigned unique URLs, even when they are built with custom static HTML that would otherwise be considered different pages.

Is there a way to give Forms or other similar Page-like entities unique URLs? For example:
myapp.com/about
myapp.com/projectsp.com/projects

If not, does anyone have experience with @jshaffstall’s 2nd suggestion, using an Anvil app as only a subdomain of a larger static site? For example, could a site have externally-hosted, static pages like
myapp.com/about
myapp.com/projects
and also have an Anvil app within a subdomain like
anvil-sub-domain.myapp.com?

Thanks.

1 Like
#9

@whittredge I’m in the early stages yet, but I’m having good luck with using iframes on static pages to display individual Anvil forms. Getting users logged in is a pain, since you can’t use the Anvil login_with_form (unless the iframe is big enough to show that form, which mine aren’t). The main alternative is to write your own login form that fits into the form factor of your iframe. Another alternative is to email users login links rather than have them register. Just depends on your site as to which is best.

For forms that don’t display alerts or the login window, it works extremely well. I’ve been able to get a simple shopping cart working in an iframe, where users can click a link in the static page to add an item to the cart. You have to add the target to the link and use the name of the iframe so it opens the link inside the iframe itself.

If you’re on the Hobby plan, the Anvil banner will often appear cut off, making the iframe look bad. You can use some CSS margin magic to push that off the visible part of the iframe entirely.

1 Like
#10

@jshaffstall thanks for the tip!

Anybody else have success with the subdomain approach? Is it even possible? It seems like that would be a cleaner strategy to manage user login.

1 Like
#11

Good news for <iframe> users! I’ve just released a beta of a tool we’ve been using internally, to make embedding Anvil apps much easier by automatically adjusting the height of the iframe.

All you need to do is include https://anvil.works/embed.js in your page, and then include the data-anvil-embed attribute in your <iframe> tag. Here’s an example:

<script src="https://anvil.works/embed.js" async></script>
<iframe src="https://impartial-unaware-pleasure.anvil.app"
        style="width:100%"
        data-anvil-embed></iframe>

Now, the iframe will automatically resize to match your app - even when it pops up alerts such as login windows.

Please give it a try and send us feedback; if it works well we’ll release it officially in the next couple of weeks.

4 Likes
Browser Based SSH
To know about what i can do with anvil
#12

I finally got a chance to try this out. It works like a champ, resizing the iframe as the Anvil app resizes. This will allow me to use the login form from an otherwise smaller iframe. It’ll take some care to the design of the HTML page the iframe is on, but is way better than the workarounds I was using before.

2 Likes
#13

I have a datagrid that is matching the iframe width rather than expanding the iframe. The height is adjusting fine.

For example, here’s the datagrid when run from the Anvil IDE:

image
image.png737×129 2.49 KB

And here it is inside the iframe:

image

I’d like the iframe to expand, but instead the datagrid is fitting the iframe.

#14

I think that’s a matter for the static page you’re embedding into - the embedding library will size the iframe vertically, but it will keep whatever width you give it.

1 Like
#15

Ah, okay. I thought the iframe would expand both horizontally and vertically. I’ll have to rethink the design of the two forms that can be in that iframe, then. One is currently fine narrow, and the other wants to be wider.

#16

I have been using a full-page iframe to implement the subdomain-type approach, like this:
https://github.com/hugetim/empathyspot/blob/master/docs/in.html (But I’m a noob so there might be a better way.)

Here’s what it looks like currently: https://www.empathyspot.org/in/ (I’m unclear on whether it’s possible to set it up as an actual subdomain, like in.empathyspot.org, or not using GitHub pages for the static site.)

#17

Hi @hugetim ,

I have no advice w/r/t iframe …

However, 100% you can use a custom domain name in GH Pages

I am using this on a few sites Here is one, just to prove it

Basically using a GH theme, but my custom domain (FWIW, my registrar is GoDaddy)

Happy to answer any questions, but the GitHub pages are pretty good.

Cheers,
Tyler

#18

Thanks, Tyler. Well, I am using a custom domain for my GitHub Pages site: www.empathyspot.org. My question is whether I can then also use something like subdomain in.empathyspot.org to refer to the /in/index.html page? Maybe I just need to configure something with the registrar?

#19

@hugetim

Gotchya. So long as in.empathyspot.org points to www.empathysport.org you can use a CNAME DNS Record.

Cheers,
Tyler