Open jimkring opened 4 months ago
I believe the static assets could go in the python package since the NPM version and Python version has different version tags.
I believe it'll be harder to manage NPM version from Python side.
So I propose including assets inside the python dist like Flask Admin which includes bootstrap, select2, etc.
@hasansezertasan yes, I was thinking the same thing. the python package should work "out of the box" and include the assets inside the python dist. I guess that there needs to also be some easy way to set up serving these static assets (e.g. from fastapi). It would be nice if this could be part of some magic that the fastui package provides
I guess that there needs to also be some easy way to set up serving these static assets (e.g. from fastapi). It would be nice if this could be part of some magic that the fastui package provides
I don't think the "easy way to set up serving assets from FastAPI (or Flask or anything else)" is a great idea.
When you install the FastUI Python dist that contains assets, it should be really easy to set it up to serve static files.
When you use FastAPI, you just need to add one extra argument to the StaticFile
app. The same goes for Starlette too.
When you use Flask, you just need to plug an extra Blueprint that has 2 or 3 extra parameters passed.
This will keep FastUI more "framework agnostic", without the magic but required assets.
If the author says "That magic sounds good", I recommend a contrib
architecture.
It seems like a good example to add to @hasansezertasan/fastui-tutorials
Sometimes it's nice to use FastUI's python integration with local copies of the js/css files:
- Situations where there is no Internet/CDN connectivity, such as behind a corporate firewall (See It works only with internet #307)
- When using/testing custom builds of the TypeScript components
Instructions might look something like:
Using Local Copies of the JS/CSS files:
- download the js and css files locally (ensure you have the correct version numbers, since these links are just examples):
- https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@0.0.23/dist/assets/index.js
- https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@0.0.23/dist/assets/index.css
- Place
index.js
andindex.css
in a folder under your fastapi/flask project where you serve static files, for example inside astatic/assets
folder.- Configure fastapi and fastui as something like the following. Note that the key is to set the
fastui._PREBUILT_CDN_URL
variable that fastui uses for defining the location of the JS/CSS files, when generating the HTML pages.from fastapi import FastAPI from fastapi.staticfiles import StaticFiles import fastui app = FastAPI() # make sure you have a folder named 'static' in your project and put the css and js files inside a subfolder called 'assets' app.mount("/static", StaticFiles(directory="static"), name="static") # configure fastui to use these local css and js files instead of the ones on the CDN fastui._PREBUILT_CDN_URL = f'/static/assets' ...
I added lines for local files and now when I log in to the console I get the error js.map, is this normal? "GET /static/assets/index.js.map HTTP/1.1" 404 Not Found
I added lines for local files and now when I log in to the console I get the error js.map, is this normal? "GET /static/assets/index.js.map HTTP/1.1" 404 Not Found
Sorry for not linking this here. This should help: https://github.com/pydantic/FastUI/issues/307#issuecomment-2118092490
Sometimes it's nice to use FastUI's python integration with local copies of the js/css files:
Instructions might look something like:
Using Local Copies of the JS/CSS files:
1) download the js and css files locally (ensure you have the correct version numbers, since these links are just examples):
2) Place
index.js
andindex.css
in a folder under your fastapi/flask project where you serve static files, for example inside astatic/assets
folder.3) Configure fastapi and fastui as something like the following. Note that the key is to set the
fastui._PREBUILT_CDN_URL
variable that fastui uses for defining the location of the JS/CSS files, when generating the HTML pages.