Como instalar o Svelte (plain SPA) no Saplo

O Svelte compila componentes para JavaScript puro em tempo de construção, sem o DOM virtual a ser carregado no navegador, por isso o pacote resultante é um dos mais pequenos entre os frameworks populares. Na variante SPA simples (sem SSR, sem o framework SvelteKit), o Svelte é construído pelo Vite numa mão-cheia de ficheiros estáticos HTML, CSS e JS - exatamente como o React ou o Vue. No Saplo, o Svelte (SPA simples) é instalado da mesma forma que qualquer outra aplicação do catálogo: o motor cria o projeto, constrói-o através do Vite e expõe a pasta dist pronta no nginx, sem qualquer processo Node a ser mantido em segundo plano após a construção.

Para quem é o Svelte (SPA simples) no Saplo

Antes de começares a instalação, verifica se é uma boa escolha para o teu projeto:

• estás a construir um painel ou dashboard para clientes - o Saplo serve um build pronto como ficheiros estáticos, sem o seu próprio processo Node em segundo plano,
• o frontend deve ligar-se à tua própria API - colocas o SPA ao lado do backend (Django, Node, Docker) no mesmo Box ou separadamente,
• queres o bundle mais pequeno possível - o compilador Svelte remove o framework do código resultante, então a página inicia mais rápido do que com bibliotecas baseadas em DOM virtual,
• o projeto não precisa de renderização do lado do servidor - se precisas de SSR e melhor SEO, no mesmo Catálogo de aplicações encontrarás o SvelteKit,
• queres implementações com git push em vez de upload manual de ficheiros via FTP - ligas o repositório uma vez, cada push para o branch de produção constrói e implementa uma nova versão automaticamente.

Se o projeto precisa de renderização do lado do servidor, roteamento baseado em ficheiros ou melhor SEO imediatamente, verifica o stack SvelteKit no Catálogo de aplicações em vez do Svelte puro.

Requisitos

Para implementares uma aplicação Svelte (SPA simples) no Saplo, precisas de:

• Uma Box em qualquer plano, até a S é suficiente - uma SPA construída é um conjunto de ficheiros estáticos, sem um processo mantido em memória após a compilação,
• Mínimo de 256 MB de RAM livre para o processo de compilação e 2 GB de espaço em disco,
• Um domínio ou subdomínio *.saploapp.pl incluído em cada plano,
• Um repositório Git, se quiseres implementações automáticas (opcional para começar, também podes carregar a aplicação como um arquivo .zip através do painel).

Instalação passo a passo

1. No Painel Saplo, acede ao Catálogo de aplicações e seleciona Svelte (categoria "Aplicações", descrição "Frontend SPA leve").
2. Indica a Box e o nome da aplicação - a partir deste, é gerado um subdomínio predefinido <name>.saploapp.pl.
3. Escolhe a versão do Node.js para o build (18, 20 ou 22, por defeito 20) e confirma a instalação.
4. O motor gera o esqueleto Svelte através do Vite (equivalente a npm create vite -- --template svelte), instala as dependências e constrói o projeto, e o conteúdo do diretório dist é colocado diretamente no diretório da aplicação, servido pelo nginx.
5. Após a conclusão da instalação, o domínio do passo 2 mostra o esqueleto inicial do Vite + Svelte - a partir deste momento, podes implementar o teu próprio código nele.

Implementa o teu próprio código via Git

1. Nos detalhes da aplicação, encontra a secção Git / CI-CD e clica em "Ligar GitHub", confirma a instalação da aplicação "Saplo Deploy" e indica o repositório com o projeto Svelte.
2. O ficheiro saplo.yaml tem de estar na pasta raiz do repositório.
3. Faz commit e push do ficheiro saplo.yaml para o branch de produção (por defeito main).
4. Cada git push subsequente para este branch constrói o projeto e substitui o conteúdo do diretório dist na Box. Podes ver o estado no separador Implementações.
5. Se a construção falhar, a versão anterior em funcionamento permanece - a Saplo não a substitui por uma versão com problemas.

Exemplo de um ficheiro saplo.yaml mínimo para Svelte:

name: my-project
stack: svelte
build:
  install: npm ci
  command: npm run build
  output: dist

Svelte (SPA simples) no Saplo vs. Alternativas

Perguntas Frequentes

Qual é a diferença entre Svelte (SPA simples) e SvelteKit no catálogo Saplo? SPA simples são ficheiros estáticos sem SSR e sem um processo Node em segundo plano, construídos apenas com Vite. SvelteKit é um framework completo com SSR opcional, executado no Saplo como um processo de longa duração com reinício automático.

Posso ter várias aplicações Svelte numa única Box? Sim, o Catálogo de aplicações permite instalar vários módulos lado a lado, cada um com o seu próprio subdomínio ou domínio.

Preciso de SSR e de um melhor SEO - o que devo escolher? A stack SvelteKit do mesmo catálogo - é o Svelte com renderização completa do lado do servidor.

Vou ter SSL e um domínio próprio? Sim, o certificado SSL é automático e o domínio ou subdomínio *.saploapp.pl está incluído no preço de qualquer plano.

Como posso alterar o diretório de saída da build se não estiver a usar o dist por defeito? Define o campo build.output em saplo.yaml para o caminho correto.

Com Svelte (SPA simples) no Saplo, configuras tudo desde o zero até teres um domínio a funcionar em poucos minutos, e o bundle resultante é um dos mais leves entre as stacks disponíveis. Se o projeto crescer e precisar de SSR, a migração para o SvelteKit no mesmo catálogo não exige uma alteração de alojamento.