Conheça Seu Espaço de Trabalho

Antes de começarmos a construir o BookIt, vamos entender com o que estamos trabalhando. O SvelteKit gerou várias pastas e arquivos, cada um com um propósito específico. Saber onde as coisas ficam vai poupar confusão mais tarde.

O Que Você Vai Aprender

O propósito de cada pasta em um projeto SvelteKit
Quais arquivos você vai editar com frequência versus raramente tocar
Onde as páginas, componentes e dados do BookIt vão ficar

A Visão Geral

Abra a pasta bookit no seu editor de código. Você verá uma estrutura como esta:

bookit/
├── src/
│   ├── lib/
│   │   └── index.ts
│   ├── routes/
│   │   └── +page.svelte
│   ├── app.d.ts
│   └── app.html
├── static/
├── .gitignore
├── .prettierrc
├── eslint.config.js
├── package.json
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

Não se preocupe em memorizar tudo. Vamos focar no que importa para construir o BookIt.

A Pasta `src`

É aqui que você vai passar 95% do seu tempo. Todo o código da sua aplicação vive aqui.

`src/routes/`

Esta pasta define suas páginas. O SvelteKit usa roteamento baseado em arquivos, o que significa que a estrutura de pastas aqui mapeia diretamente para URLs no seu aplicativo.

Por enquanto há apenas um arquivo:

src/routes/
└── +page.svelte    →    http://localhost:5173/

Esse arquivo +page.svelte é sua página inicial. Quando adicionarmos mais páginas ao BookIt, criaremos mais arquivos e pastas aqui:

src/routes/
├── +page.svelte           →    /
├── about/
│   └── +page.svelte       →    /about
├── services/
│   ├── +page.svelte       →    /services
│   └── [slug]/
│       └── +page.svelte   →    /services/lawn-mowing
└── bookings/
    └── +page.svelte       →    /bookings

O nome da pasta se torna o caminho da URL. Vamos explorar o roteamento em profundidade no Módulo 2.

`src/lib/`

Esta é sua biblioteca de componentes e código compartilhado. Qualquer coisa que você queira reutilizar em múltiplas páginas vai aqui.

Para o BookIt, esta pasta eventualmente conterá:

Componentes reutilizáveis como ServiceCard.svelte e BookingForm.svelte
Funções utilitárias para formatar preços e datas
Dados compartilhados e definições de tipos

O SvelteKit fornece um alias de importação especial para esta pasta: $lib. Em vez de escrever ../../../lib/components/ServiceCard.svelte, você pode escrever $lib/components/ServiceCard.svelte de qualquer lugar no seu projeto.

`src/app.html`

Este é o shell HTML que envolve toda a sua aplicação. Abra-o e você verá:

<!-- filename: src/app.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Os marcadores %sveltekit.head% e %sveltekit.body% são onde o SvelteKit injeta o conteúdo da sua página. Você raramente vai editar este arquivo, mas é útil para adicionar meta tags globais ou folhas de estilo externas.

`src/app.d.ts`

Este arquivo de declaração TypeScript define tipos que estão disponíveis em todo o seu aplicativo. O SvelteKit o usa para coisas como tipagem do objeto locals no código do lado do servidor. Você não precisará tocar nisto até chegarmos à autenticação nos módulos avançados.

A Pasta `static`

Arquivos em static/ são servidos como estão na URL raiz do seu site. Coloque imagens, fontes e outros assets aqui.

Por exemplo, static/logo.png fica disponível em http://localhost:5173/logo.png.

Para o BookIt, vamos adicionar:

Imagens de serviços
Um favicon
Quaisquer arquivos para download

Não coloque aqui arquivos que precisam de processamento (como Sass ou TypeScript). Esses pertencem a src/.

Arquivos de Configuração

Esses arquivos configuram várias ferramentas no seu projeto. Você raramente vai editá-los após a configuração inicial.

`package.json`

Lista as dependências e scripts do seu projeto. Os scripts importantes são:

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}

npm run dev — Inicia o servidor de desenvolvimento
npm run build — Faz o build para produção
npm run preview — Visualiza o build de produção localmente

`svelte.config.js`

Configura o compilador Svelte e o SvelteKit. As configurações padrão funcionam bem para o BookIt. Vamos revisitar este arquivo quando fizermos o deploy no Módulo 32.

`vite.config.ts`

Configura o Vite, a ferramenta de build que alimenta o servidor de desenvolvimento e os builds de produção do SvelteKit. Os padrões funcionam bem; você só vai editar isso para adicionar plugins.

`tsconfig.json`

Configuração do TypeScript. Os padrões são ajustados para o SvelteKit e funcionam imediatamente.

`eslint.config.js` e `.prettierrc`

Ferramentas de qualidade de código. O ESLint detecta bugs em potencial; o Prettier formata seu código de forma consistente. Seu editor pode executar essas ferramentas automaticamente ao salvar.

Arquivos Que Você Vai Editar Frequentemente

Enquanto constrói o BookIt, você vai trabalhar principalmente em:

Local	O Que Vai Lá
`src/routes/`	Páginas e layouts
`src/lib/`	Componentes reutilizáveis e utilitários
`static/`	Imagens e assets

Arquivos Que Você Raramente Vai Tocar

Estes são principalmente "configure e esqueça":

Arquivo	Propósito
`svelte.config.js`	Configurações do compilador
`vite.config.ts`	Configurações da ferramenta de build
`tsconfig.json`	Configurações do TypeScript
`app.html`	Shell HTML

Uma Prévia da Estrutura do BookIt

Ao final deste curso, sua pasta src/ vai parecer algo assim:

src/
├── lib/
│   ├── components/
│   │   ├── ServiceCard.svelte
│   │   ├── BookingForm.svelte
│   │   ├── PriceBadge.svelte
│   │   └── ...
│   ├── stores/
│   │   └── cart.ts
│   ├── utils/
│   │   └── format.ts
│   └── data/
│       └── services.ts
├── routes/
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── about/
│   ├── services/
│   ├── bookings/
│   └── api/
└── app.html

Vamos construir essa estrutura peça por peça. Cada lição adiciona algo novo no lugar certo.

Resumo

Projetos SvelteKit têm uma organização clara: as páginas ficam em src/routes/, o código compartilhado fica em src/lib/, e os assets estáticos vão em static/. Os arquivos de configuração na raiz raramente precisam de edição após a configuração.

Principais conclusões:

src/routes/ define suas páginas — estrutura de pastas = estrutura de URL
src/lib/ contém componentes reutilizáveis, acessíveis via $lib
static/ serve arquivos diretamente na raiz do seu site
Arquivos de configuração são principalmente "configure e esqueça"

Próximos Passos

Agora você sabe onde cada coisa fica. Na próxima lição, Entendendo Arquivos .svelte, vamos olhar dentro de um componente Svelte e aprender sobre suas três seções: script, marcação e estilo.

Conheça Seu Espaço de Trabalho

O Que Você Vai Aprender

A Visão Geral

A Pasta src

src/routes/

src/lib/

src/app.html

src/app.d.ts

A Pasta static