Come usare una Single Page Application (SPA) su Hugging Face Space

Quando ho iniziato a lavorare su questa versione demo di Hugging Face di SamGIS avevo bisogno anche per implementare il frontend statico. Dato che il backend di Hugging Face utilizza Fastapi modificato l'utilizzo di StaticFiles() così:

app.mount("/", StaticFiles(directory="static/dist", html=True), name="static")

Si tenga presente che la cartella static contiene sia la cartella dist che la cartella node_modules:

static/
├── dist
│   ├── assets
│   │   └── index-FDtpfbXx.js
│   ├── index.html
│   ├── output.css
│   └── ... png, svg, etc
└── node_modules
    └── ...

9 directories, 22 files

Per utilizzare un css prodotto da tailwind serve aggiungere uno step di build dedicato all'interno del dockerfile:

#dockerfile

RUN --mount=type=cache,id=pnpm,target=/pnpm/store if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then \
    pnpm build; fi
RUN --mount=type=cache,id=pnpm,target=/pnpm/store if [ "${DEPENDENCY_GROUP}" = "fastapi" ]; then \
    pnpm tailwindcss -i /appnode/src/input.css -o /appnode/dist/output.css; fi

Questo è il modo in cui si fa in un lavoretto semplice!