Guías Técnicas

Cómo Agregar Archivos Estáticos y Recursos (CSS, JS, Imágenes)

  Archivos Estáticos y Recursos (CSS, JS, Imágenes)

En esta guía, aprenderás a servir archivos estáticos en Flask, incluyendo CSS, JavaScript e imágenes. Además, veremos cómo incorporar frameworks frontend como Bootstrap en tus aplicaciones Flask.

Cómo Servir Archivos Estáticos

Flask permite servir archivos estáticos a través de la carpeta static. Esta carpeta debe estar ubicada en el mismo nivel que tu archivo principal de la aplicación.

1. Crea la carpeta static:

En tu proyecto Flask, crea una carpeta llamada static.

2. Agrega archivos estáticos:

Dentro de la carpeta static, puedes añadir tus archivos CSS, JS e imágenes.

Por ejemplo:
bash 
/mi_proyecto 
├── app.py 
└── static 
  ├── css 
  │   └── styles.css 
  ├── js 
  │   └── scripts.js 
  └── images 
      └── logo.png

3. Acceder a archivos estáticos:

Para acceder a los archivos estáticos en tus plantillas HTML, puedes utilizar la función url_for. Esta función genera una URL basada en el nombre de la función de vista y el nombre del archivo, lo que facilita la gestión de los recursos.

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Agregando Archivos Estáticos</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
  <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
  <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
</head>
<body>
  <h1>Agregando Archivos Estáticos en mi archivo index.html</h1>
</body>
</html>

Incorporar Frameworks Frontend como Bootstrap

Para utilizar Bootstrap en tu proyecto Flask, puedes enlazarlo directamente desde un CDN en tu plantilla HTML.

Aquí tienes un ejemplo de cómo hacerlo:

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Aplicación Flask</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
      <h1>Bienvenido a mi aplicación Flask</h1>
      <p>Esto es un ejemplo de cómo utilizar Bootstrap con Flask.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
</body>
</html>