Estrutura do projeto: src routes static

Um projeto SvelteKit tem estas pastas principais: src/, static/ e arquivos de configuração na raiz.

src/ contém todo o código do aplicativo: rotas, componentes, código de biblioteca e o ponto de entrada do aplicativo.

Cada subpasta de src/routes corresponde a uma URL. Um arquivo chamado +page.svelte em uma pasta define o que é renderizado nesse caminho.

O caminho src/routes/about/+page.svelte é renderizado em /about no navegador.

src/lib é usada para módulos e componentes compartilhados. Importe elementos dela usando o alias $lib.

Os arquivos em static/ são servidos sem alterações na raiz da URL. Use essa pasta para favicon.png, robots.txt e outros recursos não processados.

A raiz contém svelte.config.js, vite.config.js, package.json e, opcionalmente, tsconfig.json.

Define pré-processadores, o adaptador e as opções do nível do kit. O adaptador decide como o aplicativo será compilado para implantação.

Configura o Vite, a ferramenta de agrupamento subjacente. Adicione aqui extensões, aliases, regras de proxy do servidor e opções de compilação.

src/app.html é o modelo HTML que envolve todas as páginas. Marcadores de posição como %sveltekit.head% são preenchidos durante a compilação.

src/hooks.server.js permite interceptar solicitações no servidor. Abordaremos os ganchos em um curso posterior.

Onde fica o arquivo de rota de uma página SvelteKit?

Agora você conhece a estrutura do projeto: src para o código, routes para as páginas, lib para o código compartilhado e static para os recursos brutos.