# Espaces HTML statiques

Les Spaces prennent également en charge le HTML personnalisé pour votre application au lieu d’utiliser Streamlit ou Gradio. Définissez `sdk: static` dans le bloc `YAML` en haut du fichier **README.md** de votre Space. Vous pouvez ensuite placer votre code HTML dans un fichier **index.html**.

Les Spaces statiques sont gratuits pour tous : ils sont servis directement sans exécution sur un calcul, contrairement aux Spaces [Gradio](./spaces-sdks-gradio) et [Docker](./spaces-sdks-docker), leur création ne nécessite donc jamais un abonnement payant.

Voici quelques exemples de Spaces utilisant du HTML personnalisé :

* [NPC plus intelligent](https://huggingface.co/spaces/mishig/smarter_npc) : Affichez un projet PlayCanvas avec une iframe dans Spaces.
* [Huggingfab](https://huggingface.co/spaces/pierreant-p/huggingfab) : Afficher un modèle Sketchfab dans Spaces.
* [Diffuser le reste](https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest) : Dessiner et diffuser le reste

## Ajouter une étape de compilation avant le service

Les Spaces statiques prennent en charge l’ajout d’une étape de compilation personnalisée avant la diffusion de vos ressources statiques. Cela est utile pour les frameworks front-end tels que React, Svelte et Vue, qui nécessitent un processus de compilation avant la diffusion de l’application. La commande de compilation s’exécute automatiquement lorsque votre Space est mis à jour.

Ajoutez `app_build_command` dans le bloc `YAML` en haut de votre fichier **README.md** de Spaces, ainsi que `app_file`.

Par exemple :
- `app_build_command: npm run build`
- `app_file: dist/index.html`

Exemples d'espaces :

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

En interne, il [démarre une compilation](https://huggingface.co/spaces/huggingface/space-build) et stocke les fichiers générés dans une référence spéciale `refs/convert/build`.

## Variables d'espace

Des [variables d’environnement](./spaces-overview#managing-secrets) personnalisées peuvent être transmises à votre Space. Les informations OAuth, telles que l’identifiant client et le périmètre, sont également disponibles sous forme de variables d’environnement, si vous avez [activé OAuth](./spaces-oauth) pour votre Space.

Pour utiliser ces variables dans JavaScript, vous pouvez utiliser l'objet `window.huggingface.variables`. Par exemple, pour accéder à la variable `OAUTH_CLIENT_ID`, vous pouvez utiliser `window.huggingface.variables.OAUTH_CLIENT_ID`.

Voici un exemple d’Space utilisant des variables d’environnement personnalisées et l’oauth activé, et affichant les variables dans le HTML :

* [Variables statiques](https://huggingface.co/spaces/huggingfacejs/static-variables)