Skip to content

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:

├── 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!


Like my website? Pay me a coffee
References are available upon request. I hereby authorize the use of my personal data in compliance with the Italian D. Lgs. 196/2003, art. 13 for the purpose of making me job offers.