1.2 — Criando seu Projeto com `sv create`

Crie seu primeiro projeto SvelteKit usando a ferramenta oficial e entenda cada opcao do wizard interativo.

Objetivos da Aula

Conhecer o sv — a CLI oficial do Svelte
Criar um projeto SvelteKit com pnpm dlx sv create
Entender cada opcao do wizard interativo
Conhecer os add-ons disponiveis e quando usar cada um
Rodar o servidor de desenvolvimento pela primeira vez

O que e o `sv`?

O sv e a ferramenta de linha de comando oficial do Svelte. Ela unifica tudo que voce precisa para trabalhar com projetos Svelte em um unico lugar.

Historicamente, o ecossistema Svelte tinha varias ferramentas separadas:

create-svelte — para criar projetos
svelte-add — para adicionar funcionalidades (mantido pela comunidade)
svelte-migrate — para migrar entre versoes

Agora, tudo isso vive dentro do sv.

O CLI UNIFICADO: sv

sv create Cria um novo projeto SvelteKit

sv add Adiciona funcionalidades a um projeto existente

sv migrate Migra codigo entre versoes do Svelte

Preciso instalar o sv globalmente?

Nao. Voce usa o `sv` atraves do `pnpm dlx` (equivalente ao `npx`). Ao rodar `pnpm dlx sv create`, o pnpm baixa e executa o `sv` automaticamente, sempre na versao mais recente. Basta ter o pnpm instalado (veja a aula 1.4).

Criando seu primeiro projeto

Abra o terminal e execute:

pnpm dlx sv create meu-projeto

Esse comando vai iniciar um wizard interativo que guia voce pelas opcoes do projeto. Vamos entender cada etapa.

Dica

Se voce usa `npm`, o comando equivalente e `npx sv create meu-projeto`. Com `bun`, use `bunx sv create meu-projeto`. Neste curso usaremos `pnpm` por suas vantagens de performance e economia de disco (veja a aula 1.4).

Etapa 1: Template do Projeto

A primeira pergunta e sobre qual template usar:

┌  Welcome to the Svelte CLI! (v0.6.x)
│
◇  Which template would you like?
│  ● SvelteKit minimal
│  ○ SvelteKit demo
│  ○ SvelteKit library

As opcoes

RECOMENDADO

SvelteKit minimal

Projeto limpo, com o minimo necessario para comecar. Ideal para aprender e para projetos reais. E o que vamos usar neste curso.

DEMO

SvelteKit demo

Inclui uma aplicacao de exemplo (um jogo de adivinhar palavras) que funciona ate sem JavaScript. Bom para explorar, mas nao para projetos reais.

LIBRARY

SvelteKit library

Template para criar bibliotecas de componentes Svelte que serao publicadas no npm. Vem configurado com svelte-package.

Escolha: SvelteKit minimal

Etapa 2: Tipagem (TypeScript)

◇  Add type checking with Typescript?
│  ● Yes, using Typescript syntax
│  ○ Yes, using Javascript with JSDoc comments
│  ○ No

As opcoes

TypeScript syntax — Seus arquivos usam a extensao .ts e componentes Svelte usam lang="ts":

<script lang="ts">
  // tipagem direto no codigo
  let nome: string = 'mundo'
</script>

JSDoc comments — Seus arquivos continuam .js, mas voce adiciona tipos como comentarios:

// tipagem via comentarios JSDoc
/** @type {string} */
let nome = 'mundo'

No — Sem tipagem. Nao recomendado, pois TypeScript ajuda muito a evitar erros.

Dica

Para este curso, vamos escolher **Yes, using Typescript syntax**. Mesmo que voce nao conheca TypeScript, os tipos basicos sao simples e o editor vai te ajudar com autocompletar e deteccao de erros.

Etapa 3: Add-ons

Essa e a etapa mais interessante. O sv permite configurar varias ferramentas no momento da criacao do projeto:

◇  Which add-ons would you like?
│  ◻ prettier
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook

Voce pode selecionar multiplos add-ons usando a barra de espaco e confirmando com Enter.

Entendendo cada add-on

FORMATACAO

prettier

Formatador de codigo automatico. Voce escreve o codigo de qualquer jeito e o Prettier padroniza a formatacao (aspas, indentacao, ponto-e-virgula, etc.). Inclui o plugin especifico para arquivos .svelte.

QUALIDADE

eslint

Ferramenta de linting que analisa seu codigo e aponta problemas comuns — variaveis nao usadas, imports incorretos, padroes perigosos. Ajuda a manter a qualidade do codigo.

TESTES

vitest

Framework de testes unitarios. Usa a mesma toolchain do Vite, entao funciona perfeitamente com TypeScript e Svelte sem configuracao extra. Ideal para testar funcoes, stores e logica isolada.

TESTES

playwright

Framework de testes end-to-end. Abre um navegador real e simula a interacao do usuario — clicar em botoes, preencher formularios, navegar entre paginas. Testa o fluxo completo da aplicacao.

ESTILIZACAO

tailwindcss

Framework CSS utility-first. Em vez de escrever CSS em arquivos separados, voce aplica classes diretamente no HTML: class="bg-blue-500 text-white p-4". Muito popular e produtivo.

BANCO DE DADOS

drizzle

ORM (Object Relational Mapper) para banco de dados. Permite escrever queries com TypeScript type-safe, gerenciar schemas e fazer migrations. Suporta PostgreSQL, MySQL e SQLite.

AUTENTICACAO

lucia

Guia de implementacao de autenticacao (login, registro, sessoes). Configura a estrutura base para gerenciar usuarios e sessoes com seguranca, usando cookies HttpOnly.

CONTEUDO

mdsvex

Permite escrever paginas usando Markdown com componentes Svelte embutidos. Perfeito para blogs, documentacao e sites de conteudo. E o equivalente do MDX no ecossistema Svelte.

i18n

paraglide

Biblioteca de internacionalizacao (i18n). Permite traduzir sua aplicacao para multiplos idiomas, com deteccao automatica do idioma do usuario e rotas localizadas.

UI DEV

storybook

Workshop de componentes isolados. Permite desenvolver e testar componentes de UI individualmente, fora do contexto da aplicacao. Muito usado em equipes grandes e bibliotecas de componentes.

O que selecionar para comecar?

Para este curso, vamos comecar com o essencial:

Add-ons recomendados para comecar:

✓ prettier — formatar codigo automaticamente

✓ eslint — detectar problemas no codigo

Os demais add-ons vamos aprender e adicionar mais adiante no curso usando sv add.

Voce pode adicionar depois

Qualquer add-on que voce nao selecionar agora pode ser adicionado depois com npx sv add tailwindcss, por exemplo. Nao precisa decidir tudo agora.

Etapa 4: Instalacao das dependencias

Apos selecionar os add-ons, o wizard pergunta qual gerenciador de pacotes usar:

◇  Which package manager do you want to install dependencies with?
│  ○ npm
│  ● pnpm
│  ○ yarn
│  ○ bun

Escolha pnpm. Ele e mais rapido, economiza espaco em disco e tem resolucao de dependencias mais segura que o npm. Veja a aula 1.4 para saber mais.

Passo a Passo Completo

Agora que voce entende cada opcao, vamos criar o projeto de fato:

# 1. Crie o projeto
pnpm dlx sv create meu-projeto

Selecione:

Template: SvelteKit minimal
TypeScript: Yes, using Typescript syntax
Add-ons: prettier e eslint
Package manager: pnpm

# 2. Entre na pasta do projeto
cd meu-projeto

# 3. Inicie o servidor de desenvolvimento
pnpm dev

Voce vera algo assim no terminal:

  VITE v6.x.x  ready in 534 ms

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

🎉

Seu projeto esta rodando!

Abra http://localhost:5173 no navegador

Criacao Direta (sem wizard)

Se voce ja sabe o que quer, pode pular o wizard passando as opcoes diretamente:

# Criar com template minimal e TypeScript
pnpm dlx sv create meu-projeto --template minimal --types ts

# Criar e ja adicionar Tailwind e Prettier
pnpm dlx sv create meu-projeto --template minimal --types ts --add prettier,tailwindcss

# Criar sem instalar dependencias (instalar manualmente depois)
pnpm dlx sv create meu-projeto --no-install

Qual a diferenca entre sv create e pnpm create vite?

O pnpm create vite cria projetos Vite genericos (React, Vue, Svelte puro, etc.). Ja o pnpm dlx sv create cria projetos SvelteKit — que vem com roteamento, SSR, e toda a estrutura do framework. Para projetos Svelte serios, use sempre sv create.

Adicionando funcionalidades depois: `sv add`

Esqueceu de adicionar Tailwind na criacao? Sem problema:

# Adicionar Tailwind a um projeto existente
pnpm dlx sv add tailwindcss

# Adicionar testes
pnpm dlx sv add vitest

# Adicionar multiplos add-ons de uma vez
pnpm dlx sv add prettier eslint

O sv add modifica os arquivos necessarios automaticamente — instala dependencias, cria arquivos de configuracao e atualiza o que for preciso.

Scripts disponiveis

Apos criar o projeto, voce tem estes scripts no package.json:

# Iniciar servidor de desenvolvimento
pnpm dev

# Gerar build de producao
pnpm build

# Visualizar o build localmente
pnpm preview

# Verificar tipos TypeScript
pnpm check

# Rodar o linter (se adicionou ESLint)
pnpm lint

# Formatar codigo (se adicionou Prettier)
pnpm format

O mais importante: `pnpm dev`

Este e o comando que voce mais vai usar. Ele inicia o servidor de desenvolvimento com:

Hot Module Replacement (HMR) — alteracoes aparecem instantaneamente no navegador
Compilacao sob demanda — so compila o que voce esta usando
Deteccao de erros — erros aparecem direto no navegador e no terminal

pnpm dev

# Opcoes uteis:
pnpm dev --open
# Abre o navegador automaticamente

pnpm dev --port 3000
# Usa a porta 3000 em vez da 5173

pnpm dev --host
# Expoe na rede local (para testar no celular)

Resumo

Comando	O que faz
`pnpm dlx sv create`	Cria novo projeto SvelteKit (interativo)
`pnpm dlx sv add`	Adiciona funcionalidades a projeto existente
`pnpm dlx sv migrate`	Migra codigo entre versoes do Svelte
`pnpm dev`	Inicia servidor de desenvolvimento
`pnpm build`	Gera build de producao

Desafio da Aula

Objetivo

Criar seu primeiro projeto SvelteKit e confirmar que esta funcionando.

Instrucoes

Abra o terminal
Execute pnpm dlx sv create meu-primeiro-svelte
Selecione: minimal, TypeScript, prettier + eslint, pnpm
Entre na pasta e rode pnpm dev
Acesse http://localhost:5173 no navegador

Spec de Verificacao

O projeto foi criado sem erros
O servidor de desenvolvimento esta rodando
A pagina padrao do SvelteKit aparece no navegador
O terminal mostra “ready in XXX ms”

Proxima aula: 1.3 — Estrutura de Arquivos do Projeto

1.2 — Criando seu Projeto com sv create

Objetivos da Aula

O que e o sv?

Criando seu primeiro projeto

Etapa 1: Template do Projeto

As opcoes

Etapa 2: Tipagem (TypeScript)

As opcoes

Etapa 3: Add-ons

Entendendo cada add-on

O que selecionar para comecar?

Etapa 4: Instalacao das dependencias

Passo a Passo Completo

Criacao Direta (sem wizard)

Adicionando funcionalidades depois: sv add

Scripts disponiveis

O mais importante: pnpm dev

Resumo

Desafio da Aula

Objetivo

Instrucoes

Spec de Verificacao

1.2 — Criando seu Projeto com `sv create`

O que e o `sv`?

Adicionando funcionalidades depois: `sv add`

O mais importante: `pnpm dev`