Como instalar o React no Saplo (SPA e dashboard sem backend)

O React é hoje uma escolha padrão para construir interfaces, mas o React em si não é um serviço de alojamento - é uma biblioteca de UI. Um projeto construído (geralmente com Vite) é um punhado de ficheiros estáticos HTML, CSS e JS que precisam de ser expostos em algum lugar com um encaminhamento SPA adequado (fallback de todos os caminhos para index.html) e sem processos em segundo plano desnecessários. Um alojamento partilhado normal exige que carregues os ficheiros manualmente via FTP e não lida com o fallback de rotas, e as plataformas pagas cobram-te por cada pedido e por cada construção. Na Saplo, tu implementas o React como qualquer outra aplicação do catálogo: o motor constrói o projeto, expõe o diretório dist terminado no nginx e trata do reencaminhamento de rotas automaticamente.

Para quem é o React no Saplo

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

• estás a construir um painel de administração ou um dashboard para clientes - o Saplo serve o build pronto como ficheiros estáticos, sem um servidor Node próprio mantido em memória,
• o frontend precisa de se ligar à tua própria API - instalas o SPA ao lado do backend (Django, Node, Docker) na mesma Box ou separadamente, e inseres o endereço da API como uma variável de ambiente do build,
• o projeto não precisa de renderização do lado do servidor - se te preocupas com SEO e SSR, consulta o stack Next.js no catálogo de aplicações em vez de React puro,
• queres implementações com git push em vez de carregamento manual de ficheiros via FTP - ligas o repositório uma vez, e cada push para o branch de produção constrói e implementa automaticamente uma nova versão.

Requisitos

Para instalares o React na Saplo, precisas de:

• Uma Box de qualquer plano, mesmo uma S é suficiente - uma SPA (Single Page Application) criada é um conjunto de ficheiros estáticos; após a construção, não há nenhum processo Node mantido na memória, então o consumo de RAM após a instalação cai praticamente para zero.
• Um mínimo de 256 MB de RAM livre para o processo de build (o Vite compila o projeto uma vez, na instalação e em cada git push) e 2 GB de espaço em disco.
• Um domínio ou subdomínio *.saploapp.pl incluído em todos os planos, onde a aplicação será alojada.
• Um repositório Git, se quiseres usar a implementação automática (opcional para começar, também podes carregar a aplicação através de um arquivo .zip no painel).

Instalação passo a passo

1. No Painel da Saplo, vai a Catálogo de aplicações e escolhe React (categoria "Aplicações").
2. Indica a Box e o nome da aplicação - a partir dele será criado o subdomínio padrão <name>.saploapp.pl.
3. Escolhe a versão do Node.js para a construção (18, 20 ou 22, por padrão 20) e confirma a instalação.
4. O motor gera o esqueleto do React através do Vite (equivalente a npm create vite -- --template react), instala as dependências e constrói o projeto, e o conteúdo do diretório dist vai diretamente para o 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 + React - a partir desse momento, implementas 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 "Conectar GitHub", confirma a instalação da aplicação "Saplo Deploy" na tua conta ou organização e indica o repositório com o projeto React.
2. O ficheiro saplo.yaml deve estar no diretório raiz do repositório.
3. Faz commit e push do ficheiro saplo.yaml para o ramo de produção (por predefinição main).
4. Cada git push subsequente para este ramo constrói o projeto e substitui o conteúdo do diretório dist na Box. Podes ver o Estado no separador Deployments.
5. O routing SPA (todos os caminhos redirecionam para index.html) é configurado automaticamente - não precisas de adicionar nada ao nginx.

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

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

React no Saplo vs. alternativas

Perguntas Frequentes

Posso ter várias aplicações React numa única Box? Sim, o Catálogo de aplicações permite-te instalar vários módulos lado a lado, cada um com o seu próprio subdomínio ou domínio, desde que haja RAM e espaço em disco suficientes para o plano.

E o roteamento do lado do cliente (React Router)? Funciona sem configuração adicional - o fallback de todos os caminhos para index.html é configurado imediatamente após a instalação.

Tenho de usar o Vite? A instalação do catálogo cria o projeto através do Vite, mas podes implementar o teu próprio projeto (também baseado noutro bundler) via git, desde que a compilação gere os ficheiros prontos para o diretório especificado em build.output.

Vou ter SSL e o meu próprio domínio? 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 altero a versão do Node.js usada para a compilação? Ao criar uma aplicação a partir do catálogo, escolhes 18, 20 ou 22. Para implementações via git, defines isso com o campo runtime.node em saplo.yaml.

Com o Saplo, podes instalar o React de raiz para um domínio funcional em minutos, e cada git push subsequente implementa uma nova versão sem teres de carregar ficheiros manualmente. Se o teu projeto precisar de SSR e um melhor SEO, verifica a stack Next.js no mesmo catálogo.