Pular para o conteúdo
Astro Astro

Estrutura de Projetos

Seu novo projeto Astro gerado a partir do assistente de linha de comando create astro já vem com alguns arquivos e diretórios. Outros, você irá criar por si mesmo e adicionar a estrutura de arquivos já existentes do Astro.

Aqui está como um projeto Astro é organizado e alguns arquivos que você irá encontrar no seu novo projeto.

Diretórios e Arquivos

Astro inclui uma estrutura de diretórios padronizados para o seu projeto. A raiz de qualquer projeto Astro deve incluir os seguintes diretórios e arquivos:

  • src/* - O código-fonte do seu projeto (componentes, páginas, estilos, etc.)
  • public/* - Seus arquivos sem código, assets não processados (fontes, ícones, etc.)
  • package.json - Um manifesto do projeto.
  • astro.config.mjs - Um arquivo de configuração do Astro. (recomendado)
  • tsconfig.json - Um arquivo de configuração do TypeScript. (recomendado)

Exemplo de Árvore do Projeto

Os diretórios de um projeto Astro comum devem se aparecer com isto:

  • Diretóriopublic/
    • robots.txt
    • favicon.svg
    • image-social.png
  • Diretóriosrc/
    • Diretóriocomponents/
      • Cabecalho.astro
      • Botao.jsx
    • Diretóriolayouts/
      • LayoutPostagem.astro
    • Diretóriopages/
      • Diretóriopostagens/
        • postagem1.md
        • postagem2.md
        • postagem3.md
      • index.astro
    • Diretóriostyles/
      • global.css
  • astro.config.mjs
  • package.json
  • tsconfig.json

src/

A pasta src é onde a maioria do código-fonte do seu projeto está. Isso inclui:

Astro processa, otimiza e faz bundle dos arquivos de src/ para criar o website final que é entregue ao navegador. Diferente do estático diretório public/, os arquivos de src/ passam por build e são manipulados para você pelo Astro.

Alguns arquivos (como componentes Astro) nem sequer são enviados ao navegador como foram escritos, mas sim são renderizados como HTML estático. Outros arquivos (como CSS) são enviados ao navegador mas podem ser otimizados e passar por bundle com outros arquivos CSS para melhorar a performance.

src/assets

A pasta src/assets é a pasta recomendada para armazenar assets (e.x. imagens) a serem processados pelo Astro. Isso não é obrigatório, e esta não é uma pasta especial reservada.

src/components

Componentes são pedaços reutilizáveis de código para suas páginas HTML. Eles podem ser componentes Astro ou componentes de frameworks de UI como React ou Vue. É comum agrupar e organizar todos os componentes do seu projeto nesta pasta.

Essa é uma prática comum em projetos Astro, porém não é obrigatória. Sinta-se livre para organizar seus componentes como desejar!

src/content

A pasta src/content/ é reservada para armazenar coleções de conteúdo e um arquivo opcional de configuração das coleções de conteúdo. Nenhum outro arquivo é permitido nesta pasta.

src/layouts

Layouts são componentes do Astro que definem a estrutura de UI compartilhada por uma ou mais páginas.

Assim como o diretório src/components, é uma prática comum porém não obrigatória.

src/pages

Páginas são um tipo especial de componente utilizado para criar novas páginas no seu site. Uma página pode ser um componente Astro ou um arquivo Markdown que representa o conteúdo de uma página do seu site.

src/styles

É uma prática comum guardar seus arquivos CSS ou Sass no diretório src/styles porém não é obrigatório. Enquanto os seus estilos estiverem em algum lugar do diretório src/ e forem importados corretamente, Astro irá manipular e otimizar esses arquivos.

public/

O diretório public/ é para arquivos e assets que não precisam ser processados durante o processo de build do Astro. Esses arquivos serão copiados para a pasta da build intocados.

Esse comportamento faz com que public/ seja ideal para assets comuns como imagens e fontes, ou arquivos especiais como robots.txt e manifest.webmanifest.

Você pode colocar CSS e JavaScript no seu diretório public/, porém esteja atento que estes arquivos não passarão por bundle ou serão otimizados na sua build final.

package.json

Este é um arquivo utilizado por gerenciadores de pacotes de JavaScript para gerenciar suas dependências. Ele também define scripts que são comumente usados para executar o Astro (ex: npm start, npm run build).

Existem dois tipos de dependências que você pode especificar em um arquivo package.json: dependencies e devDependencies. Na maioria dos casos, elas funcionam da mesma forma: Astro precisa de todas as dependências em tempo de build e seu gerenciador de pacotes irá instalar ambas. Nós recomendados colocar todas as suas dependências em dependencies de início e apenas utilizar devDependencies se você tiver um motivo específico para fazer isso.

Caso precise de ajuda em como criar um novo arquivo package.json para o seu projeto, veja as instruções de instalação manual.

astro.config.mjs

Este arquivo é gerado em todos os templates iniciais e inclui opções para configurar o seu projeto Astro. Nele você pode especificar quais integrações usar, opções de build, opções do servidor e mais.

Veja o guia Configurando Astro para mais detalhes em como definir configurações.

tsconfig.json

Este arquivo é gerado em todos os templates iniciais e inclui opções de configuração do TypeScript para seu projeto Astro. Algumas funcionalidades (como importação de pacotes do npm) não são completamente suportadas no editor sem um arquivo tsconfig.json.

Veja o guia sobre TypeScript para mais detalhes em como definir configurações.