En Astro la configuración se realiza principalmente a través del archivo astro.config.mjs, que es el fichero principal de configuración de cualquier proyecto Astro.
Aquí podemos definir un montón de parámetros, que nos permiten ajustar modificar opciones de build, del servidor de desarrollo, de integraciones de terceros.
En general no es un archivo que tengamos que tocar frecuentemente. Sólo, alguno de los parámetros para adaptarlo a las necesidades.
Así que vamos a ver las principales opciones que podemos controlar en nuestro proyecto de Astro.
Si quieres profundizar más en Astro, puedes explorar la documentación oficial y experimentar con diferentes configuraciones en tus proyectos.
Configuración básica de astro.config.mjs
El archivo astro.config.mjs es el punto de entrada para personalizar Astro. Este archivo es un módulo de JavaScript que exporta un objeto de configuración.
Vamos a ver su estructura básica:
import { defineConfig } from 'astro/config';
export default defineConfig({
// Configuración básica de Astro
site: 'https://mi-sitio.com',
base: '/',
output: 'static',
integrations: [],
vite: {
// Configuración específica de Vite
},
server: {
// Configuración del servidor de desarrollo
},
});
- site: Define la URL base de tu sitio. Esto es útil para generar URLs absolutas en tu sitio.
- base: Especifica la ruta base para tu proyecto. Si tu sitio está alojado en un subdirectorio, puedes configurarlo aquí.
- output: Define el tipo de salida. Puede ser
static(para sitios estáticos) oserver(para sitios renderizados en el servidor). - integrations: Aquí puedes agregar integraciones de Astro, como soporte para React, Vue, Tailwind, etc.
- vite: Permite personalizar la configuración de Vite.
- server: Configura el servidor de desarrollo de Astro.
Integraciones
Astro tiene un gran ecosistema de integraciones (plugins) que podemos añadir a nuestro proyecto. Por ejemplo, si quieres usar Tailwind CSS, puedes agregar el plugin correspondiente:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
});
Previamente tienes que instalar el plugin, aquí solo estamos viendo como añadir la integración a la configuración. (consulta la documentación del plugin correspondiente para más info)
Configuración del servidor de desarrollo
El servidor de desarrollo de Astro se configura a través del campo server en astro.config.mjs. Aquí puedes personalizar el puerto, el host y otras opciones relacionadas con el servidor.
Vamos a verlo con algunos ejemplos.
Por defecto, Astro inicia el servidor de desarrollo en http://localhost:4321. Si necesitamos cambiar el puerto o el host, podemos hacerlo así:
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
server: {
port: 4000, // Cambia el puerto a 4000
host: '0.0.0.0', // Permite conexiones desde cualquier IP
},
});
Si necesitas redirigir ciertas rutas a un servidor backend, puedes configurar un proxy:
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
},
},
},
});
Configuración avanzada de Vite en Astro
Bajo el capó, Astro utiliza Vite como motor para el Build. Vite es una herramienta genial, con muchísimas opciones en sí misma.
Tenemos acceso a estas opciones, a través del campo vite del fichero astro.config.mjs.
export default defineConfig({
vite: {
// opciones de Vite
},
});
Lo vemos también con un ejemplo,
Los alias de rutas son útiles para simplificar las importaciones en tu proyecto. Por ejemplo, en lugar de escribir import Component from '../../../components/Component', puedes usar un alias como @components.
// astro.config.mjs
import { defineConfig } from 'astro/config';
import path from 'path';
export default defineConfig({
vite: {
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components'),
'@assets': path.resolve(__dirname, 'src/assets'),
},
},
},
});
