What I’m trying to do:
I love Anvil and would love to use it for my start-up idea.
A good Solution or App has a landing page, and then the app component.
It often has multiple pages too, to focus on pricing and how to contact the developers.
What I’ve tried and what’s not working:
I am trying to use Hash routing to have page specific navigation, but am I doing this right?
This time my question is very open ended: what would be your approach?
If you’re asking if Hash routing is the right way to do it in Anvil, then I think that’s an easy yes – there’s no better solution in Anvil for doing this on top of the SPA infrastructure. As for how to do it, I would just look at the documentation: Routing — Anvil Extras documentation
If you’re asking another question I think more details are needed to get a good answer.
Fair point. I searched around for a good example, are there any you are familiar with?
Also are there examples of downright beautiful website built on Anvil? The new multi role feature is excellent but it I still find it a bit challenging to build things that are aesthetically pleasing.
I have quite a few anvil apps under my belt, but would love to discuss how I can push myself to make something eye catching.
Are you asking for an example of routing done well in Anvil? I don’t know an example of that, but IMHO the documentation covers the basic case really well and beyond the basic case of routing different forms at different URLs, there’s not much in the code to worry about so I would just decide what you want the page addresses to be and just implement it with the anvil-extras library.
I’m definitely not the right person to consult for design decisions, that’s not my forte. Also, that should probably go in a different thread anyways so that threads are kept focused.
Another approach that some people take with Anvil apps is to make a static site as a landing site. That’s the site that has the pricing page, the landing pages, etc. There’d be a link to the Anvil app on that static site.
There can be more integration between the static site and the Anvil app if needed, using Javascript and HTTP endpoints, too.
Using a static site allows you to use normal URLs instead of hash URLs for those pages you want to be indexed by search engines, allows you to use less expensive hosting for the site the majority of visitors will be using, etc.
The app will then be an iframe on the website? Assuming I would like to keep the same domain name.
I also tried using uplink to fully upload a mobirise and nicepage built websites into _/theme/ and had some partial success, but the existing anvil css libraries are overwriting some properties and it doesn’t look the same.
I am guessing a static website with good H1, H2, and meta tags is going to perform better in SEO than a pure Anvil app. So it sounds like a good suggestion.
I did want to avoid that though and make Anvil my one stop shop.
It would need static pages (partially taken care of by native libraries), advanced css and properties (partially taken care of by roles), and non-relational database (relational is grat but it doesn’t always work, so i have to use a firebase extension).
That is one option, although not the one I took. For my case my static site is the store site that visitors see where they purchase products. The static site uses Javascript to call HTTP endpoints on the Anvil app to communicate information about purchases.
The Anvil app is on a subdomain of the static site and linked to by a My Account option in the static site. The Anvil app opens up in a tab of its own, not in an iframe.
I ran into a number of issues with trying to go the iframe route, mostly dealing with sessions, because of the complexity of what I was trying to do. You might get along fine with iframes.
I originally wanted to do that, too, but when I started thinking about ramping up to a full product I realized I had two classes of people who would be visiting the site. The larger class were the casual visitors who were not going to spend money. I wanted to keep those people on the static site and avoid having them use Anvil compute resources as much as possible, so having Anvil serve static pages to them didn’t make sense to me. I wanted to reserve Anvil for the paying customers.
Once I made that split, the SEO and other benefits just sort of fell into place.
That is brilliant, is there a particular place you like hosting your main domain?
I just realized that this also makes wrapping the PWA into an android/iPhone TWA so much easier. Direct app.mydomain.com for the app that will be undisturbed by any uploads to the main domain used to market the app.
Will be doing this from now on, thank you that’s fantastic help.
Since I can keep my main site completely static, in the sense that there’s no server side code, just client side HTML/CSS/Javascript, I use Render.com to host it. I can edit the site on my local machine, push to Github, and when I’m ready to publish a new version I merge changes into a special branch that Render uses to trigger updates of its version of the site. It works very smoothly once everything’s setup, and Render’s documentation is very clear.
You can make lovely websites with Anvil. Create yourself a page template in HTML somewhere outside of anvil and then build it in. You will need to invest some time, especially in constructing interaction with your Python code, but it’s absolutely doable and you aren’t limited in what you can do. If you approach with patience, you’ll nail it.