Servir archivos estáticos en ASP.NET Core

Estrada Web Group
Estrada Web Group
Servir archivos estáticos en ASP.NET Core

En este artículo, aprenderás cómo proveer archivos estáticos en ASP.NET Core. ASP.NET Core tiene la capacidad de entregar archivos estáticos como HTML, CSS, imágenes y JavaScript directamente a los clientes, sin pasar por el Middleware de MVC.

Proveer archivos estáticos

HTML, CSS, imágenes, archivos JavaScript se denominan archivos estáticos. Hay dos formas de servir archivos estáticos en ASP.NET Core MVC. Directamente o a través de la acción del controlador. En este tutorial, veremos cómo hacerlo directamente.

Los archivos estáticos son aquellos archivos cuyo contenido no cambia dinámicamente cuando el usuario lo solicita. Por lo tanto, no tiene ningún sentido que la solicitud llegue hasta el Middleware de MVC, solo para servir estos archivos. ASP.NET Core proporciona un Middleware integrado solo para esta tarea.

Construyamos un proyecto para demostrar cómo servir los archivos estáticos

Crear un nuevo proyecto

Abre el Visual Studio 2022 y crea un nuevo proyecto ASP.NET Core usando la plantilla vacía. Nombra el proyecto como StaticFiles. Puede consultar el tutorial Introducción a ASP.NET Core para hacerlo.

Ejecuta el proyecto anterior para verificar que todo esté bien.

Middleware de archivos estáticos

Hablamos sobre el middleware y Request Pipeline en este tutorial.

Para servir un archivo estático, debemos agregar el middleware de archivos estáticos. Este Middleware está disponible en el ensamblado Microsoft.AspNetCore.StaticFiles. No es necesario instalar este ensamblado, ya que forma parte del metapaquete Microsoft.AspNetCore.All.

Podemos configurar ASP.NET Core para servir archivos estáticos usando el método de extensión UseStaticFiles.

Abre el archivo Program.cs y agrega la línea de código app.UseStaticFiles antes de app.run como se muestra a continuación.

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.UseStaticFiles();

app.Run();

Ten en cuenta que app.Run es un middleware de terminación. Entonces, si coloca UseStaticFiles después de app.Run, no se ejecutará.

¿Dónde se encuentran los archivos estáticos?

Por convención, los archivos estáticos se almacenan en la carpeta raíz web (wwwroot) (<content-root>/wwwroot). Puede cambiar esto si lo deseas.

Raíz de contenido (Content root)

La raíz del contenido es la ruta base de la aplicación. Todos los archivos de la aplicación, como vistas, controladores, páginas, javascript o cualquier archivo que pertenezca a la aplicación.

La raíz del contenido es la misma que la ruta base de la aplicación para el ejecutable que aloja la aplicación.

Raíz web (Webroot)

La raíz web de una aplicación es el directorio dentro de la raíz de contenido desde donde se almacenan los recursos estáticos, como CSS, JavaScript y archivos de imagen.
Crear un archivo estático

Ahora, agreguemos un archivo estático test.html.

Seleccione la carpeta wwwroot, haz clic derecho y seleccione agregar -> agregar nuevo elemento

Elije la página HTML y nombre el archivo como test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p> Hola mundo de test.html </p>
</body>
</html>


Archivos estaticos en ASP.NET Core

Ahora, ejecuta el proyecto y verás “Hello World

Ahora, agrega test.html a la URL y actualiza el sitio. Deberías ver "Hola mundo de test.html"

Archivos estáticos y seguridad

El middleware de archivos estáticos no comprueba si el usuario está autorizado para ver el archivo.

Si deseas que solo el usuario autorizado acceda al archivo, debes almacenar el archivo fuera de la carpeta wwwroot. Luego puedes servir el archivo usando la acción del controlador y devolviendo un FileResult.

static files asp.net core

static files asp.net core

 

UseStaticFile es un middleware de terminación

Los archivos estáticos son un Middleware de terminación. Si se encuentra el archivo, devolverá el archivo y finalizará la canalización de la solicitud.

Llamará al siguiente middleware, solo si no puede encontrar el recurso solicitado

Cómo configurar la ruta raíz del contenido y la ruta webroot

Como se mencionó en la sección anterior, los archivos estáticos generalmente se encuentran en la raíz web.

Necesitamos configurar la raíz del contenido para que sea el directorio actual. Esto ya está hecho para nosotros con el método CreateDefaultBuilder en el program.cs.

CreateDefaultBuilder es una clase auxiliar que hace parte del trabajo de configuración por nosotros. Puedes ver el código fuente desde aquí.

Establece la raíz del contenido en la ruta base de la aplicación invocando el método de extensión UseContentRoot

.UseContentRoot(Directory.GetCurrentDirectory())

Por convención, Webroot se establece en la carpeta wwwroot.

Puedes cambiarlo llamando al método de extensión UseWebroot.

Resumen

En el tutorial, analizamos cómo entregar archivos estáticos con ASP.NET Core.

 

 

Compartir artículo:

Más artículos geniales

Avances del desarrollo del proyecto de sistema de inventarios

Avances del desarrollo del proyecto de sistema de inventarios

Si quieres aprender a programar un sistema de inventarios desde cero este es el lugar correcto. Aquí puedes descargar los avances del proyecto y te describo las funcionalidades desarrolladas

Ver artículo completo
Aprende a integrar pagos con PayPal en ASP.NET Core: Crear una cuenta de PayPal

Aprende a integrar pagos con PayPal en ASP.NET Core: Crear una cuenta de PayPal

En este artículo te enseñare a crear una cuenta de PayPal para recibir pagos en tu página web y creare una serie de artículos donde te mostrare diferentes formas de integrar PayPal en tu sitio web desarrollado con ASP.NET Core para recibir pagos.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla