Using a Single Page Application (SPA) on a Hugging Face Space

When I started working on this Hugging Face demo version of SamGIS I needed also to deploy the static fronted. Since the Hugging Face backend uses Fastapi I changed the way I use StaticFiles() this way:

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

Note that the static folder contains both the dist and the node_modules folder:

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

9 directories, 22 files

Remember that to use a tailwind css it's necessary to add a dedicated build within the dockerfile like this:

# 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

That's the way you do it an easy task!