Provide documentation on how to use FastUI with local copies of js/css files

[jimkring]

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 #307)
• When using/testing custom builds of the TypeScript components

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):

• https://cdn.jsdelivr.net/npm/@pydantic/[email protected]/dist/assets/index.js
• https://cdn.jsdelivr.net/npm/@pydantic/[email protected]/dist/assets/index.css

2. Place index.js and index.css in a folder under your fastapi/flask project where you serve static files, for example inside a static/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.

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'

...

[hasansezertasan]

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.

[jimkring]

@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

[hasansezertasan]

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.

[hasansezertasan]

It seems like a good example to add to @hasansezertasan/fastui-tutorials

[Nosikmov]

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:

1. 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/[email protected]/dist/assets/index.js
• https://cdn.jsdelivr.net/npm/@pydantic/[email protected]/dist/assets/index.css

2. Place index.js and index.css in a folder under your fastapi/flask project where you serve static files, for example inside a static/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.

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

[simonryf]

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