Skip to content
6 changes: 6 additions & 0 deletions docs/hub/spaces-config-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,12 @@ Value must be one of `"small"`, `"medium"` or `"large"`.
Path to your main application file (which contains either `gradio` or `streamlit` Python code, or `static` html code).
Path is relative to the root of the repository.

**`app_build_command`** : _string_
For static Spaces, command to run first to generate the HTML to render. Use together with `app_file`. Example: `npm run build`.

Each update, the build command will run and the build output will be stored in `refs/convert/build`,
which will be served by the Space. See an example at https://huggingface.co/spaces/coyotte508/static-vite

**`app_port`** : _int_
Port on which your application is running. Used only if `sdk` is `docker`. Default port is `7860`.

Expand Down
18 changes: 18 additions & 0 deletions docs/hub/spaces-sdks-static.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,25 @@ Here are some examples of Spaces using custom HTML:

* [Smarter NPC](https://huggingface.co/spaces/mishig/smarter_npc): Display a PlayCanvas project with an iframe in Spaces.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab): Display a Sketchfab model in Spaces.
* [Diffuse the rest](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest): Draw and diffuse the rest

## Adding a build step before serving

Static Spaces support adding a custom build step before serving your static assets. This is useful for frameworks like Next.js, SvelteKit, and others that require a build process before serving. The build command runs automatically when your Space is updated.
Copy link
Member Author

@coyotte508 coyotte508 May 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that Next.js and sveltekit may not be the most appropriate as they specialize in SSR and need some config to build SPAs

(and https://huggingface.co/spaces/static-templates/sveltekit / https://static-templates-sveltekit.static.hf.space I don't know why it doesn't work 😬)

Copy link
Contributor

@gary149 gary149 May 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mhh it should work with adapter static (didn't check the code)
ah ok https://huggingface.co/spaces/static-templates/sveltekit/blob/main/svelte.config.js idk

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if it doesnt work for next.js/sveltekit we can rollaback the wording to react/svelte/vue

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes i would emphasize frontend only frameworks like React/Svelte/Vue

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


Add `app_build_command` inside the `YAML` block at the top of your Spaces **README.md** file, and `app_file`.

For example:
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Example spaces:

- [Svelte App](https://huggingface.co/spaces/julien-c/vite-svelte)
- [React App](https://huggingface.co/spaces/coyotte508/static-vite)


Under the hood, it will [launch a build](https://huggingface.co/spaces/huggingface/space-build), storing the generated files in a special `refs/convert/build` ref.
## Space variables

Custom [environment variables](./spaces-overview#managing-secrets) can be passed to your Space. OAuth information such as the client ID and scope are also available as environment variables, if you have [enabled OAuth](./spaces-oauth) for your Space.
Expand Down