Como implantar um aplicativo SvelteKit?

Neste artigo, você criará um aplicativo gerador de cotações básico usando o SvelteKit e o hospedará usando os contêineres do Back4app.

O SvelteKit é uma estrutura moderna de aplicativos da Web que se baseia nos princípios da estrutura Svelte JavaScript. Ele oferece aos desenvolvedores uma maneira eficiente e elegante de criar aplicativos da Web com foco na simplicidade e no desempenho.

Em 2020, o SvelteKit foi criado por Rich Harris, o criador do Svelte, e em outubro de 2022, Rich Harris e sua equipe se juntaram à Vercel.

Ao implantar um aplicativo SvelteKit, é útil usar o Back4app Containers. O Back4app Containers é uma plataforma que permite aos desenvolvedores implantar e gerenciar aplicativos em contêineres na infraestrutura do Back4app.

É um serviço baseado em nuvem que oferece uma maneira simples e escalável de executar aplicativos em contêineres na produção.

O que é o SvelteKit?

O SvelteKit é uma estrutura da Web para a criação de aplicativos da Web robustos e de alto desempenho. Ele foi desenvolvido com base no Svelte, uma estrutura JavaScript leve e reativa.

O SvelteKit oferece vários recursos que facilitam o desenvolvimento e a implantação de aplicativos da Web, incluindo renderização no lado do servidor (SSR), geração de site estático (SSG), roteamento no lado do cliente etc.

Ele também oferece muitos benefícios, como simplicidade, flexibilidade, escalabilidade, desempenho etc. Continue lendo para saber como implementar o aplicativo SvelteKit.

Vantagens do SvelteKit

Aqui estão algumas das vantagens de usar a estrutura do SvelteKit:

Curva de aprendizado fácil

Ao escolher uma estrutura de front-end para desenvolvimento da Web, um dos fatores críticos a considerar é a curva de aprendizado associada a essa estrutura.

Uma curva de aprendizado acentuada pode desencorajá-lo a adotar uma estrutura, enquanto uma curva suave pode torná-la mais acessível e atraente.

O SvelteKit tem uma curva de aprendizado suave, especialmente se você estiver familiarizado com HTML, CSS e JavaScript. Sua sintaxe é direta e intuitiva, o que facilita a compreensão e a criação de aplicativos da Web.

Suporte a TypeScript

O TypeScript é um superconjunto de JavaScript tipado estaticamente que ganhou popularidade no mundo do desenvolvimento da Web. Ele traz tipagem forte, clareza de código e melhores ferramentas para projetos JavaScript.

O SvelteKit tem excelente suporte ao TypeScript, permitindo que você escreva códigos seguros para o tipo e capture possíveis erros durante o desenvolvimento. Isso melhora a qualidade do código, a capacidade de manutenção e a colaboração entre as equipes de desenvolvimento.

Roteamento baseado em arquivos

O roteamento baseado em arquivos é um recurso moderno de desenvolvimento da Web que facilita a organização e o gerenciamento de rotas em seu aplicativo. Ele funciona usando o gerenciamento de arquivos para determinar rotas em vez de usar uma biblioteca de terceiros.

O SvelteKit usa um sistema de roteamento baseado em arquivos. Você organiza as rotas do seu aplicativo criando arquivos e pastas, o que facilita o gerenciamento da estrutura do seu projeto.

Comunidade e ecossistema

No campo do desenvolvimento da Web, ter uma comunidade forte e solidária, juntamente com um ecossistema próspero, é uma vantagem significativa.

O SvelteKit se beneficia do ecossistema mais amplo do Svelte, que inclui uma comunidade crescente, uma rica coleção de componentes e bibliotecas reutilizáveis e uma extensa documentação.

Limitações do SvelteKit

Embora o SvelteKit seja uma estrutura avançada para a criação de aplicativos da Web eficientes, ele tem algumas limitações que você deve ter em mente. Essas limitações incluem:

Limitações da renderização no lado do servidor (SSR)

A renderização no lado do servidor (SSR) é uma técnica que permite que os aplicativos da Web renderizem conteúdo no servidor e enviem HTML pré-renderizado para o cliente. A SSR tem várias vantagens, incluindo SEO aprimorado, carregamentos iniciais de página mais rápidos e melhor desempenho em dispositivos de baixo custo.

O SvelteKit oferece suporte à renderização no lado do servidor. No entanto, ele não possui alguns recursos avançados de SSR disponíveis em outras estruturas, como controle refinado sobre a renderização no lado do servidor ou suporte para streaming de SSR.

Ferramentas limitadas

Como uma estrutura relativamente nova, as ferramentas do SvelteKit ainda estão evoluindo e talvez não tenham o mesmo nível de maturidade e conjunto de recursos que outras estruturas.

Isso significa que pode haver alguma variabilidade na configuração do desenvolvimento e nas escolhas de ferramentas entre diferentes projetos do SvelteKit. Isso pode resultar em menos opções para tarefas como code linting, testes ou otimização de compilação.

Ecossistema limitado

Um ecossistema limitado é uma das limitações do SvelteKit e pode afetar a experiência de desenvolvimento e as opções disponíveis para você. Em comparação com estruturas mais estabelecidas, o SvelteKit tem um ecossistema menor de bibliotecas, ferramentas e plug-ins.

Isso significa que talvez você precise criar determinadas funcionalidades do zero ou contar com soluções apoiadas pela comunidade. É importante considerar o estado atual do ecossistema do SvelteKit ao decidir se ele será usado em um projeto.

Tamanho da comunidade

O tamanho da comunidade pode afetar significativamente a experiência de desenvolvimento e o suporte disponível para uma determinada estrutura.

Embora a comunidade do SvelteKit esteja crescendo rapidamente, ela ainda é menor do que as comunidades de outras estruturas importantes, como React e Vue.js.

Isso pode significar menos recursos prontamente disponíveis, adoção mais lenta de novos recursos, menos recursos de aprendizado e, possivelmente, tempos de resposta mais longos para o suporte da comunidade.

Opções de implantação do SvelteKit

Você pode implementar aplicativos do SvelteKit em várias plataformas, incluindo Infraestrutura como Serviço (IaaS) e Contêiner como Serviço (CaaS).

Infraestrutura como serviço (IaaS)

As plataformas de infraestrutura como serviço (IaaS) são serviços de computação em nuvem que fornecem recursos de computação virtualizados pela Internet. Esses recursos incluem máquinas virtuais, armazenamento, rede e outros componentes fundamentais.

As plataformas de IaaS oferecem uma maneira flexível e dimensionável de acessar e gerenciar sua infraestrutura de TI sem investir e manter hardware físico.

Eles também oferecem serviços gerenciados, backup e recuperação de desastres, segurança e conformidade, além de eficiência de custos seguindo um modelo de preços de pagamento conforme o uso.

Alguns exemplos de plataformas IaaS que você pode usar para implementar aplicativos SvelteKit incluem:

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

Contêiner como serviço (CaaS)

As plataformas de contêiner como serviço (CaaS), também conhecidas como plataformas de gerenciamento de contêineres ou plataformas de orquestração de contêineres, são serviços baseados em nuvem que simplificam a implantação, o dimensionamento, o gerenciamento e a orquestração de aplicativos em contêineres.

Essas plataformas foram projetadas para simplificar o processo de conteinerização e fornecer uma solução abrangente para o gerenciamento de contêineres, permitindo que você se concentre no desenvolvimento de seus aplicativos sem as complexidades do gerenciamento da infraestrutura.

Você pode implementar seus aplicativos SvelteKit usando plataformas CaaS. Algumas dessas plataformas incluem:

• Docker
• Kubernetes
• Back4App

Observe que essas são outras opções de implementação disponíveis para os aplicativos SvelteKit. A melhor plataforma para o seu aplicativo dependerá de suas necessidades específicas, incluindo considerações de desempenho, escalabilidade e custo.

Processo de implantação

Usando a plataforma Back4app CaaS, a implantação de um aplicativo SvelteKit é um processo fácil e simplificado que oferece muitos benefícios – o CaaS da Back4app lida com a infraestrutura subjacente, para que você possa se concentrar na criação de seus aplicativos.

O que são contêineres do Back4app?

O Back4App Containers, também conhecido como “Back4App CaaS” (Containers as a Service), é um recurso fornecido pela Back4App que permite aos desenvolvedores implantar e gerenciar contêineres Docker no ambiente de nuvem fornecido pela Back4App.

É uma solução gerenciada de hospedagem de contêineres que simplifica a implantação e o gerenciamento de contêineres do Docker na nuvem.

Os contêineres do Back4app oferecem escalabilidade, flexibilidade e integração com outros serviços do Back4App, o que os torna adequados para uma ampla gama de aplicativos e serviços.

É uma excelente opção para aqueles que desejam aproveitar a conteinerização em seus projetos e, ao mesmo tempo, minimizar a complexidade do gerenciamento da infraestrutura.

Introdução ao projeto

Neste tutorial, você criará um aplicativo gerador de citações simples com o SvelteKit, usando uma API de citações para obter citações aleatórias a serem exibidas.

Para criar um aplicativo SvelteKit, execute o seguinte comando em seu terminal:

npm create svelte@latest quote-generator

Depois de executar o comando, configure seu projeto SvelteKit usando os prompts exibidos no terminal.

Por exemplo:

Como visto na imagem acima, o projeto do gerador de citações usará a sintaxe do TypeScript, o ESLint para a identificação de código e o Prettier para a formatação do código.

Agora, em seu terminal, alterne seu diretório atual para o diretório do projeto e instale as dependências necessárias. Para fazer isso, execute os seguintes comandos em seu terminal:

cd quote-generator
npm install

Depois de instalar as dependências necessárias, abra o projeto em seu IDE favorito e comece a criar o aplicativo.

Criando seu aplicativo

Ao criar seu aplicativo, a primeira coisa a fazer é definir os estilos e o layout globais do aplicativo. Para definir os estilos globais do seu aplicativo, crie uma pasta de estilos no diretório src e adicione um arquivo global.css a essa pasta.

No arquivo global.css, escreva as seguintes linhas de código:

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

O bloco de código acima configura alguns estilos básicos para seu aplicativo. Ele importa a fonte Montserrat do Google Fonts.

Ele também aplica os estilos padrão a todos os elementos, centraliza o conteúdo no corpo e estiliza o elemento botão em seus estados padrão e de foco.

Quando terminar de definir os estilos globais do aplicativo, você deverá aplicá-los ao aplicativo.

Para fazer isso, você precisa da rota de layout. O SvelteKit fornece um arquivo +layout.svelte para ajudá-lo a definir layouts em seu aplicativo. Você pode definir o layout do seu aplicativo adicionando o arquivo +layout.svelte ao diretório src/routes.

No arquivo +layout.svelte, importe o arquivo global.css para aplicar seus estilos globais ao aplicativo.

Assim:

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

O elemento slot cria um espaço para o aplicativo inserir o conteúdo da página. Quando você renderiza uma página, o aplicativo preenche o elemento slot com o conteúdo da página, tornando-o visível no layout.

No diretório src/lib de seu projeto, crie um arquivo Card.svelte. Esse é o componente Card que você usará para renderizar os dados obtidos da API de cotação.

O componente Card deve ter a seguinte aparência:

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

Na tag de script do componente Card, há duas props definidas, as props de autor e de conteúdo. Ambas são do tipo string com valores iniciais de strings vazias.

O elemento main define o modelo do componente. O modelo inclui um elemento h4 que exibe o valor da propriedade author (autor ) e um elemento p que exibe o valor da propriedade content (conteúdo ). Por fim, a tag style contém propriedades e valores CSS que estilizam o componente.

Agora, importe e renderize o componente Card no arquivo +page.svelte. Essa é a rota inicial que é exibida quando você renderiza o aplicativo.

No arquivo +page.svelte, você buscará os dados da API de cotação e os passará para o componente Card usando suas props.

Assim:

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

O bloco de código acima busca dados da API de cotação com a função fetchQuote e, em seguida, atribui os dados buscados à variável de cotação.

Passar a função fetchQuote para o gancho onMount garante que ela seja executada quando o componente for montado (ou seja, na renderização inicial do componente).

O componente Card aceita os valores das propriedades author e content do objeto quote e os exibe. Clicar no botão aciona a função fetchQuote para buscar outra citação aleatória a ser exibida.

O bloco de código acima usa um componente Icon do pacote @iconify/svelte. Para usar esse componente, você deve primeiro instalar o pacote @iconify/svelte executando o seguinte comando no diretório do projeto em seu terminal:

npm install --save-dev @iconify/svelte

Depois de instalar o pacote @iconify/svelte, execute seu aplicativo no servidor de desenvolvimento para ver o aplicativo. Você pode fazer isso executando o seguinte comando em seu terminal:

npm run dev

A execução do comando acima iniciará o servidor de desenvolvimento em http://localhost:5173/. Abra o link em seu navegador da Web para ver o aplicativo.

O aplicativo deve ter a seguinte aparência:

Dockerize seu aplicativo

Antes de poder implantar seu aplicativo na plataforma Back4app CaaS, você deve primeiro colocá-lo em uma Docker. Para dockerizar um aplicativo SvelteKit, primeiro você precisa instalar o adaptador de nó do Svelte.

Você pode instalar o adaptador de nó executando o seguinte comando em seu terminal:

npm i -D @sveltejs/adapter-node

A execução desse comando instala o pacote @sveltejs/adapter-node como uma dependência de desenvolvimento em seu projeto SvelteKit. Você usa esse adaptador quando deseja implantar seu aplicativo SvelteKit em um ambiente Node.js.

Quando terminar de instalar o pacote, substitua a primeira linha de código em seu arquivo svelte.config.js pelo código abaixo:

import adapter from '@sveltejs/adapter-node';

A próxima etapa é criar um arquivo .dockerignore no diretório raiz do seu projeto. No arquivo .dockerignore, especifique os arquivos e diretórios que devem ser excluídos ao criar a imagem do Docker.

Assim:

node_modules
.svelte-kit
build
public

Depois de especificar os arquivos e diretórios que devem ser excluídos. Crie um arquivo do Docker chamado Dockerfile no diretório raiz do projeto.

No Dockerfile, adicione estas linhas de código:

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

Esse Dockerfile causa uma compilação em vários estágios, em que o primeiro estágio constrói o aplicativo e o segundo cria uma imagem de produção menor com apenas as dependências necessárias.

Agora, você pode criar a imagem do docker do seu aplicativo executando o seguinte comando no terminal:

docker build -t quote-generator .

Implementação do aplicativo

Depois de dockerizar seu aplicativo e enviá-lo para um repositório do GitHub, você pode implantá-lo no Back4app. Para fazer isso, crie uma conta no Back4app se você ainda não tiver uma.

Para criar uma conta Back4app, siga estas etapas:

1. Visite o site da Back4app.
2. Clique no botão “Sign up” (Registrar-se ).
3. Preencha o formulário de registro e envie-o.

Depois de criar sua conta do Back4app, faça login na sua conta no site do Back4app e crie um novo aplicativo. Para isso, clique no botão “Novo aplicativo” no canto superior direito da tela.

Selecione a opção Container as a Service (Contêiner como serviço). Depois de selecionar essa opção, o site o redirecionará para uma página diferente na qual você vinculará sua conta do GitHub ao Back4app.

Depois de vincular sua conta do GitHub à Back4app, selecione o repositório do seu aplicativo para implantação.

Dê um nome ao seu aplicativo e configure sua implementação inicial antes de finalmente implementar o aplicativo.

Após a implantação bem-sucedida do aplicativo, a Back4app fornecerá um link para acessar o aplicativo no seu navegador da Web.

Conclusão

Em conclusão, a implementação de um aplicativo SvelteKit usando a plataforma CaaS da Back4pp simplifica o desenvolvimento. O processo é simples.

Isso envolve a criação do seu aplicativo, a dockerização do aplicativo, o envio do aplicativo para um repositório do GitHub e, por fim, a implantação do aplicativo.

Ao considerar a implantação de seus aplicativos SvelteKit, a plataforma Back4app CaaS. oferece uma solução dimensionável e econômica.

Se você gostou deste artigo, talvez também goste de ler o artigo Como criar um aplicativo SvelteKit usando o ChatGPT.

PERGUNTAS FREQUENTES