Como criar uma aplicação Vue no Saplo (frontend leve)

Vue 3, a par de React, é a segunda biblioteca mais popular para criar interfaces e, tal como React, não é um hosting por si só. Após a compilação, o projeto (normalmente com Vite) fica composto por ficheiros estáticos HTML, CSS e JS, que exigem um servidor com o fallback de rotas corretamente configurado para o Vue Router no modo history. Sem isso, ao atualizar uma subpágina, surge um erro 404. No Saplo, implantas o Vue exatamente tal como qualquer outra aplicação a partir do diretório: o motor compila o projeto, disponibiliza o diretório dist através do nginx e configura automaticamente o fallback de rotas.

Para quem é o Vue na Saplo

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

• estás a desenvolver um painel de administração - A Saplo serve o build concluído como ficheiros estáticos, sem um processo Node próprio em segundo plano,
• o frontend tem de se ligar à tua própria API - colocas a SPA ao lado do backend (Django, Node, Docker) no mesmo Box ou separadamente,
• aplicação de página única com Vue Router em modo history - o fallback de todas as rotas para index.html está configurado automaticamente, não tens de acrescentar nada no nginx,
• queres fazer deploys com git push em vez de carregar manualmente ficheiros por FTP - configuras o repositório uma vez e cada push para o branch de produção compila e implementa uma nova versão automaticamente.

Se o teu projeto precisar de renderização no lado do servidor e de melhor SEO, consulta a stack Nuxt no catálogo de aplicações em vez do Vue puro.

Requisitos

Para colocares Vue na Saplo, precisas de:

• uma Box em qualquer plano, a Box S chega - uma SPA compilada é apenas um conjunto de ficheiros estáticos, sem processos mantidos em memória após o build,
• pelo menos 256 MB de RAM livre para o processo de build e 2 GB de espaço em disco,
• domínios ou subdomínios *.saploapp.pl incluídos no preço de cada plano,
• um repositório Git, se quiseres deploys automáticos (opcional para começar; podes também carregar a aplicação como um arquivo .zip através do painel).

Instalação passo a passo

1. No painel Saplo, entra em Catálogo de aplicações e escolhe Vue.js (categoria "Aplicações").
2. Seleciona a Box e o nome da aplicação - a partir deste é criado o subdomínio predefinido <name>.saploapp.pl.
3. Escolhe a versão do Node.js para a compilação (18, 20 ou 22, por defeito 20) e confirma a instalação.
4. O motor cria a estrutura do Vue através do Vite (equivalente a npm create vite -- --template vue), instala as dependências e compila o projeto, enquanto o conteúdo da pasta dist é colocado diretamente na pasta da aplicação, servida pelo nginx.
5. Após a instalação, o domínio do passo 2 apresenta a estrutura inicial do Vite + Vue - a partir daí, publicas o teu próprio código para o domínio.

Implementação do teu próprio código através do 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 seleciona o repositório com o projeto Vue.
2. No diretório raiz do repositório tem de existir o ficheiro saplo.yaml.
3. Faz commit e envia o ficheiro saplo.yaml para o ramo de produção (por predefinição main).
4. Cada git push posterior enviado para este ramo constrói o projeto e substitui o conteúdo do diretório dist no Box. O estado é visível no separador Deployments.
5. Se a compilação falhar, a versão anterior funcional permanece no lugar - o Saplo não a substitui por uma versão com erros.

Exemplo de ficheiro mínimo saplo.yaml para Vue:

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

Vue na Saplo versus as alternativas

Perguntas mais frequentes

O Vue Router em modo history funciona sem configuração adicional? Sim, o fallback de todos os caminhos para index.html está ativo imediatamente após a instalação, pelo que atualizar qualquer subpágina não termina num erro 404.

Posso ter várias aplicações Vue no mesmo Box? Sim, o diretório 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 melhor SEO - o que devo escolher? Stack Nuxt no mesmo diretório - Vue com renderização completa no servidor.

Recebo 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 cada plano.

Como altero o diretório de saída do build se não usar o dist predefinido? Define o campo build.output em saplo.yaml para o caminho correto.

Colocas Vue no Saplo desde zero até ter um domínio em funcionamento em poucos minutos, e o routing do Vue Router funciona sem configuração manual. Se o projeto crescer e precisar de SSR, a migração para Nuxt no mesmo diretório não exige alterações no alojamento.