SvelteKit: criando uma SPA

Conhecendo o SvelteKit - Apresentação

Olá, meu nome é Antônio Evaldo, sou instrutor de front-end na Alura e estou muito feliz de ter você aqui comigo nesse curso de SvelteKit. Se você está aqui, você provavelmente já conhece o Svelte, e quer entender mais sobre o SvelteKit, porque utilizaríamos ele, qual situação é melhor utilizá-lo.

E ele vem para resolver alguns problemas que acontecem em aplicações que são criadas com Svelte puro. Da mesma forma que no ecossistema do React, por exemplo, foi criado o framework Next para resolver alguns desses mesmos problemas, inclusive, de aplicações que são feitas com React puro.

Você está motivado, ou motivada para utilizar o SvelteKit? Vamos dar uma olhada no projeto que vamos fazer, que é o Alura Cook, estou com ele aberto no meu navegador, um projeto que está lindo e maravilhoso.

E a proposta dele é a seguinte: digamos que você esteja em casa, com seus amigos, amigas, e vocês estão sem ideias de receitas para fazer. A proposta desse site é basicamente você selecionar os ingredientes que você tem na sua casa, então vou selecionar já alguns, como azeite de oliva, orégano, vou coloca o alho também, e conforme eu vou selecionando eles, vai sendo criada uma lista pessoal com esses ingredientes que eu tenho em casa.

E se eu descer até o final da página, tem um botão de buscar receitas. Se eu clicar nele, somos direcionados para uma nova página mostrando as receitas que podemos fazer com os ingredientes que temos em casa.

Então, nesse caso foi mostrado “Pasta de alho assado”, “Patê de alho assado”, o próprio “Alho assado”, muito alho, não é? Tem também um botão chamado “Editar lista”, que se eu clicar nele, também posso voltar para a primeira página e adicionar mais itens na minha lista, também posso remover os ingredientes. E é isso que o nosso projeto faz.

Mas um ponto de atenção: esse projeto inteiro vai ser desenvolvido ao longo de dois cursos na Alura. Você está assistindo o primeiro deles, e nele vamos fazer essa primeira página do Alura Cook, com os ingredientes disponíveis para selecionar. E vamos fazer toda essa escala de categorias, os ingredientes, vamos fazer essa parte funcional mesmo de adicionar e remover itens da nossa lista, tudo funcional, mas é só a primeira página mesmo.

Vamos ver muita coisa legal, vamos ver como criar e porque utilizar uma SPA, que é uma sigla que significa single page application, vamos também aplicar muitas boas práticas de utilização de componentes do Svelte, como por exemplo a especialização de componentes, e tudo isso utilizando o TypeScript, que vai nos auxiliar bastante no desenvolvimento desse projeto.

Então é isso, eu estou muito ansioso para compartilhar com você todos esses conhecimentos, espero que você também esteja muito animado, muito animada para aprenderem mais sobre o SvelteKit. É isso, te espero no curso.

Conhecendo o SvelteKit - Criando a aplicação

Então, vamos criar nossa primeira aplicação SvelteKit. No meu navegador já está aberto a página oficial do SeveltKit, que é “kit.svelte.dev”, e se você descer um pouco a página e olhar do lado direito, você vai encontrar um bloco com alguns comandos que vamos executar no terminal do nosso computador. No caso, eu vou executar no PowerShell do Windows, mas se você estiver no Mac ou no Linux, pode executar no terminal do seu computador também.

Então, eu já vou selecionar o primeiro comando, dou um “Ctrl + C”, que é o comando npm init svelte my-app. Vou abrir o PowerShell do meu Windows, e já vou dar um “Ctrl + V” no PowerShell. E eu só vou apagar a última parte do comando, que é my-app, eu apago e coloco alura-cook, que vai ser o nome do nosso projeto, então fica npm init svelte alura-cook. Então, esse primeiro comando já vai criar o nosso projeto.

E lembrando que para esse comando funcionar, você precisa ter o Node instalado no seu computador. Eu fiz uma atividade antes desse vídeo, explicando corretamente esses detalhes, se você ainda não tiver visto.

Então, já escrevi alura-cook e dou um “Enter”. Nesse momento, o PowerShell já vai se tornar interativo comigo. Inclusive, se para você ele não tiver respondido imediatamente, você pode digitar qualquer seta do teclado, para ver se ele responde.

E ele está me perguntando qual é o tipo de template que eu quero fazer para o meu projeto. Então, a primeira opção é “SvelteKit demo app”, e a segunda opção é “Skeleton project”. Eu estou utilizando as setas para cima e para baixo do meu teclado para alternar entre as opções.

Eu quero criar um projeto esqueleto, então é a segunda opção “Skeleton project”, a outra vem com umas coisas que eu não estou interessado no momento. Então, dou um “Enter” para confirmar a minha opção.

A segunda pergunta que o terminal está me fazendo, é se eu quero adicionar checagem de tipo, lembrando que é tudo em inglês, mas eu vou traduzir algumas coisas com você. Então, eu quero adicionar, mas a opção que eu quero adicionar é a segunda, que é TypeScript, vamos utilizar nesse curso.

A terceira pergunta é se eu quero adicionar linting para algumas verificações que vão ser feitas no código, eu quero adicionar, então seleciono a opção “yes”. Agora, está perguntando se eu quero adicionar o Prettier para a formatação, não quero adicionar, não precisa.

Também está perguntando se eu quero utilizar Playright, não quero adicionar, então seleciono a opção “não”. E são cinco perguntas, e o terminal já está me dizendo que o projeto já está pronto, e dá uma revisão nas opções que selecionamos.

E já está passando os próximos passos, que os comandos que estão passando agora, são os mesmos que vimos no navegador, mas eu vou ficar pelo terminal mesmo. O próximo passo é executar o comando cd alura-cook, eu vou até copiá-lo do terminal com o “Ctrl + C”, e dar um “Ctrl + V” no próprio terminal, assim entramos na pasta do projeto. E agora, vamos executar o comando npm install, que é o segundo passo que o terminal nos deu.

Dou um “Enter” no comando, e esse processo pode demorar um pouco, porque é nesse momento que o Node vai instalar para nós todas as dependências necessárias para executar a nossa aplicação, nosso projeto SvelteKit. Então, já eu volto com você, quando terminar esse processo.

Já terminou de instalar as dependências do projeto, e se aparecer alguns alertas para você não tem nenhum problema, às vezes é comum, quando executamos o comando npm install. E agora, tem um passo que é o git init, mas eu não vou utilizá-lo, o próprio terminal está dizendo que é opcional, não vou utilizá-lo agora. Então, eu vou pular para o próximo passo, que é npm run dev -- --open, isso já vai abrir o nosso projeto no navegador do computador. Vamos ver se vai dar certo?

Olha só, no meu caso foi até bem rápido. E já apareceu um página no meu navegador, no Chrome, dizendo “Welcome to SvelteKit”, e está tudo inglês, é um exemplo, uma página esqueleto, que foi o tipo de projeto que selecionamos, mas já está funcionando corretamente.

Então, é isso, no próximo vídeo já vamos ver, vamos explorar um pouco a estrutura desse projeto, vamos utilizar o VSCode, e explorar um pouco a estrutura desse projeto que foi criada. Vamos lá?

Conhecendo o SvelteKit - Rotas e SPA

Acabamos de criar nossa aplicação SvelteKit, mas vamos explorar agora a estrutura de arquivos e pastas que foi criada. Eu vou voltar para o PowerShell, e eu vou dar um “Ctrl + C” algumas vezes no PowerShell para interromper um servidor que estava sendo executado nesse momento.

E eu vou digitar o comando code ., isso vai abrir o editor padrão de código do meu computador, que no caso é o VSCode. Inclusive é o que eu recomendo também para você utilizar, para você ter essa paridade visual comigo.

Então, abriu a estrutura de pastas e arquivos do projeto que criamos, tem um monte de pastas e arquivos que eu não vou prestar atenção agora neles. Eu quero que você preste atenção na pasta “src”, que é praticamente nela que vamos focar até o restante do curso. Então, eu vou abri-la, e dentro dela tem uma pasta chamada “routes”, e dois arquivos, que eu vou olhar agora com você o “app.html”.

Então, abrindo o “app.html”, percebemos que é um arquivo HTML base normal. E na verdade, ele é o arquivo HTML base de todo o nosso projeto. Só que ele tem algumas sintaxes novas, como você pode ver na linha 7, tem %sveltekit.head%. Dentro da div do body tem %sveltekit.body%, não se preocupa, que não vamos utilizar essa sintaxe durante o curso, isso é só para algumas configurações iniciais que o SvelteKit faz, para inserir elementos de forma dinâmica.

Mas onde eu encontro aquele conteúdo que vimos no navegador? “Welcome to SvelteKit”? Vamos encontrá-lo se abrirmos a pasta “routes”, e dentro dessa pasta já vem um arquivo chamado “index.svelte”. Abrindo esse arquivo, conseguimos encontrar uma tag <h1> com o texto “Welcome to SvelteKit”, e também uma tag de parágrafo, <p>, com aquele texto em inglês que vimos no navegador.

Mas o que eu quero te mostrar, é que essa pasta “routes” é uma pasta especial do Svelte, inclusive, você não pode alterar o nome dela, tem que deixar esse nome. E para você ver como ela é especial, dentro dela eu vou criar um novo arquivo chamado “receitas.svelte”. Esse vai ser o nome do nosso arquivo que vamos usar posteriormente, vou até guardar esse nome.

Então acabei de criar o arquivo “receitas.svelte”, e dentro dele eu vou criar uma tag de parágrafo com o texto <p>Aqui vem as receitas.... Eu vou salvar o arquivo e voltar para o navegador, e na URL do Chrome, está “localhost:3000”, essa URL se refere ao “index.svelte”.

E agora, eu vou acrescentar “/receitas”, dando “Enter”, isso não vai funcionar, porque eu finalizei o terminal do PowerShell. Então, se eu voltar para o VSCode e der um “Ctrl + J”, eu vou abrir o terminal integrado do VSCode. Precisamos fazer isso sempre que quisermos rodar a nossa aplicação.

Então, eu vou executar npm run dev -- --open. Então, fazendo isso, eu aproveitei o terminal integrado do VSCode, e agora abriu o “localhost:3000” normalmente.

Agora, eu vou fazer aquilo que eu estava escrevendo, que era “/receitas” no final da URL. Dando “Enter”, apareceu aquela frase “Aqui vem as receitas...”. Vou fazer mais. Vou voltar para o VSCode, vou fechar o terminal integrado, e logo abaixo do parágrafo eu vou adicionar uma tag link, <a>, com um atributo href=“/”, então <a href=”/”></a>, esse barra (\) vai se referir ao “index.svelte”, é a página principal do nosso projeto.

E o texto desse link vai ser “Voltar para a página principal”, então <a href=”/”>Voltar para a página principal</a>. Eu salvo esse arquivo, e vou até fazer a mesma coisa no “index.svelte”. Eu vou para lá, e vou adicionar uma tag âncora, e o tributo href vai ser “/receitas”, então <a href=”/receitas”>Ir para as receitas</a>, e eu salvo esse arquivo. E o texto do link vai ser “Ir para as receitas.

Eu vou voltar para o navegador, já está aparecendo o link na página de receitas, e vou clicar em “Voltar para a página principal”. Voltamos para a página principal, e agora vamos clicar em “Ir para as receitas”, e fomos para a página de receitas.

Então, eu quero que você preste atenção em uma coisa, que na hora que eu clicar no link “Voltar para a página principal”, eu quero que você preste atenção no botão de atualizar do navegador. Então, vou clicar agora, e não aconteceu nada com o botão, ele ficou intacto.

E isso é diferente do comportamento tradicional de links de sites tradicionais, que quando clicamos no link, “Ir para as receitas”, vai acontecer a mesma coisa, não se moveu o botão de atualizar o navegador. Isso quer dizer que a nossa página realmente não está atualizando.

E isso configura o comportamento de uma single page application, ou SPA, isso é uma sigla em inglês que significa “aplicação de página única”, isso já é conhecido para quem vem do React, e quem conhece a biblioteca React Router.

E no caso, o SvelteKit traz isso para nós de forma nativa, então temos esse comportamento de SPA, que é bastante rápido, é bem instantâneo essa troca de página, porque não estamos fazendo uma requisição para o servidor, como acontece em site tradicionais, isso já é uma forma mais moderna de fazer aplicações.

E o mais legal é que o SvelteKit utiliza um comportamento de SPA, e ao mesmo tempo ele não prejudica o SEO do nosso projeto. SEO também é outra sigla, que significa search engine optimization, que traduzindo, significa “otimização de motores de busca”.

Não vamos nos aprofundar nesse assunto nesse curso, mas eu vou deixar uma atividade no “Para saber mais”, para você se aprofundar nele. E agora, eu vou voltar para o VSCode, e eu quero adicionar só uma coisa no arquivo “index.svelte”. Nas primeiras linhas eu vou escrever uma tag chamada <svelte:head>.

Essa é uma sintaxe do Svelte puro, não é exclusivo do SvelteKit. Então, dentro dessa tag eu vou escrever <title>Alura Cook</title>. Salvando esse arquivo e voltando no navegador, já conseguimos ver que o título da aba se tornou “Alura Cook”.

Então, o que essa tag especial svelte:head faz, é que conseguimos adicionar de forma dinâmica elementos que vão ser adicionados no “app.html”, nessa parte de %sveltekit.head%. Então, isso é muito útil, porque conseguimos alterar o título de forma dinâmica, dependendo da página que estamos, dependendo da rota que estamos.

Então, se eu for em “receitas.svelte”, eu vou fazer a mesma coisa, eu vou escrever <svelte:head> na primeira linha do arquivo, e dentro dessa tag especial eu vou escrever o título novamente, mas eu vou colocar um título diferente, então <title>Alura Cook | Receitas</title> para você perceber a diferença.

Salvo o arquivo, volto para o navegador, e agora, preste atenção do título da aba do navegador, eu vou clicar em “Ir para receitas”, e está lá “Alura Cook | Receitas”. Volto para a página principal e volta para “Alura Cook”, então é um recurso bem legal do Svelte nativo mesmo.

Então, só falta eu falar sobre a pasta “static”. E eu vou aproveitar para passar uma atividade com todos os arquivos, todas as imagens que vamos utilizar durante o curso. Te espero lá.

Sobre o curso SvelteKit: criando uma SPA

O curso SvelteKit: criando uma SPA possui 82 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de Svelte em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o SvelteKit
• Iniciando o Alura Cook
• Avançando no Alura Cook
• Avançando com componentes
• Finalizando a primeira página