Referencia de configuración
La siguiente referencia cubre todas las opciones de configuración compatibles en Astro. Para obtener más información sobre la configuración de Astro, consulta nuestra guía sobre configuración de Astro.
Opciones de nivel superior
Sección titulada Opciones de nivel superiorTipo: string
CLI: --root
Por defecto: "."
(carpeta de trabajo actual)
Solo debes proporcionar esta opción si ejecutas los comandos CLI astro
en una carpeta que no sea la carpeta raíz del proyecto. Por lo general, 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 que pueda localizar su archivo de configuración.
Si proporcionas una ruta relativa (p. ej., --root: './my-project'
), Astro la resolverá en tu directorio de trabajo actual.
Ejemplos
Sección titulada EjemplossrcDir
Sección titulada srcDirTipo: string
Por defecto: "./src"
Establece la carpeta desde el cual Astro leerá tu proyecto.
El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto.
publicDir
Sección titulada publicDirTipo: string
Por defecto: "./public"
Establece la carpeta para los activos estáticos. Los archivos en esta carpeta se sirven desde /
durante el desarrollo y se copian en la carpeta de compilación durante la compilación. Estos archivos siempre se sirven o se copian tal cual, sin transformación ni empaquetamiento.
El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto.
outDir
Sección titulada outDirTipo: string
Por defecto: "./dist"
Establece la carpeta en la que astro build
escribe la compilación final.
El valor puede ser una ruta absoluta del sistema de archivos o una ruta relativa a la raíz del proyecto.
Ver también:
- build.server
cacheDir
Sección titulada cacheDirTipo: string
Por defecto: "./node_modules/.astro"
Establece el directorio para almacenar en caché los artefactos de compilación. Los archivos de este directorio se utilizará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.
redirects
Sección titulada redirectsTipo: Record.<string, RedirectConfig>
Por defecto: {}
astro@2.9.0
Especifica un mapeo de redirecciones donde la clave es la ruta a coincidir y el valor es la ruta a la que se redirige.
Puedes redirigir tanto rutas estáticas como dinámicas, pero solo a un tipo de ruta similar.
Por ejemplo, no puedes tener una redirección '/article': '/blog/[...slug]'
.
Para sitios generados estáticamente sin un adaptador instalado, esto producirá una redirección del cliente utilizando una etiqueta <meta http-equiv="refresh">
y no admitirá códigos de estado.
Cuando se utiliza SSR o un adaptador estático en el modo output: static
, se admiten los códigos de estado.
Astro servirá las solicitudes GET redirigidas con un estado 301
y utilizará un estado 308
para cualquier otro método de solicitud.
Puedes personalizar el código de estado de redirección utilizando un objeto en la configuración de redirección:
Tipo: string
La URL final donde se desplegará. Astro usa esta URL completa para generar el sitemap y las URL canónicas en la compilación final. Se recomienda establecer esta configuración para aprovechar al máximo Astro.
compressHTML
Sección titulada compressHTMLTipo: boolean
Por defecto: true
Esta es una opción para minificar tu salida HTML y reducir el tamaño de tus archivos HTML. Por defecto, Astro elimina todos los espacios en blanco de tu HTML, incluyendo los saltos de línea, en los componentes .astro
. Esto ocurre tanto en el modo de desarrollo como en la compilación final.
Para desactivar la compresión del HTML, establece el parámetro compressHTML
en false
.
Tipo: string
La ruta base en la que se desplegará. Astro usará esta ruta como la raíz para tus páginas y activos en desarrollo y producción.
En el ejemplo de abajo, astro dev
empezará tu servidor en /docs
.
Cuando utilices esta opción, todas tus importaciones de activos estáticos y URL deben agregar 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
se determinará según la configuración de trailingSlash
, sin importar el valor que hayas establecido para base
.
Se incluirá una barra diagonal al final siempre que se establezca trailingSlash: "always"
. Si se establece trailingSlash: "never"
, BASE_URL
no incluirá una barra diagonal al final, incluso si base
la incluye.
Además, Astro manipulará internamente el valor configurado de config.base
antes de ponerlo a disposición de las integraciones. El valor de config.base
tal como lo leen las integraciones también se determinará según la configuración de trailingSlash
de la misma manera.
En el siguiente ejemplo, los valores de import.meta.env.BASE_URL
y config.base
, al ser procesados, serán ambos /docs
:
En el siguiente ejemplo, los valores de import.meta.env.BASE_URL
y config.base
, al ser procesados, serán ambos /docs/
:
trailingSlash
Sección titulada trailingSlashTipo: 'always' | 'never' | 'ignore'
Por defecto: 'ignore'
Establece el comportamiento de coincidencia de rutas del servidor de desarrollo. Elige entre las siguientes opciones:
'always'
: solo coincide con las URL que incluyen una barra inclinada al final (por ejemplo: “/foo/“)'never'
: nunca haga coincidir las URL que incluyen una barra inclinada al final (por ejemplo: “/foo”)'ignore'
: coincide con las URL independientemente de si existe un ”/” final
Utiliza esta opción de configuración si tu host de producción tiene un manejo estricto de cómo funcionan o no las barras inclinadas finales.
También puedes configurar esto si prefieres ser más estricto, de modo que las URL con o sin barras diagonales finales no funcionen durante el desarrollo.
Ver también:
- build.format
scopedStyleStrategy
Sección titulada scopedStyleStrategyTipo: 'where' | 'class' | | 'attribute
Por defecto: 'where'
astro@2.4
Especifica la estrategia utilizada para delimitar los estilos dentro de los componentes de Astro. Elige entre:
'where'
- Utilizar selectores:where
, sin que aumente la especificidad.'class'
- Utilizar selectores basados en clases, lo que provoca un aumento de la especificidad de +1.'attribute'
- Utilizar atributosdata-
, sin aumentar la especificidad a +1.
Utilizar 'class'
es útil cuando quieres asegurar que los selectores de elementos dentro de un componente de Astro anulan los valores predeterminados de estilo global (p. ej. de una hoja de estilos global).
Utilizar 'where'
te brinda más control sobre la especificidad, pero requiere que utilices selectores de mayor especificidad, capas y otras herramientas para controlar qué selectores se aplican.
Utilizar 'attribute'
es útil cuando estás manipulando el atributo class
de elementos y necesitas evitar conflictos entre tu lógica de estilo y la aplicación de estilos de Astro.
adapter
Sección titulada adapterTipo: AstroIntegration
Despliega a tu servidor favorito, serverless o edge host con adaptadores de compilación. Importa uno de nuestros adaptadores propios para Netlify, Vercel, y más para incluir a Astro SSR.
Consulta nuestra guía de renderizado en el servidor para obtener más información sobre SSR, y nuestras guías de despliegue para obtener una lista completa de hosts.
Ver también:
- output
output
Sección titulada outputTipo: 'static' | 'server'
Por defecto: 'static'
Especifica el tipo de la compilación.
'static'
: construye un sitio estático para implementarlo en cualquier host estático.'server'
: construye una aplicación que se implementará en un host compatible con SSR (renderizado en el servidor).'hybrid'
- Construye un sitio estático con algunas páginas renderizadas en el lado del servidor.
Ver también:
- adapter
Opciones de Build
Sección titulada Opciones de Buildbuild.format
Sección titulada build.formatTipo: ('file' | 'directory')
Por defecto: 'directory'
Controla el formato del archivo compilado de cada página.
- Si es
'file'
, Astro generará un archivo HTML (por ejemplo: “/foo.html”) para cada página. - Si es
'directory'
, Astro generará un directorio con un archivoindex.html
anidado (por ejemplo: “/foo/index.html”) para cada página.
Efecto en Astro.url
Sección titulada Efecto en Astro.urlLa opción build.format
indica el valor que Astro.url
obtendrá durante la compilación. Si es:
directory
-Astro.url.pathname
incluirá una barra final para imitar el comportamiento de carpetas. Ej.:/foo/
.file
-Astro.url.pathname
incluirá.hmtl
. Ej.:/foo.html
.
Esto significa que cuando crees URLs relativas usando new URL('./relativa', Astro.url)
, tendrás un comportamiento consistente entre desarrollo y compilación.
Para evitar inconsistencias con el comportamiento de la barra diagonal final en desarrollo, puedes restringir la opción trailingSlash
a 'always'
o 'never'
dependiendo del formato de compilación:
directory
- EstablecetrailingSlash: 'always'
file
- EstablecetrailingSlash: 'never'
build.client
Sección titulada build.clientTipo: string
Por defecto: './dist/client'
Controla el directorio de salida del CSS y JavaScript del lado del cliente solamente cuando esté configurado output: 'server'
o output: 'hybrid'
.
outDir
controla dónde se compila el código.
Este valor es relativo al outDir
.
build.server
Sección titulada build.serverTipo: string
Por defecto: './dist/server'
Controla el directorio de salida del JavaScript del servidor cuando compila a SSR.
Este valor es relativo al outDir
.
build.assets
Sección titulada build.assetsTipo: string
Por defecto: '_astro'
astro@2.0.0
Especifica el directorio en la salida de compilación donde los activos generados por Astro (por ejemplo, JS y CSS empaquetados) deben ir.
Ver también:
- outDir
build.assetsPrefix
Sección titulada build.assetsPrefixTipo: string
Por defecto: undefined
astro@2.2.0
Especifica el prefijo para los enlaces de activos generados por Astro. Esto se puede usar si los activos se sirven desde un dominio diferente al del sitio actual.
Por ejemplo, si se establece en https://cdn.example.com
, los activos se buscarán desde https://cdn.example.com/_astro/...
(independientemente de la opción base
).
Tu tendrías que subir los archivos en ./dist/_astro/
a https://cdn.example.com/_astro/
para servir los activos.
El proceso varía según cómo está alojado el dominio de terceros.
Para cambiar el nombre de la ruta _astro
, especifique un nuevo directorio en build.assets
.
build.serverEntry
Sección titulada build.serverEntryTipo: string
Por defecto: 'entry.mjs'
Especifica el nombre de archivo del punto de entrada al servidor cuando compila a SSR. Este punto de entrada suele depender del host al que estés desplegando y será configurado por el adaptador que estés utilizando.
Ten en cuenta que se recomienda que este archivo tenga la extensión .mjs
así el runtime
detecta que el archivo es un módulo de JavaScript.
build.redirects
Sección titulada build.redirectsTipo: boolean
Por defecto: true
astro@2.6.0
Especifica si las redirecciones se generarán en HTML durante la compilación. Esta opción solo se aplica al modo output: 'static'
; en SSR, las redirecciones se tratan de la misma manera que todas las respuestas.
Esta opción está destinada principalmente a ser utilizada por adaptadores que tienen archivos de configuración especiales para redirecciones y no necesitan/desean redirecciones basadas en HTML.
build.inlineStylesheets
Sección titulada build.inlineStylesheetsTipo: 'always' | 'auto' | 'never'
Por defecto: auto
astro@2.6.0
Controla si los estilos del proyecto se envían al navegador en un archivo CSS separado o se incrustan en etiquetas <style>
. Elige entre las siguientes opciones:
'always'
- los estilos del proyecto se incrustan en etiquetas<style>
.'auto'
- solo las hojas de estilo más pequeñas que ViteConfig.build.assetsInlineLimit (por defecto: 4 kB) se incrustan. De lo contrario, los estilos se envían en hojas de estilo externas.'never'
- los estilos del proyecto se envían en hojas de estilo externas.
build.split
Sección titulada build.splitDeprecado desde la versión 3.0.
Tipo: boolean
Por defecto: false
La opción de configuración de compilación build.split
ha sido reemplazada por la opción de configuración del adaptador functionPerRoute
.
Por favor, consulta la documentación de tu adaptador SSR en la guía de integraciones para usar functionPerRoute
y definir cómo se empaqueta tu código SSR.
build.excludeMiddleware
Sección titulada build.excludeMiddlewareDeprecado desde la versión 3.0.
Tipo: boolean
Por defecto: false
La opción de configuración de compilación build.excludeMiddleware
ha sido reemplazada por la opción de configuración del adaptador edgeMiddleware
.
Por favor, consulta la documentación de tu adaptador SSR en la guía de integraciones para utilizar edgeMiddleware
y definir si se empaquetará o no el código de middleware SSR durante la compilación.
Opciones de Precarga
Sección titulada Opciones de PrecargaTipo: boolean | object
Habilita la precarga de enlaces en tu sitio para proporcionar transiciones de página más rápidas.
(Activado de forma predeterminada en las páginas que utilizan el router <ViewTransitions />
. Establece prefetch: false
para optar por no utilizar este comportamiento.)
Esta configuración agrega automáticamente un script de precarga a cada página del proyecto
dandote acceso al atributo data-astro-prefetch
.
Agrega este atributo a cualquier enlace <a />
en tu página para habilitar el prefetching para esa página.
Para personalizar aún más el comportamiento predeterminado de precarga puedes usar las opciones prefetch.defaultStrategy
y prefetch.prefetchAll
.
Consulta la guía de Prefetch para obtener más información.
prefetch.prefetchAll
Sección titulada prefetch.prefetchAllTipo: boolean
Habilita la precarga para todos los enlaces, incluidos aquellos sin el atributo data-astro-prefetch
.
El valor predeterminado es true
cuando se utiliza el router <ViewTransitions />
. De lo contrario, el valor predeterminado es false
.
Cuando se establece en true
, puedes deshabilitar el prefetching individualmente estableciendo data-astro-prefetch="false"
en cualquier enlace individual.
prefetch.defaultStrategy
Sección titulada prefetch.defaultStrategyTipo: 'tap' | 'hover' | 'viewport'
Por defecto: 'hover'
La estrategia de precarga predeterminada para utilizar cuando el atributo data-astro-prefetch
está establecido en un enlace sin valor.
'tap'
: Precarga justo antes de hacer clic en el enlace.'hover'
: Precarga cuando pasas el cursor o te enfocas en el enlace. (predeterminada)'viewport'
: Precarga cuando los enlaces entran en el viewport.
Puedes reemplazar este valor predeterminado y seleccionar una estrategia diferente para cualquier enlace individual estableciendo un valor en el atributo.
Opciones del Servidor
Sección titulada Opciones del ServidorPersonaliza el entorno de desarrollo de Astro, utilizado por astro dev
y astro preview
.
Para establecer una configuración diferente basada en el comando ejecutar (“dev”, “preview”), también puedes pasar una función a esta opción de configuración.
server.host
Sección titulada server.hostTipo: string | boolean
Por defecto: false
astro@0.24.0
Establece en qué direcciones de IP el servidor debe escuchar (es decir, direcciones IP no locales).
false
- no exponer una dirección IPtrue
- escuchar todas las direcciones, incluidas LAN y direcciones públicas[dirección personalizada]
- exponer una dirección IP en[dirección personalizada]
(por ejemplo,192.168.0.1
)
server.port
Sección titulada server.portTipo: number
Por defecto: 4321
Establece en qué puerto debe escuchar el servidor.
Si el puerto dado ya está en uso, Astro probará automáticamente el siguiente puerto disponible.
server.headers
Sección titulada server.headersTipo: OutgoingHttpHeaders
Por defecto: {}
astro@1.7.0
Establece encabezados de respuesta HTTP personalizados para enviar en astro dev
y astro preview
.
Opciones de Imagen
Sección titulada Opciones de Imagenimage.endpoint
Sección titulada image.endpointTipo: string
Por defecto: undefined
astro@3.1.0
Configura el endpoint a utilizar para la optimización de imágenes en desarrollo y SSR. Establece undefined
para utilizar el endpoint por defecto.
El endpoint siempre se inyectará en /_image
.
image.service
Sección titulada image.serviceTipo: Object
Por defecto: {entrypoint: 'astro/assets/services/sharp', config?: {}}
astro@2.1.0
Establece qué servicio de imágenes se utiliza para el soporte de assets de Astro.
El valor debe ser un especificador de módulo para el servicio de imágenes que se utilizará: uno de los dos servicios incorporados de Astro o una implementación de terceros.
image.domains
Sección titulada image.domainsTipo: Array.<string>
Por defecto: {domains: []}
astro@2.10.10
Define una lista de dominios de origen de imágenes permitidos para la optimización de imágenes remotas. No se optimizarán otras imágenes remotas por Astro.
Esta opción require un arreglo de nombres de dominio individuales como strings. Los comodines no están permitidos. En su lugar, usa image.remotePatterns
para definir una lista de patrones de URL de origen permitidos.
image.remotePatterns
Sección titulada image.remotePatternsTipo: Array.<RemotePattern>
Por defecto: {remotePatterns: []}
astro@2.10.10
Define una lista de patrones de URL de origen permitidos para la optimización de imágenes remotas.
remotePatterns
pueden ser configurados con cuatro propiedades:
- protocol
- hostname
- port
- pathname
Puedes usar comodines para definir los valores hostname
y pathname
permitidos como se describe a continuación. De lo contrario, solo se configurarán los valores exactos proporcionados:
hostname
:
- Empiezar con ’**.’ para permitir todos los subdominios (‘endsWith’).
- Empiezar con ’*.’ para permitir solo un nivel de subdominio.
pathname
:
- Terminar con ’/**’ para permitir todas las sub-rutas (‘startsWith’).
- Terminar con ’/*’ para permitir solo un nivel de sub-ruta.
Opciones de Markdown
Sección titulada Opciones de Markdownmarkdown.drafts
Sección titulada markdown.draftsDeprecado desde la versión 3.0. Utiliza colecciones de contenido en su lugar.
Tipo: boolean
Por defecto: false
Controla si las páginas Markdown de borrador deben incluirse en la compilación.
Una página de Markdown se considera un borrador si incluye draft: true
en el frontmatter. Las páginas de borrador siempre se incluyen y son visibles durante el desarrollo (astro dev
), pero de forma predeterminada no se incluirán en la compilación final.
markdown.shikiConfig
Sección titulada markdown.shikiConfigTipo: Partial<ShikiConfig>
Opciones de configuración de Shiki. Consulta la documentación de configuración de Markdown para conocer su uso.
markdown.syntaxHighlight
Sección titulada markdown.syntaxHighlightTipo: 'shiki' | 'prism' | false
Por defecto: shiki
Qué resaltador de sintaxis usar, si lo hay.
shiki
- usa el resaltador Shikiprism
- usa el resaltador Prismfalse
- no aplicar resaltado de sintaxis.
markdown.remarkPlugins
Sección titulada markdown.remarkPluginsTipo: RemarkPlugins
Pasa plugins de remark para personalizar la construcción del Markdown. Puedes importar y aplicar la función del plugin (recomendado), o pasar el nombre del plugin como string.
markdown.rehypePlugins
Sección titulada markdown.rehypePluginsTipo: RehypePlugins
Pasa plugins de rehype para personalizar cómo el HTML generado en compilación es procesado. Puedes importar y aplicar la función del plugin (recomendado), o pasar el nombre del plugin como string.
markdown.gfm
Sección titulada markdown.gfmTipo: boolean
Por defecto: true
astro@2.0.0
Astro usa GitHub-flavored Markdown por defecto. Para deshabilitarlo, establece la flag gfm
a false
:
markdown.smartypants
Sección titulada markdown.smartypantsTipo: boolean
Por defecto: true
astro@2.0.0
Astro usa el formateador SmartyPants por defecto. Para deshabilitarlo, establezca la propiedad smartypants
a false
:
markdown.remarkRehype
Sección titulada markdown.remarkRehypeTipo: RemarkRehype
Puedes pasar opciones a remark-rehype.
Integraciones
Sección titulada IntegracionesExtiende Astro con integraciones personalizadas. Las integraciones sirven para agregar soporte a frameworks (como Solid.js), nuevas funcionalidades (sitemaps) y nuevas bibliotecas (como Partytown).
Consulta nuestra guía de integraciones para obtener ayuda para comenzar con integraciones de Astro.
Pasa opciones de configuración adicionales a Vite. Útil cuando Astro no admite alguna configuración avanzada que pueda necesitar.
Consulta la documentación completa del objeto de configuración vite
en vitejs.dev.
Ejemplos
Sección titulada EjemplosFlags legacy
Sección titulada Flags legacyPara ayudar a algunos usuarios a migrar entre versiones de Astro, ocasionalmente introducimos flags legacy
.
Estas flags te permiten optar por algunos comportamientos desactualizados u obsoletos de Astro
en la última versión, para que pueda continuar actualizándose y aprovechar los nuevos lanzamientos de Astro.
Flags Experimentales
Sección titulada Flags ExperimentalesAstro ofrece flags experimentales para dar a los usuarios acceso temprano a nuevas características.
Estas flags no son garantía de ser estables.
experimental.optimizeHoistedScript
Sección titulada experimental.optimizeHoistedScriptTipo: boolean
Por defecto: false
astro@2.10.4
Evita que los scripts de componentes no utilizados se incluyan inesperadamente en una página. La optimización se realiza de la mejor manera posible y podría omitir inversamente la inclusión de los scripts utilizados. Asegúrate de revisar detenidamente tus páginas construidas antes de publicarlas. Habilita la optimización de análisis de scripts elevados añadiendo la bandera experimental:
experimental.devOverlay
Sección titulada experimental.devOverlayTipo: boolean
Por defecto: false
astro@3.4.0
Habilita una superposición de desarrollo en el modo de desarrollo. Esta superposición te permite inspeccionar las islas de tu página, ver auditorías útiles sobre rendimiento y accesibilidad, y más.
experimental.i18n
Sección titulada experimental.i18nTipo: object
astro@3.5.0
Configura el enrutamiento experimental i18n y te permite especificar algunas opciones de personalización.
Consulta nuestra guía para obtener más información sobre la internacionalización en Astro
experimental.i18n.defaultLocale
Sección titulada experimental.i18n.defaultLocaleTipo: string
astro@3.5.0
El idioma predeterminado de tu sitio/aplicación. Este es un campo obligatorio.
Ningún formato o sintaxis de idioma en particular está obligado, pero sugerimos usar minúsculas y guiones según sea necesario (por ejemplo, “es”, “pt-br”) para una mayor compatibilidad.
experimental.i18n.locales
Sección titulada experimental.i18n.localesTipo: Array.<string>
astro@3.5.0
Una lista de todos los idiomas admitidos por el sitio web (por ejemplo, ['en', 'es', 'pt-br']
). Esta lista también debe incluir el defaultLocale
. Este es un campo obligatorio.
Ningún formato o sintaxis de idioma en particular está obligado, pero la estructura de tu carpeta debe coincidir exactamente con los idiomas de la lista.
experimental.i18n.fallback
Sección titulada experimental.i18n.fallbackTipo: Record.<string, string>
astro@3.5.0
La estrategia de reserva cuando se navega a páginas que no existen (por ejemplo, no se ha creado una página traducida).
Usa este objeto para declarar una ruta de locale
de reserva para cada idioma que admitas. Si no se especifica una reserva, las páginas no disponibles devolverán un 404.
Ejemplo
Sección titulada EjemploEl siguiente ejemplo configura tu estrategia de reserva de contenido para redirigir las páginas no disponibles en /pt-br/
a su versión es
, y las páginas no disponibles en /fr/
a su versión en
. Las páginas no disponibles en /es/
devolverán un 404.
experimental.i18n.routingStrategy
Sección titulada experimental.i18n.routingStrategyTipo: 'prefix-always' | 'prefix-other-locales'
Por defecto: ‘prefix-other-locales’
astro@3.5.0
Controla la estrategia de enrutamiento para determinar las URL de tu sitio. Configura esto en función de la configuración de ruta de carpeta/URL para tu idioma predeterminado:
-
prefix-other-locales
(predeterminada): Solo los idiomas no predeterminados mostrarán un prefijo de idioma. EldefaultLocale
no mostrará un prefijo de idioma. Los URLs serán de la formaexample.com/[lang]/content/
para todos los idiomas que no sean el predeterminado, peroexample.com/content/
para el idioma predeterminado. -
prefix-always
: Todos las URLs mostrarán un prefijo de idioma.Las URLs serán de la forma
example.com/[lang]/content/
para todas las rutas, incluido el idioma predeterminado. Directorios localizados se utilizan para todos los idiomas, incluido el predeterminado.
experimental.contentCollectionCache
Sección titulada experimental.contentCollectionCacheTipo: boolean
Default: false
astro@3.5.0
Habilita un caché persistente para las colecciones de contenido cuando se compila en modo estático.
Reference