Hora de Construir

Você entende o que torna o Svelte diferente. Agora vamos criar o projeto que construiremos ao longo deste curso. Ao final desta lição, você terá uma aplicação SvelteKit funcionando na sua máquina.

O Que Você Aprenderá

Como usar a CLI sv para estruturar um projeto SvelteKit
Quais opções escolher durante a configuração do projeto
Como instalar dependências e verificar se a configuração funciona

Pré-requisitos

Antes de começar, certifique-se de ter o Node.js instalado. Abra o terminal e execute:

node --version

Você deverá ver um número de versão como v20.11.0 ou superior. O SvelteKit requer Node.js 18.13 ou posterior. Se precisar instalar ou atualizar o Node.js, visite nodejs.org.

Você também precisará de um editor de código. Recomendamos o VS Code com a extensão oficial do Svelte para realce de sintaxe e autocomplete.

Criar o Projeto

Abra o terminal, navegue até onde você guarda seus projetos e execute:

npx sv create bookit

A CLI sv iniciará um prompt interativo. Veja o que escolher para o BookIt:

┌  Welcome to the Svelte CLI! (v0.6.x)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Project created
│
◇  What would you like to add to your project?
│  prettier, eslint
│
◇  Which package manager do you want to install dependencies with?
│  npm (or pnpm/yarn if you prefer)
│
└  You're all set!

Vamos entender cada escolha:

SvelteKit minimal nos dá um ponto de partida limpo, sem conteúdo de demonstração. Construiremos tudo do zero, o que é melhor para o aprendizado.

TypeScript syntax habilita a verificação de tipos. Mesmo que você seja novo no TypeScript, tê-lo disponível ajuda a detectar erros cedo. Você pode escrever JavaScript puro e adicionar tipos gradualmente.

Prettier e ESLint mantêm nosso código formatado de forma consistente e detectam erros comuns. Essas são ferramentas padrão em projetos profissionais.

Instalar Dependências

Após a CLI terminar, navegue até o projeto e instale as dependências:

cd bookit
npm install

Isso baixa todos os pacotes que o SvelteKit precisa. Na primeira vez, leva alguns instantes.

Verificar se Funciona

Inicie o servidor de desenvolvimento:

npm run dev

Você deverá ver uma saída como:

  VITE v5.x.x  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Abra http://localhost:5173 no seu navegador. Você verá a página de boas-vindas mínima do SvelteKit — apenas uma simples mensagem "Welcome to SvelteKit".

Essa página está prestes a se tornar a página inicial do BookIt.

O Que Acabou de Acontecer?

Quando você executou sv create, a CLI gerou uma estrutura de projeto completa com:

Arquivos de configuração para o Vite (a ferramenta de build), TypeScript, ESLint e Prettier
Uma pasta src onde todo o código da sua aplicação fica
Uma pasta static para assets como imagens e fontes
Arquivos de pacote que definem suas dependências

Exploraremos essa estrutura em detalhes na próxima lição. Por ora, o importante é que você tem uma aplicação SvelteKit funcionando.

Mantenha o Servidor Rodando

Ao longo deste curso, você vai querer manter o servidor de desenvolvimento rodando enquanto trabalha. Ele recarrega automaticamente quando você salva alterações, então você verá as atualizações instantaneamente no navegador.

Se precisar parar o servidor, pressione Ctrl+C (ou Cmd+C no Mac) no terminal. Reinicie-o a qualquer momento com npm run dev.

Problemas Comuns

Porta Já em Uso

Se você vir um erro informando que a porta 5173 já está em uso, outro aplicativo está usando essa porta. Você pode parar esse aplicativo ou executar o SvelteKit em uma porta diferente:

npm run dev -- --port 3000

Versão do Node Muito Antiga

Se você receber erros sobre sintaxe não suportada ou recursos ausentes, verifique sua versão do Node com node --version. Atualize para o Node 18.13 ou posterior, se necessário.

Erros de Permissão no Windows

Se npx sv create falhar com erros de permissão, tente executar o terminal como Administrador ou use um gerenciador de versões do Node como o nvm-windows.

Resumo

Você criou o projeto BookIt usando a CLI oficial do SvelteKit. O projeto está configurado com TypeScript, Prettier e ESLint — uma base sólida para desenvolvimento profissional.

Principais conclusões:

Use npx sv create para estruturar novos projetos SvelteKit
Escolha "SvelteKit minimal" para um ponto de partida limpo
Execute npm run dev para iniciar o servidor de desenvolvimento
O servidor de desenvolvimento recarrega automaticamente quando você salva alterações

Próximos Passos

Seu projeto está rodando, mas o que tem lá dentro? Na próxima lição, Explorar a Estrutura do Projeto, abriremos as pastas e arquivos para entender como um projeto SvelteKit é organizado.