loading static JS file
Hi Team
I'm doing a POC to integrate dhtmlx gantt chart inside Solara.
my project directory structure -
project-root/
|
|---app.py
|---sol.py
|---static/
| |---public/
| |---dhtmlxgantt.js
| |---dhtmlxgantt.css
I'm mounting the static folder, check below code
from fastapi import FastAPI
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
later mounted the app too
when I'm trying to access the static file inside my html
solara.HTML(mycustomhtml)
it always and only mounts the css file and skips the js file
also I keep getting 404 error in console for
solara_app/static/base/js/namespace.js & solara_app/static/base/js/utils.js
please guide me here, how to fix this
18 Replies
We already have a way to support static files, see https://solara.dev/documentation/advanced/reference/static-files
So I do not think you need to do add the fastapi endpoints, which conflict with the solara static mount.
Please take a careful look at the docs, because the public directory needs to be layed out differently.
Let us know if this solves your problem.
Using static files and resources in your Solara application
When using Solara, you can host static files, like images, which will then be available at /static/public, in the ../public folder.
I had tried this already, but failed (here no files were available, neither jpeg); ended up mounting the static files
Hello,
I followed the docs -
https://solara.dev/documentation/advanced/reference/static-files
https://solara.dev/documentation/advanced/reference/asset-files
The issue I am encountering with fetching static files inside a <script> tag in a Solara component.
Here’s the scenario:
I am using the solara.HTML component to include HTML content within my Solara application:
solara.HTML(tag="div", my_html)
In the my_html variable, I have included a script tag to load a JavaScript file:
<script src="/static/assets/dhtmlxgantt.js"></script>
The problem is that the JavaScript file (or any CSS file (I did this just to verify)) specified in the <script> tag does not get loaded.
However, when I provide these paths using a <link> tag for CSS or JS, the files are available and load correctly.
Could you please assist with how to properly serve and access static JavaScript files within Solara when using the <script> tag?
Thank you!
Using static files and resources in your Solara application
When using Solara, you can host static files, like images, which will then be available at /static/public, in the ../public folder.
Incorporating your assets, styles, and logos into your app
Solara looks for overrides of certain style and asset files in the assets folder by default. You can use these to incorporate your branding into your dashboard or app.
also in the network tab (F12) console I can see 404 for
:8765/static/base/js/utils.js:1
:8765/static/base/js/namespace.js:1
I think it's best to do this from a .vue file, you can get some inspiration here: https://github.com/widgetti/solara/blob/7199489d0648a5285cc931d2d96ba7ad60560432/solara/components/sql_code.vue#L8
does that help you?
Those errors are probably harmless, and some notebook extension that fails to load in solara (which is ok)
solara/components/sql_code.vue line 8
This won't meet the success criteria for choosing a framework that uses Python for both UI and backend development. How can I achieve this using only Python ? (as Solara is - A pure Python, React-style web framework)
My reason for suggesting a vue file, is that you have lifetime control, should the JS file be removed?
If not, maybe this works better:
solara.HTML(tag="script", attributes={"src": "foo.js"})
Does that work for you?okay,
I was able to include dhtmlxgantt.js using
solara.HTML(tag="script", attributes=("src": "/static/assets/dhtmlxgantt.js", "onload": "initializeGantt()"})
However, inside the function initializeGantt its not able to access gantt (though it loaded the js and I could view it inside the sources tab in static folder while debugging in browser)
I'm getting ReferenceError: gantt is not defined.
could u please guide me here?
gentle reminderI am not sure I can help, this is not really Solara development, this is almost frontend development, and i do not have enough information to debug this remotely.
I don't know where gantt should be defined.
Maybe you can make a very minimal js file, with just 1 function, say foo.js with a function named foo, which does a console log, and which you try to call.
If that does not work, you can share your setup, and I can try to reproduce it.
ok thanks, will check
sol.py has the component I'm trying to create, I tried all possible ways I could but I keep getting ReferenceError: gantt is not defined
I have attached images for reference along with dhtmlxgantt files (JS & CSS)
Please check this when once
@mariobuikhuizen could you please guide me here?
because requirejs is loaded, the .js bundle uses requirejs, and does not create a global. You need to use requirejs, I have an example that loads here:
https://py.cafe/maartenbreddels/interactive-gantt-chart
PyCafe - Solara - Interactive Gantt Chart load example
Run, Edit and Share Python Apps in Your Browser with 1 click!
the café example should load requirejs?
hmm, the js file was not uploaded, and it included a bug, not sure why it worked for me before, but now it should work
requirejs loaded is only required for jupyter lab, and that's why i referrred to the .vue example
this was very basic, I'm new to frontend dev, thanks for the help!