Configurando um projeto com Svelte + Svelte Navigator

Olá pessoal, tudo bem com vocês? Neste artigo ensino como configurar um projeto com o Svelte + Svelte Navigator, então vamos lá! 🚀

Iniciando a instalação

Como na própria documentação do Svelte nos mostra, você deve abrir o seu terminal, ir até a pasta desejada e digitar o seguinte comando:

npx degit sveltejs/template my-app

npx degit sveltejs/template my-app

OBS: Onde está escrito my-app será o nome do seu projeto.

Feito isso, para darmos continuidade iremos entrar na pasta do projeto e digitar o seguinte comando para realizar a instalação das dependências:

npm install

Após a instalação abra o projeto no seu editor de código favorito e você terá a seguinte estrutura de pastas e arquivos:

• Na pasta public você encontrará alguns arquivos já padrões que são: o CSS inicial do projeto, o favicon inicial do projeto e a index.html que vai ser responsável por fazer toda a renderização do projeto. Ainda na pasta public você também pode por alguns novos arquivos como de imagens ou outros scripts caso necessário futuramente.

• Na pasta scripts existe um arquivo de configurações que é instalado por padrão caso você deseja trabalhar com typeScript.

• Na pasta src é onde você encontrará os arquivos para trabalhar em cima do seu novo projeto. Pode ver que temos uma extensão nova que é a .svelte. Para quem trabalha ou já trabalhou com Vue.js vai notar uma semelhança.

Nela possuímos o javaScript, HTML e CSS do componente, isso torna o projeto mais organizado e simples na hora de trabalhar e o melhor, dar manutenção!

Quando o build é realizado no Svelte, ele transforma todas essas páginas .svelte em javaScript puro sem nenhuma dependência de framework.

Instalando o Svelte Navigator

Como todo projeto, precisamos de rotas e para isso iremos utilizar o Svelte Navigator que irá nos ajudar nessa parte. Abra o terminal dentro do projeto e digite o comando:

npm install --save svelte-navigator

Após a instalação do Svelte Navigator acesse o arquivo App.svelte e apague todo o conteúdo dele e deixe exatamente como na imagem abaixo:

Você deve estar se perguntando o motivo para ter feito isso e eu explico. O motivo é muito simples, nós vamos organizar o projeto criando componentes e rotas deixando tudo mais fluído.

Criando as rotas

No arquivo App.svelte, aquele que nós limpamos anteriormente vamos adicionar o seguinte código:

<script>
	import { Router, Route } from 'svelte-navigator';

	import Header from './components/Header.svelte';
	import Footer from './components/Footer.svelte';

	import Home from './routes/Home.svelte';
	import About from './routes/About.svelte';
</script>

<Router>
	<Header />
	<main>
		<Route path="/">
			<Home />
		</Route>
		<Route path="sobre" component={About} />
	</main>
	<Footer />
</Router>

<style>
	main {
		width: 100%;
		margin: 0 auto;
		padding: 0 1rem;
		max-width: 1024px;
	}
</style>

Como vocês podem ver, nós importamos o Router e o Route do Svelte Navigator e criamos os redirecionamentos das rotas do nosso projeto e importamos as páginas Home, About e os componentes Header e Footer. Com isso nossa configuração de rotas está quase completa, agora precisamos ir no arquivo package.json e adicionar uma linha na parte de scripts para podermos rodar em breve nossa aplicação. Deixe exatamente como está aqui no exemplo abaixo:

 "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  },

Criando os componentes

Dentro da pasta src vamos criar mais uma pasta chamada components e dentro dela vamos criar os seguintes arquivos: Header.svelte e Footer.svelte. Seu projeto ficara com a seguinte estrutura:

No componente Header.svelte você irá digitar o seguinte código:

<script>
	import { Link } from 'svelte-navigator';
</script>

<header>
	<nav>
		<Link to="/">Home</Link>
		<Link to="sobre">Sobre</Link>
	</nav>
</header>

<style>
	header {
		background: #eeeeee;
		width: 100%;
		margin: 20px auto;
		padding: 20px;
		max-width: 1024px;
	}
</style>

Podem ver que importamos o Link de dentro da dependência do Svelte Navigator, ele serve para as rotas funcionarem. Ele irá renderizar uma tag Home no nosso HTML fazendo o redirecionamento para as nossas páginas.

No componente Footer.svelte você irá digitar o seguinte código:

<script>
</script>

<footer>
	<p>Rodapé do projeto</p>
</footer>

<style>
	footer {
		background: #eeeeee;
		width: 100%;
		margin: 30px auto;
		padding: 20px;
		max-width: 1024px;
	}
</style>

Criando as páginas

A criação das páginas é basicamente a mesma coisa que as de componentes, mas nós vamos criar dentro da pasta src uma nova pasta chamada routes e nela iremos adicionar os arquivos Home.svelte e About.svelte. Seu projeto ficara com a seguinte estrutura:

No componente Home.svelte você irá digitar o seguinte código:

<script>
</script>

<section>
	<h1>Home</h1>
</section>

<style>
</style>

No componente About.svelte você irá digitar o seguinte código:

<script>
</script>

<section>
	<h1>About</h1>
</section>

<style>
</style>

Executando o projeto

Agora chegamos na parte de rodar nosso projeto, para isso basta você ir no terminal dentro da pasta do projeto e digitar o comando:

npm run dev

Ele irá dar um build e você terá uma mensagem semelhante a essa no seu terminal:

Feito isso seu projeto já está rodando e pronto para ser acessado pelo link http://localhost:5000 e terá uma tela igual essa abaixo. Nela você pode acessar os links Home e Sobre.

Podem ver que a configuração não é tão complicada e com apenas alguns minutos você já terá um projeto rodando em sua máquina. Para saber mais a respeito do Svelte, acesse a própria documentação pelo link: https://svelte.dev/

Espero que tenham gostado desse artigo e até a próxima! 😁✌