diff --git a/src/content/docs/es/guides/configuring-astro.mdx b/src/content/docs/es/guides/configuring-astro.mdx new file mode 100644 index 0000000000000..5c6af0fa2a0b8 --- /dev/null +++ b/src/content/docs/es/guides/configuring-astro.mdx @@ -0,0 +1,122 @@ +--- +title: Descripción general de la configuración +description: Conoce las formas en que puedes configurar y personalizar tu nuevo proyecto y tu experiencia de desarrollo. +i18nReady: true +--- +import ReadMore from '~/components/ReadMore.astro' + +Astro es un framework flexible, no dogmatico que te permite configurar tu proyecto de muchas formas diferentes. Esto significa que empezar un nuevo proyecto puede resultar abrumador: no hay «una mejor forma» de configurar tu proyecto de Astro. + +Las guías de esta sección de «Configuración» te ayudarán a familiarizarte con los diversos archivos que te permiten configurar y personalizar aspectos de tu proyecto y tu entorno de desarrollo. + +Si este es tu primer proyecto de Astro, o si ha pasado un tiempo desde que configuraste un nuevo proyecto, utiliza las siguientes guías y referencias en la documentación para obtener ayuda. + +## El archivo de configuración de Astro + +El [archivo de configuración de Astro](/es/reference/configuration-reference/) es un archivo de JavaScript incluido en la raíz de cada proyecto inicial: + +```js +// astro.config.mjs +import { defineConfig } from "astro/config"; + +export default defineConfig({ + // tus opciones de configuración aquí... +}); +``` + +Solo es necesario si tienes algo que configurar, pero la mayoría de los proyectos usarán este archivo. El asistente `defineConfig()` proporciona IntelliSense automático en tu IDE y es donde añadirás todas tus opciones de configuración para indicar a Astro cómo crear y renderizar tu proyecto en HTML. + +Recomendamos usar el formato de archivo predeterminado `.mjs` en la mayoría de los casos, o `.ts` si quieres escribir TypeScript en tu archivo de configuración. Sin embargo, `astro.config.js` también es compatible. + +Lee la [referencia de configuración](/es/reference/configuration-reference/) de Astro para obtener una visión general completa de todas las opciones de configuración compatibles. + +## El archivo de configuración de TypeScript + +Todo proyecto inicial de Astro incluye un archivo `tsconfig.json` en tu proyecto. El [script del componente](/es/basics/astro-components/#el-script-del-componente) de Astro es TypeScript, lo que proporciona las herramientas de editor de Astro y te permite añadir opcionalmente sintaxis a tu JavaScript para la verificación de tipos de tu propio código de proyecto. + +Usa el archivo `tsconfig.json` para configurar la plantilla de TypeScript que realizará verificaciones de tipo en tu código, configurar plugins de TypeScript, establecer alias de importación y más. + +Lee la [guía de TypeScript](/es/guides/typescript/) de Astro para obtener una visión general completa de las opciones de TypeScript y los tipos de utilidad integrados de Astro. + +## Experiencia de desarrollo + +Mientras trabajas en modo de desarrollo, puedes aprovechar tu editor de código y otras herramientas para mejorar la experiencia de desarrollo de Astro. + +Astro proporciona su propia extensión oficial de VS Code y es compatible con varias otras herramientas de editor populares. Astro también ofrece una barra de herramientas personalizable que se muestra en la vista previa del navegador mientras el servidor de desarrollo está en ejecución. Puedes instalar e incluso crear tus propias aplicaciones de barra de herramientas para funcionalidades adicionales. + +Lee las guías de Astro sobre [opciones de configuración del editor](/es/editor-setup/) y [uso de la barra de herramientas de desarrollo](/es/guides/dev-toolbar/) para aprender a personalizar tu experiencia de desarrollo. + +## Tareas comunes de proyectos nuevos + +Estos son algunos primeros pasos que podrías considerar con un nuevo proyecto de Astro. + +### Añadir tu dominio de despliegue + +Para generar tu sitemap y crear URLs canónicas, configura tu URL de despliegue en la opción [`site`](/es/reference/configuration-reference/#site). Si estás desplegando en una ruta (ej. `www.example.com/docs`), también puedes configurar una [`base`](/es/reference/configuration-reference/#base) para la raíz de tu proyecto. + +Además, diferentes plataformas de despliegue pueden tener comportamientos distintos con respecto a las barras inclinadas al final de tus URLs (ej. `example.com/about` vs `example.com/about/`). Una vez que tu sitio esté desplegado, es posible que necesites configurar tu preferencia de [`trailingSlash`](/es/reference/configuration-reference/#trailingslash). + +```js title="astro.config.mjs" +import { defineConfig } from "astro/config"; + +export default defineConfig({ + site: "https://www.example.com", + base: "/docs", + trailingSlash: "always", +}); +``` + +### Añadir metadatos del sitio + +Astro no utiliza su archivo de configuración para SEO común o metadatos, solo para la información necesaria para crear el código de tu proyecto y renderizarlo a HTML. + +En su lugar, esta información se añade al `` de tu página utilizando etiquetas HTML `` y `` estándar, como si estuvieras escribiendo páginas HTML simples. + +Un patrón común para los sitios de Astro es crear un componente `` [`.astro`](/es/basics/astro-components/) que se puede añadir a un [componente de diseño](/es/basics/layouts/) común para que se aplique a todas tus páginas. + +```astro title="src/components/MainLayout.astro" +--- +import Head from "./Head.astro"; + +const { ...props } = Astro.props; +--- + + + + + + + + + + +``` + +Como `Head.astro` es solo un componente regular de Astro, puedes importar archivos y recibir propiedades (props) de otros componentes, como un título de página específico. + +```astro title="src/components/Head.astro" +--- +import Favicon from "../assets/Favicon.astro"; +import SomeOtherTags from "./SomeOtherTags.astro"; + +const { title = "My Astro Website", ...props } = Astro.props; +--- + +{title} + + + + + + + + + + + + + + + + +``` diff --git a/src/content/docs/es/reference/configuration-reference.mdx b/src/content/docs/es/reference/configuration-reference.mdx new file mode 100644 index 0000000000000..4a6d3dceaa939 --- /dev/null +++ b/src/content/docs/es/reference/configuration-reference.mdx @@ -0,0 +1,2586 @@ +--- +title: Referencia de configuración +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/types/public/config.ts +--- + +import Since from '~/components/Since.astro' + +La siguiente referencia cubre todas las opciones de configuración compatibles con Astro. Para obtener más información sobre cómo configurar Astro, lee nuestra guía sobre [Configurar Astro](/es/guides/configuring-astro/). + +```js +// astro.config.mjs +import { defineConfig } from 'astro/config' + +export default defineConfig({ + // tus opciones de configuración aquí... +}) +``` +## Opciones de nivel superior + + +### site + + +

+ +**Type:** `string` +

+ +Tu URL final desplegada. Astro usa esta URL completa para generar tu sitemap y URLs canónicas en la compilación final. Se recomienda encarecidamente que configures esta opción para obtener el máximo provecho de Astro. + +```js +{ + site: 'https://www.my-site.dev' +} +``` + +### base +

+**Type:** `string` +

+ +La ruta base para desplegar. Astro usará esta ruta como raíz para tus páginas y recursos tanto en desarrollo como en la compilación de producción. + +En el siguiente ejemplo, `astro dev` iniciará tu servidor en `/docs`. + +```js +{ + base: '/docs' +} +``` +Al usar esta opción, todas tus importaciones de recursos estáticos y URLs deben añadir la base como prefijo. Puedes acceder a este valor a través de `import.meta.env.BASE_URL`. + +El valor de `import.meta.env.BASE_URL` será determinado por tu configuración de `trailingSlash`, independientemente del valor que hayas establecido para `base`. + +Siempre se incluye una barra inclinada final si `trailingSlash: "always"` está configurado. Si `trailingSlash: "never"` está configurado, `BASE_URL` no incluirá una barra inclinada final, incluso si `base` incluye una. + +Adicionalmente, Astro manipulará internamente el valor configurado de `config.base` antes de ponerlo a disposición de las integraciones. El valor de `config.base` leído por las integraciones también será determinado por tu configuración de `trailingSlash` de la misma manera. + +En el siguiente ejemplo, los valores de `import.meta.env.BASE_URL` y `config.base` procesados serán ambos `/docs`: +```js +{ + base: '/docs/', + trailingSlash: "never" +} +``` + +En el siguiente ejemplo, los valores de `import.meta.env.BASE_URL` y `config.base` procesados serán ambos `/docs/`: + +```js +{ + base: '/docs', + trailingSlash: "always" +} +``` + +### trailingSlash +

+**Type:** `'always' | 'never' | 'ignore'`
+**Default:** `'ignore'` +

+ +Define el comportamiento de coincidencia de rutas para las barras inclinadas finales en el servidor de desarrollo y las páginas renderizadas bajo demanda. Elige entre las siguientes opciones: + - `'ignore'` - Coincide con URLs independientemente de si existe una barra inclinada "/" final. Las solicitudes para "/about" y "/about/" coincidirán con la misma ruta. + - `'always'` - Solo coincide con URLs que incluyen una barra inclinada final (ej: "/about/"). En producción, las solicitudes de URLs renderizadas bajo demanda sin barra inclinada final serán redirigidas a la URL correcta. Sin embargo, en desarrollo, mostrarán una página de advertencia recordándote que tienes configurado `always`. + - `'never'` - Solo coincide con URLs que no incluyen una barra inclinada final (ej: "/about"). En producción, las solicitudes de URLs renderizadas bajo demanda con barra inclinada final serán redirigidas a la URL correcta. Sin embargo, en desarrollo, mostrarán una página de advertencia recordándote que tienes configurado `never`. + +Cuando ocurren redirecciones en producción para solicitudes GET, la redirección será 301 (permanente). Para todos los demás métodos de solicitud, será 308 (permanente y conserva el método de solicitud). + +Las barras inclinadas finales en páginas pre-renderizadas son gestionadas por la plataforma de alojamiento y pueden no respetar tu configuración elegida. Consulta la documentación de tu plataforma de alojamiento para más información. No puedes usar [redirects](#redirects) de Astro para este caso de uso en este momento. + +```js +{ + // Ejemplo: Requerir una barra inclinada final durante el desarrollo + trailingSlash: 'always' +} +``` +**Ver también:** +- build.format + +### redirects + +

+ +**Type:** `Record`
+**Default:** `{}`
+ +

+ +Especifica un mapeo de redirecciones donde la clave es la ruta a coincidir +y el valor es la ruta a la que redirigir. + +Puedes redirigir tanto rutas estáticas como dinámicas, pero solo al mismo tipo de ruta. +Por ejemplo, no puedes tener una redirección `'/article': '/blog/[...slug]'`. + +```js +export default defineConfig({ + redirects: { + '/old': '/new', + '/blog/[...slug]': '/articles/[...slug]', + '/about': 'https://example.com/about', + '/news': { + status: 302, + destination: 'https://example.com/news' + }, + // '/product1/', '/product1' // Nota: esto no es compatible + } +}) +``` + +Para sitios generados estáticamente sin un adaptador instalado, esto producirá una redirección del lado del cliente usando una [etiqueta ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#http-equiv) y no admite códigos de estado. + +Cuando se usa SSR o con un adaptador estático en modo `output: static`, +los códigos de estado son compatibles. +Astro servirá solicitudes GET redirigidas con un estado `301` +y usará un estado `308` para cualquier otro método de solicitud. + +Puedes personalizar el [código de estado de redirección](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages) usando un objeto en la configuración de redirecciones: + +```js +export default defineConfig({ + redirects: { + '/other': { + status: 302, + destination: '/place', + }, + } +}) + +``` + + +For statically-generated sites with no adapter installed, this will produce a client redirect using a [`` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#http-equiv) and does not support status codes. + +When using SSR or with a static adapter in `output: static` +mode, status codes are supported. +Astro will serve redirected GET requests with a status of `301` +and use a status of `308` for any other request method. + +You can customize the [redirection status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages) using an object in the redirect config: + +```js +export default defineConfig({ + redirects: { + '/other': { + status: 302, + destination: '/place', + }, + } +}) + + +``` + +### output + +

+ +**Type:** `'static' | 'server'`
+**Default:** `'static'` +

+ +Especifica el objetivo de salida para las compilaciones. + +- `'static'` - Pre-renderiza todas tus páginas por defecto, generando un sitio completamente estático si ninguna de tus páginas opta por no hacer pre-renderizado. +- `'server'` - Usa renderizado del lado del servidor (SSR) para todas las páginas por defecto, generando siempre un sitio renderizado en el servidor. + +```js +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + output: 'static' +}) +``` +**See Also:** +- adapter + +### adapter + +

+ +**Type:** `AstroIntegration` +

+ +Despliega en tu servidor, serverless o plataforma edge favorita con adaptadores de compilación. Importa uno de nuestros adaptadores oficiales ([Cloudflare](/es/guides/integrations-guide/cloudflare/), [Netlify](/es/guides/integrations-guide/netlify/), [Node.js](/es/guides/integrations-guide/node/), [Vercel](/es/guides/integrations-guide/vercel/)) o explora [adaptadores de la comunidad](https://astro.build/integrations/2/?search=&categories%5B%5D=adapters) para habilitar el renderizado bajo demanda en tu proyecto de Astro. + +Consulta nuestra [guía de renderizado bajo demanda](/es/guides/on-demand-rendering/) para más información sobre las opciones de renderizado en servidor de Astro. + +```js +import netlify from '@astrojs/netlify'; +{ + // Ejemplo: Compilar para despliegue serverless en Netlify + adapter: netlify(), +} +``` +**Ver también:** +- output + +### integrations + +

+ +**Type:** `AstroIntegration[]` +

+ +Extiende Astro con integraciones personalizadas. Las integraciones son tu ventanilla única para añadir soporte de frameworks (como Solid.js), nuevas funcionalidades (como sitemaps) y nuevas librerías (como Partytown). + +Lee nuestra [Guía de integraciones](/es/guides/integrations/) para obtener ayuda sobre cómo empezar con las integraciones de Astro. + +```js +import react from '@astrojs/react'; +import mdx from '@astrojs/mdx'; +{ + // Ejemplo: Añadir soporte React + MDX a Astro + integrations: [react(), mdx()] +} +``` + +### root + +

+ +**Type:** `string`
+**CLI:** `--root`
+**Default:** `"."` (directorio de trabajo actual) +

+ +Solo debes proporcionar esta opción si ejecutas los comandos de la CLI de `astro` en un directorio diferente al directorio raíz del proyecto. Normalmente, esta opción se proporciona a través de la CLI en lugar del archivo de configuración de Astro, ya que Astro necesita conocer la raíz de tu proyecto antes de poder localizar tu archivo de configuración. + +Si proporcionas una ruta relativa (ej: `--root: './my-project'`), Astro la resolverá con respecto a tu directorio de trabajo actual. + +#### Ejemplos + +```js +{ + root: './my-project-directory' +} +``` +```bash +$ astro build --root ./my-project-directory +``` + +### srcDir + +

+ +**Type:** `string`
+**Default:** `"./src"` +

+ +Establece el directorio del que Astro leerá tu sitio. + +El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto. + +```js +{ + srcDir: './www' +} +``` + +### publicDir + +

+ +**Type:** `string`
+**Default:** `"./public"` +

+ +Establece el directorio para tus recursos estáticos. Los archivos en este directorio se sirven en `/` durante el desarrollo y se copian a tu directorio de compilación durante la compilación. Estos archivos siempre se sirven o copian tal cual, sin transformación ni agrupación. + +El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto. + +```js +{ + publicDir: './my-custom-publicDir-directory' +} +``` + +### outDir + +

+ +**Type:** `string`
+**Default:** `"./dist"` +

+ +Establece el directorio donde `astro build` escribe tu compilación final. + +El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto. + +```js +{ + outDir: './my-custom-build-directory' +} +``` +**Ver también:** +- build.server + +### cacheDir + +

+ +**Type:** `string`
+**Default:** `"./node_modules/.astro"` +

+ +Establece el directorio para almacenar en caché los artefactos de compilación. Los archivos en este directorio se usarán en compilaciones posteriores para acelerar el tiempo de compilación. + +El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto. + +```js +{ + cacheDir: './my-custom-cache-directory' +} +``` + +### compressHTML + +

+ +**Type:** `boolean | "jsx"`
+**Default:** `true` +

+ +Controla cómo Astro maneja los espacios en blanco en tu HTML. Esto afecta tanto al modo de desarrollo como a la salida de compilación final. + +Por defecto, Astro elimina los espacios en blanco de tu HTML, incluidos los saltos de línea, de manera sin pérdidas en los componentes `.astro`. Algunos espacios en blanco pueden conservarse según sea necesario para mantener la representación visual de tu HTML. + +Desde la versión 6.2.0, esta opción también se puede establecer en `"jsx"`, Astro aplicará las reglas de eliminación de espacios en blanco JSX utilizadas por frameworks como React. Los espacios en blanco iniciales y finales solo se conservan cuando se incluyen explícitamente en el código fuente mediante construcciones como `{" "}`, y de lo contrario se eliminan por completo. + +Establecer esta opción en false deshabilita la compresión HTML y conserva todos los espacios en blanco. + +```js +{ + compressHTML: false + // o: + // compressHTML: 'jsx' +} +``` + +### scopedStyleStrategy + +

+ +**Type:** `'where' | 'class' | 'attribute'`
+**Default:** `'attribute'`
+ +

+ +Especifica la estrategia utilizada para aplicar estilos con alcance limitado dentro de los componentes de Astro. Elige entre: + - `'where'` - Usa selectores `:where`, sin aumentar la especificidad. + - `'class'` - Usa selectores basados en clases, aumentando la especificidad en +1. + - `'attribute'` - Usa atributos `data-`, aumentando la especificidad en +1. + +Usar `'class'` es útil cuando quieres asegurarte de que los selectores de elementos dentro de un componente de Astro sobrescriban los estilos globales predeterminados (ej. de una hoja de estilos global). +Usar `'where'` te da más control sobre la especificidad, pero requiere que uses selectores de mayor especificidad, capas y otras herramientas para controlar qué selectores se aplican. +Usar `'attribute'` es útil cuando estás manipulando el atributo `class` de los elementos y necesitas evitar conflictos entre tu propia lógica de estilos y la aplicación de estilos de Astro. + +### prerenderConflictBehavior + +

+ +**Type:** `'error' | 'warn' | 'ignore'`
+**Default:** `'warn'`
+ +

+ +Determina el comportamiento predeterminado cuando dos rutas generan la misma URL pre-renderizada: +- `error`: falla la compilación y muestra un error, obligándote a resolver el conflicto +- `warn` (predeterminado): registra una advertencia cuando ocurren conflictos, pero compila usando la ruta de mayor prioridad +- `ignore`: compila silenciosamente usando la ruta de mayor prioridad cuando ocurren conflictos + +```js +{ + prerenderConflictBehavior: 'error' +} +``` + +### vite + +

+ +**Type:** `ViteUserConfig` +

+ +Pasa opciones de configuración adicionales a Vite. Útil cuando Astro no admite alguna configuración avanzada que puedas necesitar. + +Consulta la documentación completa del objeto de configuración de `vite` en [vite.dev](https://vite.dev/config/). + +#### Ejemplos + +```js +{ + vite: { + ssr: { + // Ejemplo: Forzar a un paquete dañado a omitir el procesamiento SSR, si es necesario + external: ['broken-npm-package'], + } + } +} +``` + +```js +{ + vite: { + // Ejemplo: Añadir plugins personalizados de vite directamente a tu proyecto de Astro + plugins: [myPlugin()], + } +} +``` + +### security + +

+ +**Type:** `Record<"checkOrigin", boolean> | undefined`
+**Default:** `{checkOrigin: true}`
+ +

+ +Habilita medidas de seguridad para un sitio web de Astro. + +Estas funcionalidades solo existen para páginas renderizadas bajo demanda (SSR) usando el modo `server` o páginas que optan por no hacer pre-renderizado en el modo `static`. + +Por defecto, Astro comprobará automáticamente que la cabecera «origin» +coincide con la URL enviada por cada solicitud en páginas renderizadas bajo demanda. Puedes +deshabilitar este comportamiento estableciendo `checkOrigin` en `false`: + +```js +// astro.config.mjs +export default defineConfig({ + output: "server", + security: { + checkOrigin: false + } +}) +``` + +#### security.checkOrigin + +

+ +**Type:** `boolean`
+**Default:** `true`
+ +

+ +Realiza una comprobación de que la cabecera «origin», enviada automáticamente por todos los navegadores modernos, coincide con la URL enviada por cada `Request`. Esto se utiliza para proporcionar protección contra falsificación de solicitudes entre sitios (CSRF). + +La comprobación de «origin» se ejecuta solo para páginas renderizadas bajo demanda, y solo para las solicitudes `POST`, `PATCH`, `DELETE` y `PUT` con +una de las siguientes cabeceras `content-type`: `'application/x-www-form-urlencoded'`, `'multipart/form-data'`, `'text/plain'`. + +Si la cabecera «origin» no coincide con el `pathname` de la solicitud, Astro devolverá un código de estado 403 y no renderizará la página. + +#### security.allowedDomains + +

+ +**Type:** `Array`
+**Default:** `[]`
+ +

+ +Define una lista de patrones de host permitidos para solicitudes entrantes cuando se usa SSR. Al configurarlo, Astro validará la cabecera `X-Forwarded-Host` +contra estos patrones por seguridad. Si la cabecera no coincide con ningún patrón permitido, se ignora y se usa el host original de la solicitud. + +Esto previene ataques de inyección de cabeceras host donde actores maliciosos pueden manipular el valor de `Astro.url` enviando cabeceras `X-Forwarded-Host` manipuladas. + +Cada patrón puede especificar `protocol`, `hostname` y `port`. Los tres se validan si se proporcionan. +Los patrones admiten comodines para la coincidencia flexible de nombres de host: + +- `*.example.com` - coincide exactamente con un nivel de subdominio (ej., `sub.example.com` pero no `deep.sub.example.com`) +- `**.example.com` - coincide con cualquier profundidad de subdominio (ej., tanto `sub.example.com` como `deep.sub.example.com`) + +```js +{ + security: { + // Ejemplo: Permitir cualquier subdominio de example.com en https + allowedDomains: [ + { + hostname: '**.example.com', + protocol: 'https' + }, + { + hostname: 'staging.myapp.com', + protocol: 'https', + port: '443' + } + ] + } +} +``` + +En algunos contextos específicos (ej., aplicaciones detrás de proxies inversos de confianza con dominios dinámicos), es posible que necesites permitir todos los dominios. Para hacerlo, usa un objeto vacío: + +```js +{ + security: { + // Permitir cualquier dominio - usa esto solo cuando sea necesario + allowedDomains: [{}] + } +} +``` + +Cuando no está configurado, las cabeceras `X-Forwarded-Host` no son de confianza y se ignoran. + +#### security.actionBodySizeLimit + +

+ +**Type:** `number`
+**Default:** `1048576` (1 MB)
+ +

+ +Establece el tamaño máximo en bytes permitido para los cuerpos de las solicitudes de acciones. + +Por defecto, los cuerpos de las solicitudes de acciones están limitados a 1 MB (1048576 bytes) para prevenir abusos. +Puedes aumentar este límite si tus acciones necesitan aceptar cargas útiles más grandes, por ejemplo al manejar subidas de archivos. + +```js +// astro.config.mjs +export default defineConfig({ + security: { + actionBodySizeLimit: 10 * 1024 * 1024 // 10 MB + } +}) +``` + +#### security.serverIslandBodySizeLimit + +

+ +**Type:** `number`
+**Default:** `1048576` (1 MB)
+ +

+ +Establece el tamaño máximo en bytes permitido para los cuerpos de las solicitudes de server islands, que contienen las propiedades (props) encriptadas y el HTML del slot pasado al componente island. + +Por defecto, los cuerpos de las solicitudes de server islands están limitados a 1 MB (1048576 bytes) para prevenir abusos. +Puedes aumentar este límite si tus server islands necesitan aceptar cargas útiles más grandes. + +```js +// astro.config.mjs +export default defineConfig({ + security: { + serverIslandBodySizeLimit: 10 * 1024 * 1024 // 10 MB + } +}) +``` + +#### security.csp + +

+ +**Type:** `boolean | object`
+**Default:** `false`
+ +

+ +Habilita el soporte para [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) para ayudar a minimizar ciertos tipos de amenazas de seguridad controlando qué recursos puede cargar un documento. Esto proporciona protección adicional contra ataques de [cross-site scripting (XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). + +Habilitar esta función añade seguridad adicional al manejo de Astro de scripts y estilos procesados y agrupados por defecto, y te permite configurar aún más estos y otros tipos de contenido. + +Esta función tiene algunas limitaciones: +- Los scripts y estilos externos no son compatibles de forma nativa, pero puedes [proporcionar tus propios hashes](#securitycspscriptdirectivehashes). +- Las [transiciones de vista](/es/guides/view-transitions/) de Astro que usan `` no son compatibles, pero puedes [considerar migrar a la API nativa de View Transition del navegador](https://events-3bg.pages.dev/jotter/astro-view-transitions/) si no estás usando las mejoras de Astro para las APIs nativas de View Transitions y Navigation. +- Shiki no es compatible actualmente. Por diseño, las funciones de Shiki usan estilos en línea que no pueden funcionar con la implementación de CSP de Astro. Considera [usar ``](/es/guides/syntax-highlighting/#prism-) cuando tu proyecto requiera tanto CSP como resaltado de sintaxis. +- Las directivas `unsafe-inline` son incompatibles con la implementación de CSP de Astro. Por defecto, Astro emitirá hashes para todos sus scripts agrupados (ej. islands de cliente) y todos los navegadores modernos rechazarán automáticamente `unsafe-inline` cuando aparezca en una directiva con un hash o nonce. + +:::note +Debido a la naturaleza del servidor de desarrollo de Vite, esta función no es compatible mientras se trabaja en modo `dev`. En su lugar, puedes probar esto en tu proyecto de Astro usando `build` y `preview`. +::: + +Cuando está habilitado, Astro añadirá un elemento `` dentro del elemento `` de cada página. +Este elemento tendrá el atributo `http-equiv="content-security-policy"`, y el atributo `content` proporcionará valores para las [directivas](#securitycspdirectives) `script-src` y `style-src` basadas en los scripts y estilos utilizados en la página. + +```html + + + + +``` + +Puedes personalizar aún más el elemento `` habilitando esta función con un objeto de configuración que incluya opciones adicionales. + +##### security.csp.algorithm + +

+ +**Type:** `"SHA-256" | "SHA-384" | "SHA-512"`
+**Default:** `'SHA-256'`
+ +

+ +La [función hash](https://developer.mozilla.org/en-US/docs/Glossary/Hash_function) a utilizar al generar los hashes de los estilos y scripts emitidos por Astro. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + algorithm: 'SHA-512' + } + } +}); +``` + +##### security.csp.directives + +

+ +**Type:** `Array`
+**Default:** `[]`
+ +

+ +Una lista de [directivas CSP](https://content-security-policy.com/#directive) (además de `script-src` y `style-src` que se incluyen por defecto) que define fuentes válidas para tipos de contenido específicos. Estas directivas se añaden a todas las páginas. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + directives: [ + "default-src 'self'", + "img-src 'self' https://images.cdn.example.com" + ] + } + } +}); +``` +Después de la compilación, el elemento `` añadirá tus directivas al valor de `content` junto con las directivas predeterminadas de Astro: + +```html + +``` + +##### security.csp.styleDirective + +

+ +**Type:** `CspStyleDirective`
+**Default:** `undefined`
+ +

+ +Un objeto de configuración que te permite sobrescribir las fuentes predeterminadas para la directiva `style-src` con la propiedad [`resources`](#securitycspstyledirectiveresources), o proporcionar [hashes](#securitycspstyledirectivehashes) adicionales para renderizar. + +###### security.csp.styleDirective.hashes + +

+ +**Type:** `Array`
+**Default:** `[]`
+ +

+ +Una lista de hashes adicionales para renderizar. + +Debes proporcionar hashes que comiencen con `sha384-`, `sha512-` o `sha256-`. Otros valores causarán un error de validación. Estos hashes se añaden a todas las páginas. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + styleDirective: { + hashes: [ + "sha384-styleHash", + "sha512-styleHash", + "sha256-styleHash" + ] + } + } + } +}); +``` + +After the build, the `` element will include your additional hashes in the `style-src` directives: + +```html + +``` + +###### security.csp.styleDirective.resources + +

+ +**Type:** `Array`
+**Default:** `[]`
+ +

+ +Una lista de fuentes válidas para las directivas `style-src` para sobrescribir las fuentes predeterminadas de Astro. Esto no incluirá `'self'` por defecto, y debe incluirse en esta lista si deseas mantenerlo. Estos recursos se añaden a todas las páginas. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + styleDirective: { + resources: [ + "'self'", + "https://styles.cdn.example.com" + ] + } + } + } +}); +``` + +After the build, the `` element will instead apply your sources to the `style-src` directives: + +```html + + + +``` + +Cuando los recursos se insertan varias veces o desde múltiples fuentes (ej. definidos en tu configuración de `csp` y añadidos usando [la API de CSP en tiempo de ejecución](/es/reference/api-reference/#csp)), Astro fusionará y deduplicará todos los recursos para crear tu elemento ``. + +##### security.csp.scriptDirective + +

+ +**Type:** `CspScriptDirective`
+**Default:** `undefined`
+ +

+ +Un objeto de configuración que te permite sobrescribir las fuentes predeterminadas para la directiva `script-src` con la propiedad [`resources`](#securitycspscriptdirectiveresources), o proporcionar [hashes](#securitycspscriptdirectivehashes) adicionales para renderizar. + +###### security.csp.scriptDirective.hashes + +

+ +**Type:** `Array`
+**Default:** `[]`
+ +

+ +Una lista de hashes adicionales para renderizar. + +Debes proporcionar hashes que comiencen con `sha384-`, `sha512-` o `sha256-`. Otros valores causarán un error de validación. Estos hashes se añaden a todas las páginas. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + scriptDirective: { + hashes: [ + "sha384-scriptHash", + "sha512-scriptHash", + "sha256-scriptHash" + ] + } + } + } +}); +``` + +After the build, the `` element will include your additional hashes in the `script-src` directives: + +```html + +``` + +###### security.csp.scriptDirective.resources + +

+ +**Type:** `Array`
+**Default:** `[]`
+ +

+ +Una lista de fuentes válidas para las directivas `script-src` para sobrescribir las fuentes predeterminadas de Astro. Esto no incluirá `'self'` por defecto, y debe incluirse en esta lista si deseas mantenerlo. Estos recursos se añaden a todas las páginas. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + scriptDirective: { + resources: [ + "'self'", "https://cdn.example.com" + ] + } + } + } +}); +``` + +After the build, the `` element will instead apply your sources to the `script-src` directives: + +```html + + + +``` + +Cuando los recursos se insertan varias veces o desde múltiples fuentes (ej. definidos en tu configuración de `csp` y añadidos usando [la API de CSP en tiempo de ejecución](/es/reference/api-reference/#csp)), Astro fusionará y deduplicará todos los recursos para crear tu elemento ``. + +###### security.csp.scriptDirective.strictDynamic + +

+ +**Type:** `boolean`
+**Default:** `false`
+ +

+ +Habilita [la palabra clave `strict-dynamic`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP#the_strict-dynamic_keyword) para admitir la inyección dinámica de scripts. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + security: { + csp: { + scriptDirective: { + strictDynamic: true + } + } + } +}); +``` + +## Opciones de compilación + + +### build.format + +

+ +**Type:** `('file' | 'directory' | 'preserve')`
+**Default:** `'directory'` +

+ +Controla el formato de archivo de salida de cada página. Este valor puede ser establecido por un adaptador. + - `'file'`: Astro generará un archivo HTML nombrado para cada ruta de página. (ej. `src/pages/about.astro` y `src/pages/about/index.astro` ambos generan el archivo `/about.html`) + - `'directory'`: Astro generará un directorio con un archivo `index.html` anidado para cada página. (ej. `src/pages/about.astro` y `src/pages/about/index.astro` ambos generan el archivo `/about/index.html`) + - `'preserve'`: Astro generará archivos HTML exactamente como aparecen en tu carpeta de origen. (ej. `src/pages/about.astro` genera `/about.html` y `src/pages/about/index.astro` genera el archivo `/about/index.html`) + +```js +{ + build: { + // Ejemplo: Genera `page.html` en lugar de `page/index.html` durante la compilación. + format: 'file' + } +} +``` + + + +#### Efecto en Astro.url +La configuración de `build.format` controla el valor de `Astro.url` durante la compilación. Cuando es: +- `directory` - `Astro.url.pathname` incluirá una barra inclinada al final para imitar el comportamiento de una carpeta. (ej. `/foo/`) +- `file` - `Astro.url.pathname` incluirá `.html`. (ej. `/foo.html`) + +Esto significa que cuando creas URLs relativas usando `new URL('./relative', Astro.url)`, obtendrás un comportamiento consistente entre el desarrollo y la compilación. + +Para evitar inconsistencias con el comportamiento de la barra inclinada final en desarrollo, puedes restringir la [`opción trailingSlash`](#trailingslash) a `'always'` o `'never'` según tu formato de compilación: +- `directory` - Establece `trailingSlash: 'always'` +- `file` - Establece `trailingSlash: 'never'` + +### build.client + +

+ +**Type:** `string`
+**Default:** `'./client'` +

+ +Controla el directorio de salida de tu CSS y JavaScript del lado del cliente al compilar un sitio web con páginas renderizadas en el servidor. +`outDir` controla dónde se compila el código. + +Este valor es relativo a `outDir`. + +```js +{ + output: 'server', + build: { + client: './client' + } +} +``` + +### build.server + +

+ +**Type:** `string`
+**Default:** `'./server'` +

+ +Controla el directorio de salida del JavaScript del servidor al compilar para SSR. + +Este valor es relativo a `outDir`. + +```js +{ + build: { + server: './server' + } +} +``` + +### build.assets + +

+ +**Type:** `string`
+**Default:** `'_astro'`
+ +

+ +Especifica el directorio en la salida de compilación donde deben ubicarse los recursos generados por Astro (por ejemplo, JS y CSS empaquetados). + +```js +{ + build: { + assets: '_custom' + } +} +``` +**Ver también:** +- outDir + +### build.assetsPrefix + +

+ +**Type:** `string | Record`
+**Default:** `undefined`
+ +

+ +Especifica el prefijo para los enlaces de recursos generados por Astro. Esto se puede usar si los recursos se sirven desde un dominio diferente al del sitio actual. + +Esto requiere subir los recursos de tu carpeta local `./dist/_astro` a una carpeta `/_astro/` correspondiente en el dominio remoto. +Para renombrar la ruta `_astro`, especifica un nuevo directorio en `build.assets`. + +Para obtener todos los recursos subidos al mismo dominio (ej. `https://cdn.example.com/_astro/...`), establece `assetsPrefix` como una cadena con el dominio raíz (independientemente de tu configuración `base`): + +```js +{ + build: { + assetsPrefix: 'https://cdn.example.com' + } +} +``` + +**Añadido en:** `astro@4.5.0` + +También puedes pasar un objeto a `assetsPrefix` para especificar un dominio diferente para cada tipo de archivo. +En este caso, la propiedad `fallback` es obligatoria y se usará por defecto para cualquier otro archivo. + +```js +{ + build: { + assetsPrefix: { + 'js': 'https://js.cdn.example.com', + 'mjs': 'https://js.cdn.example.com', + 'css': 'https://css.cdn.example.com', + 'fallback': 'https://cdn.example.com' + } + } +} +``` + +### build.serverEntry + +

+ +**Type:** `string`
+**Default:** `'entry.mjs'` +

+ +Especifica el nombre del archivo de punto de entrada del servidor al compilar para SSR. +Este punto de entrada generalmente depende del host al que estás desplegando y +será establecido por tu adaptador. + +Ten en cuenta que se recomienda que este archivo termine en `.mjs` para que el entorno de ejecución +detecte que el archivo es un módulo de JavaScript. + +```js +{ + build: { + serverEntry: 'main.mjs' + } +} +``` + +### build.redirects + +

+ +**Type:** `boolean`
+**Default:** `true`
+ +

+ +Especifica si las redirecciones se enviarán a HTML durante la compilación. +Esta opción solo aplica al modo `output: 'static'`; en SSR las redirecciones +se tratan igual que cualquier otra respuesta. + +Esta opción está pensada principalmente para ser usada por adaptadores que tienen archivos de +configuración especiales para redirecciones y no necesitan/quieren redirecciones basadas en HTML. + +```js +{ + build: { + redirects: false + } +} +``` + +### build.inlineStylesheets + +

+ +**Type:** `'always' | 'auto' | 'never'`
+**Default:** `auto`
+ +

+ +Controla si los estilos del proyecto se envían al navegador en un archivo CSS separado o se insertan en línea en etiquetas `