Publique seu
app React
Envie o build de produção de Vite, Create React App ou outra SPA React e publique com rotas que continuam funcionando no refresh, HTTPS, entrega global e domínios personalizados quando precisar.
Envie a saída de build, não o projeto fonte
Arquivos fonte React são para desenvolvimento. O DeployPages serve os arquivos estáticos produzidos pelo build de produção.
Vite React
A saída estática padrão do Vite é dist. Se vite.config.js muda build.outDir ou base, publique essa pasta e teste URLs de assets depois do envio.
Create React App
O CRA escreve arquivos de produção em build. Se o app roda em subcaminho, a configuração homepage pode afetar as URLs de assets geradas.
Outras SPAs React
Qualquer setup React funciona quando produz index.html, bundles JS, CSS, imagens, fontes e assets servidos como arquivos estáticos.
Por que apps React quebram depois da publicação
Uma SPA React ainda começa com um documento
A maioria das single-page apps em React entrega um ponto de entrada HTML e deixa o roteador no cliente decidir o que renderizar depois que o JavaScript carrega.
Isso funciona localmente porque o servidor de desenvolvimento sabe voltar para index.html. Um host estático básico pode não saber, e por isso /dashboard funciona durante a navegação, mas retorna 404 depois de um refresh.
O que quebra no refresh
Um servidor de arquivos estáticos recebe GET /settings e procura um arquivo ou pasta settings de verdade.
Seu build React geralmente tem index.html e assets com hash, então o servidor retorna 404 antes do React Router ler a URL.
Como o DeployPages resolve
O DeployPages aplica fallback de SPA para rotas de documento ausentes e serve index.html em vez de um 404 duro.
Quando o documento carrega, o React inicia, o roteador lê a URL atual e a tela correta aparece sem você manter arquivos de redirect.
Por que equipes usam isso
Envie a pasta dist ou build. Fallback de rotas, HTTPS, compressão e entrega global fazem parte da publicação em vez de um checklist refeito para cada app React pequeno.
Checagens antes de publicar um app React
O app pode compilar e ainda falhar online. Confira estes pontos antes de mandar o link.
Base path dos assets
Se JavaScript ou CSS carrega da URL errada, a página pode ficar em branco. Vite base e CRA homepage são os primeiros lugares para olhar.
Rotas no cliente
Teste acessos diretos e refresh em rotas importantes como /login, /pricing, /dashboard e links profundos compartilhados.
Endpoints de API
Uma publicação React estática pode chamar APIs externas, mas não executa backend sozinha. Mantenha segredos e chaves privadas fora do bundle frontend.
Variáveis de ambiente
A maioria das ferramentas React embute valores públicos no bundle durante o build. Mudar uma variável depois do envio geralmente exige rebuild.
Fluxo de publicação React
Faça o build do app
Rode o build de produção localmente para empacotar React, CSS e assets em uma pasta estática publicável.
Verifique a saída
Confira se a pasta de saída contém index.html e assets gerados. Em Vite, costuma ser dist; em Create React App, build.
Envie a pasta inteira
Solte a pasta dist inteira no DeployPages. Não envie só index.html, ou estilos e scripts vão faltar.
Teste uma rota interna
Abra uma rota aninhada, atualize o navegador e confirme que o app continua carregando em vez de retornar 404 do host.
Problemas comuns em publicações React
Tela branca depois de publicar
Abra o DevTools e cheque primeiro arquivos JS ou CSS faltando. Caminhos base errados, assets ausentes ou pasta enviada incorreta causam muitas telas em branco.
Refresh retorna 404 em rotas internas
O host estático está tentando encontrar um arquivo de verdade para a rota. Use fallback de SPA para rotas de documento ausentes servirem index.html.
Assets funcionam localmente, mas não online
Confira caminhos absolutos, configurações de public base e se a pasta de saída enviada inclui o diretório de assets gerados.
Mudanças em variáveis de ambiente não aparecem
Reconstrua o app com as novas variáveis públicas e envie a nova saída. O bundle publicado não lê valores privados de servidor em runtime.
FAQ de publicação React
Q:Por que meu app React mostra tela branca depois do deploy?
A maioria das telas brancas vem de caminhos de assets incorretos ou bundles faltando. No Vite, confira base. No CRA, revise homepage e confirme que a pasta enviada contém os assets gerados.
Q:Preciso configurar nginx ou redirects manualmente?
Não. O DeployPages trata o fallback de SPA para rotas ausentes na camada de entrega, então você não precisa manter rewrites de servidor.
Q:Devo enviar a pasta do projeto ou a pasta dist?
Envie a pasta de produção, não o projeto fonte. Em Vite, costuma ser dist. Em Create React App, costuma ser build.
Q:Posso usar variáveis de ambiente?
Sim, mas elas são resolvidas quando você roda o build localmente. O DeployPages hospeda a saída estática final, então injeção de ambiente de servidor em runtime não faz parte deste fluxo.
Q:Um app React pode chamar uma API depois de publicado?
Sim. Um app React estático pode chamar APIs externas pelo navegador. Lembre que tudo empacotado no frontend fica visível, então segredos privados precisam de backend.
Q:Posso publicar Next.js aqui também?
Sim, se você exportar como site estático. Use output: 'export' e envie a pasta out gerada. Rotas Next.js renderizadas no servidor precisam de runtime além da hospedagem estática.
Q:Posso conectar um domínio personalizado depois?
Sim. Depois que o site estiver no ar, adicione o domínio no Console e siga as instruções de DNS. O DeployPages provisiona HTTPS automaticamente quando o registro resolve.