Referência da Configuração

A referência a seguir cobre todas as opções de configuração suportadas no Astro. Para aprender mais sobre como configurar o Astro, leia o nosso guia, Configurando Astro.

import { defineConfig } from 'astro/config'

export default defineConfig({
  // suas opções de configuração aqui...
})

Tipo: string
Interface de Linha de Comando: --root
Padrão: "." (diretório de trabalho atual)

Você deve apenas providenciar esta opção se você executar os comandos da interface de linha de comando astro em um diretório diferente do que o diretório raiz do projeto. Geralmente, esta opção é providenciada pela interface de linha de comando ao invés do arquivo de configuração Astro, já que Astro precisa saber a raiz do seu projeto antes de poder localizar seu arquivo de configuração.

Se você providenciar um caminho relativo (ex: --root: './meu-projeto') Astro irá resolvê-lo com base no seu diretório de trabalho atual.

{
  root: './diretorio-do-meu-projeto'
}

$ astro build --root ./diretorio-do-meu-projeto

Tipo: string
Padrão: "./src"

Define o diretório em que Astro irá ler o seu site.

O valor pode ser tanto um caminho absoluto do sistema ou um caminho relativo a raiz do projeto.

{
  srcDir: './www'
}

Tipo: string
Padrão: "./public"

Define o diretório de seus assets estáticos. Arquivos nesse diretório são servidos em / durante o desenvolvimento e são copiados para o diretório de saída durante o processo de build. Esses arquivos serão sempre servidos ou copiados da forma que são, sem transformações ou etapa de bundle.

O valor pode ser tanto um caminho absoluto do sistema ou um caminho relativo a raiz do projeto.

{
  publicDir: './meu-diretorio-public-customizado'
}

Tipo: string
Padrão: "./dist"

Define o diretório em que astro build escreve a sua build final.

O valor pode ser tanto um caminho absoluto do sistema ou um caminho relativo a raiz do projeto.

{
  outDir: './meu-diretorio-build-customizado'
}

Tipo: string

Sua URL final no deploy. Astro utiliza esta URL completa para gerar seu sitemap e URLs canônicas na sua build final. É fortemente recomendado que você defina esta configuração para usufruir ao máximo o que o Astro pode oferecer.

{
  site: 'https://www.meu-site.dev'
}

Tipo: string

O caminho base no qual você está fazendo deploy. Astro irá corresponder este nome de caminho durante o desenvolvimento para que a experiência corresponda ao máximo possível o seu ambiente de build. No exemplo abaixo, astro dev irá iniciar seu servidor em /docs.

{
  base: '/docs'
}

Tipo: 'always' | 'never' | 'ignore'
Padrão: 'ignore'

Define o comportamento de correspondência de rotas do servidor de desenvolvimento. Escolha entre as seguintes opções:

• 'always' - Apenas corresponde URLs que incluem uma barra final (ex: “/foo/“)
• 'never' - Nunca corresponde URLs que incluem uma barra final (ex: “/foo”)
• 'ignore' - Corresponde URLs independente da presença de uma ”/” final

Use esta opção de configuração se o seu host de produção lida de forma estrita em como barras finais funcionam ou não.

Você também pode definir isto se você preferir ser mais estrito consigo mesmo, para que então URLs com ou sem barras finais não funcionem durante o desenvolvimento.

{
  // Exemplo: Requer uma barra final durante o desenvolvimento
  trailingSlash: 'always'
}

Veja Também:

• buildOptions.pageUrlFormat

Tipo: ('file' | 'directory')
Padrão: 'directory'

Controla o formato final do arquivo de cada página.

• Se for ‘file’, Astro irá gerar um arquivo HTML (ex: “/foo.html”) para cada página.
• Se for ‘directory’, Astro irá gerar um diretório com um arquivo index.html aninhado (ex: “/foo/index.html”) para cada página.

{
  build: {
    // Exemplo: Gera `pagina.html` ao invés de `pagina/index.html` durante a build.
    format: 'file'
  }
}

Customize o servidor de desenvolvimento do Astro, usado por astro dev e astro preview.

{
  server: { port: 1234, host: true }
}

Para definir uma configuração diferente baseada no comando run (“dev”, “preview”) uma função também pode ser passada para esta opção de configuração.

{
  // Exemplo: Use a sintaxe de função para customizar com base no comando
  server: (command) => ({ port: command === 'dev' ? 3000 : 4000 })
}

Tipo: string | boolean
Padrão: false

Define em quais endereços de IP da rede o servidor deve ser escutado em (ou seja, IPs que não sejam localhost).

• false - não o expõe em um endereço de IP da rede
• true - escutado em todos os endereços, incluindo endereços LAN e públicos
• [endereço-customizado] - o expõe ao endereço de IP da rede em [endereço-customizado] (ex: 192.168.0.1)

Tipo: number
Padrão: 3000

Define em qual porta o servidor deve ser escutado.

Se a porta indicada já estiver em uso, Astro irá automaticamente tentar a próxima porta disponível.

{
  server: { port: 8080 }
}

Tipo: boolean
Padrão: false

Controla se páginas de rascunho Markdown devem ser inclusas na build.

Uma página Markdown é considerada um rascunho se ela inclui draft: true em seu frontmatter. Páginas de rascunho estarão sempre inclusas e visíveis durante o desenvolvimento (astro dev) mas por padrão elas não serão inclusas em sua build final.

{
  markdown: {
    // Exemplo: Inclui todos os rascunhos em sua build final
    drafts: true,
  }
}

Tipo: 'md' | 'mdx'
Padrão: mdx

Controle se o processamento de Markdown é feito utilizando MDX ou não.

Processamento com MDX permite que você utilize JSX dentro de seus arquivos Markdown. Porém, podem haver momentos em que você não quer esse comportamento e prefira utilizar um processador “tradicional” de Markdown. Este campo te permite controlar esse comportamento.

{
  markdown: {
    // Exemplo: Utilize um processador sem MDX para arquivos Markdown
    mode: 'md',
  }
}

Tipo: Partial<ShikiConfig>

Opções da configuração do Shiki. Veja a documentação da configuração de Markdown para entender como configurá-lo.

Tipo: 'shiki' | 'prism' | false
Padrão: shiki

Qual syntax highlighter deve ser utilizado, caso utilize.

• shiki - utiliza o highlighter do Shiki
• prism - utiliza o highlighter do Prism
• false - não aplica syntax highlighting.

{
  markdown: {
    // Exemplo: Mudando para utilizar prism como syntax highlighter em Markdown
    syntaxHighlight: 'prism',
  }
}

Tipo: RemarkPlugins

Passe um plugin Remark customizado para customizar como seu Markdown é construído.

Nota: Habilitar remarkPlugins ou rehypePlugins customizados remove o suporte integrado do Astro para GitHub-flavored Markdown e Smartypants. Você deve explicitamente adicionar esses plugins ao seu arquivo astro.config.mjs, caso sejam desejados.

{
  markdown: {
    // Exemplo: O conjunto padrão de plugins remark utilizados pelo Astro
    remarkPlugins: ['remark-gfm', 'remark-smartypants'],
  },
};

Tipo: RehypePlugins

Passe um plugin Rehype customizado para customizar como seu Markdown é construído.

Nota: Habilitar remarkPlugins ou rehypePlugins customizados remove o suporte integrado do Astro para GitHub-flavored Markdown e Smartypants. Você deve explicitamente adicionar esses plugins ao seu arquivo astro.config.mjs, caso sejam desejados.

{
  markdown: {
    // Exemplo: O conjunto padrão de plugins rehype utilizados pelo Astro
    rehypePlugins: [],
  },
};

Faça deploy em seu servidor de hospedagem, serverless ou edge favorita com adaptadores de build. Importe um de nossos adaptadores oficiais para Netlify (EN), Vercel (EN) e mais para possibilitar o SSR do Astro.

Veja nosso guia de Renderização no lado do Servidor para saber mais sobre SSR, e nossos guias de deploy para uma lista completa de hospedagens.

import netlify from '@astrojs/netlify/functions';
{
  // Exemplo: Faça build para fazer deploy no serverless da Netlify
   adapter: netlify(),
}

Estenda Astro com integrações customizadas. Integrações são sua via de mão única para adicionar suporte a frameworks (como Solid.js), novas funcionalidades (como sitemaps) e novas bibliotecas (como Partytown e Turbolinks).

Leia nosso Guia de Integrações para mais ajuda em como começar a utilizar Integrações Astro.

import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
  // Exemplo: Adicione suporte a React + Tailwind no Astro
  integrations: [react(), tailwind()]
}

Passe opções de configuração adicionais ao Vite. Útil quando o Astro não suporta algumas configurações avançadas que você pode precisar.

Veja a documentação completa do objeto de configuração vite em vitejs.dev.

{
  vite: {
    ssr: {
      // Exemplo: Force um pacote quebrado a pular o processamento SSR, se necessário
      external: ['pacote-npm-quebrado'],
    }
  }
}

{
  vite: {
    // Exemplo: Adicione plugins vite customizados diretamente em seu projeto Astro
    plugins: [meuPlugin()],
  }
}