I’ve created a little demo app to explore the options for using React and vite with Anvil. The app is essentially a clone of vite’s React starter kit - hooked up with two demo endpoints (one function- and one class-based) via a nifty function for calling those endpoints.
The built app is launched as a same-origin iframe. This means that using client-side Python is still possible, e.g., to sync routes between the parent window and the iframe. For this purpose, the app includes an event-based API.
On the one hand, it hurts me to use Anvil in this way – much more boiler plate and no more “nothing but Python”. On the other hand, it’s awesome to suddenly have full access to the vast React/npm ecosystem. And it’s cool that Anvil can be used in this non-canonical way.
Yep - even with the latest remix version. It took some grunt work combining it with backend routes, but it’s doable. However, since the demo I shared, I’ve come along way experimenting with Vite-built apps “wrapped” in Anvil and my current focus is on building my own Vite-built pure JS fullstack framework suitable for “Anvil wrapping”; it smacks of a super fast light-weight React/Vue-hybrid. I’ll share, when I’m ready to publish. Unfortunately, this means that I’m not quite sure, where I’ve put the React router demo… If you really, really, really need it, I can make an effort retrieving it from my scratch code… All the best
Oh wow, I’ve been trying to get it to work for a few hours today but couldn’t get it to work unfortunately. If you don’t mind having a brief look for your React router demo I’d be very grateful, but I’ll survive if you don’t have the time
Vite-built pure JS fullstack framework suitable for “Anvil wrapping” That sounds… awesome!
Feel free to ping me once you’re ready to publish, would love to play around with it!
Sure - I’ll put something together for you this weekend. As I recall the challenges were to set up handling of initial loads using Anvil server code (routes) and also to get my head around the latest version of ReactRouter (which is radically different from previous versions). Anyway, I’ll post something (unless it’s completely lost) no later than Sunday evening. And thanks for sharing my interest in “off-label” use of Anvil (we’re a rare tribe). I fully get the “nothing, but Python” thing, but I also believe that Anvil is very underutilized as a platform for easy deployment, database, routing and APIs that can serve built JS apps created with any framework including using the full range of node modules. As mentioned, my current focus is on a fast, declarative SPA framework “compatible” with Anvil (I will indeed ping you, when it’s more mature). However, and just FYI, I’ve also done some promising work in the other direction: Using Anvil to create Flask-like MPAs using Jinja2; it actually works pretty well (and gives you routing for free). In my mind, the only things that prevents Anvil from being a true power platform for anything are the not super-fast API response times, the lack of session-specific background tasks and especially the lack of web sockets support… I’m digressing; will get back to you
As per your request, I’ve put together an Anvil-integrated Vite-built demo app for you that uses (React and) React Router to support a default ‘/’ route, an ‘/about’ route and a ‘/terms’ route. The routes are reflected in server code so that page reload (bookmarking) is supported. Use the footer to try out the routes.
I’ve made an effort to keep the code on point and to provide explanatory comments. I’ve also also added a few README’s.
Please note that the app is not intended for running in the Anvil IDE. I have, however, for your convenience, placed the code so that all files can be inspected in the Anvil IDE (which I would normally not do – especially node modules).
Fair warning: I do not use React myself, so although I’ve done my best to adhere to what I believe is best practices, I cannot guarantee that the demo app is aligned with such.
Awesome to be able to host react apps with routing so easily using this template, thanks again for sharing! As I gather from the readme it should be possible to communicate with the anvil client and server, but I haven’t managed to pull this off so far (I’m probably missing something very obvious). Would you be able to point me in the right direction?
Re communication with server endpoints (from JS code)
Since the Vite-built code is injected directly into the Anvil client-side app (and not served as an iframe or a separate document) you can directly access server endpoints from the JS code using fetch without cors restrictions when running in production. However, when running the Vite dev server, you’ll need to relax cors restrictions server-side. There are multiple ways of doing this, including:
Manually changing headers server-side, when you run the Vite dev server.
Setting up a development environment in Anvil and then set cors-related headers based on the environment.
In parallel with the Vite dev server, run an Uplink server that sets a flag to relax cors-related headers (this is what I do).
Re communication with Anvil “callable server functions” (from JS code)
When running the Vite dev server, you cannot access Anvil “callable server functions”. However, you can indeed use such “server functions”, when serving the app from Anvil. Again, there are multiple ways to do this, including:
In Python client code before you import the main JS module, simply go: window.call_server = anvil.server.call. You can then use the global call_server function from JS. Be aware that this is actually an async function (masked when run in Python), so you’ll need to use await/then.
Set up event listeners on window or document in both Python (client) and JS code and fire custom events to facilitate communication between Python (client) and JS code. This feels a little bit like client-server communication, although it’s client JS – client Python. I believe that I did something like that in my original (VERY scratchy) demo app. And this is also how you can communicate between Anvil components and JS code…
In conclusion, I guess that the implicit vision is to be able to use Anvil in the “canonical way”, while at the same time have full access to all modern technologies in the JS space. I’ve spent a lot of time experimenting with this… While it can be done, I’ve personally concluded that the complexity involved with such a fully integrated solution is not worthwhile. Instead, I pursue the following strategy:
Do all client-side work in JS (with Vite etc.).
Do all server-side work as Anvil HTTP endpoints and use Anvil’s built-in database and user services.
Use Anvil as a deployment platform – either as shown in the demo app in question or by serving the built code as a separate document or an iframe from client-side Python.
If I really need to use an Anvil component (such a plot), I prefer to serve such a component in isolation, either as a separate page (route) or as an iframe (without attempting to communicate with it).
… It’s a personal preference at the end of the day. I started out doing the “nothing but Python” thing. While this is indeed a great choice, I’ve increasingly come to appreciate JS and the vast ecosystem around node (not to mention the power of VS Code).
I know that the above is hardly a comprehensive guide, but I hope you got the gist of it. As mentioned, I’ll share the stuff, I’m currently working on with you, when it’s more mature. It will demo many of the topics discussed.
Copymight © 2025