What I’m trying to do:
Develop an application that includes an advanced imaging component, written in Javascript (JS, TypeScript, utilizing React). The imaging component is a fairly large project that uses ~20 js libraries.
What I’ve tried and what’s not working:
Before diving into the particularities of Anvil and trying to make this work, I’m seeking advise from some of the more experienced Anvil developers on the likely success of such an endeavor. I need to avoid wasting a month or two in time and having to give up in the end. Any pitfalls to look out for?
I would say if you have something working on a stand-alone machine already, you might try dipping your toes into anvil-uplink and see if you can’t build some python code to interact with your javascript / React project. From there you can use it as a bridge to interact with anvil using uplink.
On the server side, you can use any preinstalled package, or create your own Python 3.10 environment.
On the client side, you can use any javascript library available from any CDN, or you can include the source code in the app.
My apps include Excel files and test folders that I add after cloning the app to my computer, stuff that is only used while developing and testing offline. You can add any library, just try to avoid including too much stuff that you don’t need.
What you’re proposing looks thoroughly achievable! If you’re building something in JS, the approach I’d recommend is to build the JS project with a standard JS toolchain (Webpack, etc), bundling it into a single .js file with all it’s dependencies. Then include that file in your Anvil assets, and use anvil.js to access the JS libraries from your Python code. You’ll probably want to check your app out in Git and have a shell script/batch file/build step that builds your JS code, copies the bundle into your Anvil app, commits it and pushes it up into Anvil (that’s what I do in those cases).
Remember that most Anvil components use concrete DOM nodes rather than React’s virtual DOM, so you’ll want your JS module to have an entrypoint for “render what you want to into [this DOM node]”.
Finally, if it makes sense, wrap your JS library into a Custom Component written in Python (or a module if you don’t need UI), so that non-Javascript programmers can grab it and use it!