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

Seção intitulada 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

Seção intitulada Exemplo de Árvore do Projeto

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

• Directorypublic/

  • robots.txt
  • favicon.svg
  • image-social.png
• Directorysrc/

  • Directorycomponents/

    • Cabecalho.astro
    • Botao.jsx
  • Directorylayouts/

    • LayoutPostagem.astro
  • Directorypages/

    • Directorypostagens/

      • postagem1.md
      • postagem2.md
      • postagem3.md
    • index.astro
  • Directorystyles/

    • global.css
• astro.config.mjs
• package.json
• tsconfig.json

src/

Seção intitulada src/

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

• Páginas
• Layouts
• Componentes Astro
• Componentes de frameworks de UI (React, etc.)
• Estilos (CSS, Sass)
• Markdown

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.

Dica

Enquanto esse guia descreve algumas convenções populares usadas na comunidade do Astro, as únicas pastas reservadas pelo Astro são src/pages/ e src/content. Você é livre para renomear e reorganizar quaisquer outras pastas de uma forma que funciona melhor para você.

src/components

Seção intitulada 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

Seção intitulada 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

Seção intitulada 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

Seção intitulada 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.

Cuidado

src/pages é um subdiretório obrigatório em seu projeto Astro. Sem ele, seu site não terá páginas ou rotas!

src/styles

Seção intitulada 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/

Seção intitulada public/

O diretório public/ é para arquivos e assets em seu projeto que não precisam ser processados durante o processo de build do Astro. Arquivos nessa pasta serão copiados para a pasta da build intocados, e então será feito a build do seu site.

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.

Dica

Como uma regra geral, qualquer CSS ou JavaScript que você mesmo escrever deve estar no seu diretório src/.

package.json

Seção intitulada 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

Seção intitulada 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

Seção intitulada 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.