Flask - Les fichiers statiques

Qu'est-ce qu'un fichier "statique" ?

Un fichier statique est un fichier qui n'est pas généré ou modifié dynamiquement par le serveur. Contrairement aux pages ou aux données générées par des templates ou des bases de données, les fichiers statiques restent constants. Quelques exemples typiques :

Images : JPEG, PNG, GIF.
Feuilles de style CSS : Utilisées pour définir la présentation graphique du site.
Scripts JavaScript : Code côté client qui ajoute des interactions dynamiques aux pages.
Polices web : Pour améliorer la typographie.

Ces fichiers sont chargés directement par le navigateur et ne nécessitent pas de traitement particulier côté serveur, hormis l'envoi du fichier au client. Les fichiers statiques sont pré-enregistrés et restent toujours les mêmes.

Pourquoi les fichiers statiques sont-ils importants ?

Les fichiers statiques jouent un rôle majeur dans l'aspect visuel et interactif d'une application web. Par exemple, sans les fichiers CSS, une page web serait une simple collection de texte brut sans style, et sans JavaScript, il serait impossible d'ajouter des interactions complexes comme la validation de formulaires ou l'animation de menus.

Pendant le développement, la gestion des fichiers statiques est cruciale pour :

Organiser le projet : Centraliser et bien organiser vos ressources statiques vous permet de maintenir un code propre et évolutif.
Accélérer le chargement des pages : Bien gérer les fichiers statiques permet de réduire la taille des ressources envoyées au navigateur, améliorant ainsi la vitesse de chargement.
Améliorer l'expérience utilisateur : Les styles et les scripts permettent de créer une interface conviviale, agréable et interactive.

Gestion des fichiers statiques avec Flask

Flask simplifie la gestion des fichiers statiques via un dossier nommé static/ à la racine de votre projet. Par défaut, Flask sait où trouver les fichiers statiques et les rend directement accessibles depuis l'URL /static/<nom_du_fichier>.

Exemple de structure de projet

Voici comment structurer un projet Flask typique avec des fichiers statiques :

mon_projet/
│
├── static/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── script.js
│   └── images/
│       └── logo.png
│
└── app.py

static/ : Ce dossier contient tous les fichiers statiques de l'application. À l'intérieur, vous pouvez organiser les sous-dossiers en fonction du type de fichiers (CSS, JavaScript, images, etc.).
app.py : Fichier principal contenant le code Flask.

Comment utiliser les fichiers statiques

Lorsque vous placez des fichiers dans le dossier static/, ils deviennent accessibles via une URL simple. Par exemple :

Un fichier CSS placé dans static/css/styles.css sera accessible à l'URL /static/css/styles.css.
Une image dans static/images/logo.png sera accessible à l'URL /static/images/logo.png.

Vous pouvez directement référencer ces fichiers dans vos pages HTML.

Exemple d'inclusion d'un fichier CSS dans une page HTML

Imaginons que vous ayez un fichier CSS pour le style de votre site. Voici comment l'inclure dans votre fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page</title>
    <!-- Inclusion du fichier CSS -->
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <h1>Bienvenue sur mon site web</h1>
</body>
</html>

Dans cet exemple, le fichier styles.css est référencé à l'URL /static/css/styles.css. Flask servira automatiquement ce fichier CSS lorsqu'un utilisateur visitera votre site.

Inclusion d'images dans une page HTML

Si vous avez un fichier image, par exemple un logo, dans le dossier static/images/, vous pouvez l'inclure ainsi dans votre HTML :

<img src="/static/images/logo.png" alt="Logo du site">

Le chemin de l'image est /static/images/logo.png, et Flask servira ce fichier lorsque la page sera chargée.

Utilisation de JavaScript

Les fichiers JavaScript sont utilisés pour ajouter des fonctionnalités interactives à votre site web. Par exemple, voici comment inclure un fichier JavaScript :

<script src="/static/js/script.js"></script>

Ce fichier script.js sera exécuté chaque fois que la page se charge.

Exemple complet

Voici un exemple de page HTML qui utilise des fichiers statiques pour le style, les images, et les fonctionnalités JavaScript :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page complète avec fichiers statiques</title>
    <!-- CSS -->
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    
    <!-- Image -->
    <img src="/static/images/logo.png" alt="Logo">
    
    <!-- JavaScript -->
    <button id="monBouton">Cliquez ici</button>
    <script src="/static/js/script.js"></script>
</body>
</html>

Dans cet exemple :

Le fichier CSS stylise la page.
Une image est affichée sous forme de logo.
Un script JavaScript est inclus pour ajouter une fonctionnalité dynamique au bouton.

Les bonnes pratiques pour l'utilisation des fichiers statiques

Lorsque vous travaillez avec des fichiers statiques dans Flask, voici quelques bonnes pratiques à suivre :

Organisez bien vos fichiers : Placez vos fichiers CSS, JavaScript, et images dans des sous-dossiers pour garder votre projet bien structuré.
Nommez vos fichiers clairement : Utilisez des noms de fichiers explicites pour faciliter leur gestion. Par exemple, utilisez styles.css pour un fichier de style, et non main.css, qui pourrait être trop vague.
Minifiez vos fichiers avant la mise en production : Réduisez la taille de vos fichiers CSS et JavaScript avant de déployer votre application en production, pour améliorer les temps de chargement.
Évitez les fichiers inutiles : Supprimez les fichiers statiques qui ne sont plus utilisés afin de ne pas alourdir votre projet inutilement.

Conclusion

Les fichiers statiques dans le développement web permettent d'améliorer l'apparence et l'interactivité de votre site. Avec Flask, il est très facile de gérer ces fichiers via le dossier static/, où vous pouvez organiser vos fichiers CSS, JavaScript et images. En les référant directement via des chemins simples dans vos pages HTML, vous pouvez rapidement et facilement créer des interfaces utilisateur riches et interactives.

N'oubliez pas que bien organiser vos fichiers statiques et suivre les bonnes pratiques vous aidera à maintenir un projet propre et performant, surtout à mesure que votre application grandit.

Vidéo à la une à regarder sur Youtube: http://youtu.be/urp_b3bWcfE

Télécharger en PDF

Liens utiles

Flask - Static files (Docs) 🇬🇧

Pour aller plus loin

Vidéo à la une