Um site feito em React ou Vue (com o Vite ou com as ferramentas mais antigas) não roda no servidor: compila-se no seu computador para uma pasta de arquivos estáticos, e é essa pasta que se publica. Funciona em qualquer hospedagem, sem Node. Os dois problemas clássicos são a pasta errada no site errado e a página que dá 404 ao atualizar (F5) numa rota que não é a inicial. Ambos têm solução em poucos minutos.
Compilar e publicar
| 1 |
Compile: npm run buildO resultado fica numa pasta que depende da ferramenta: dist no Vite e no Vue CLI, build no antigo Create React App.
|
|
| 2 |
Envie o conteúdo dessa pasta, não a pasta em si, para a pasta pública do domínio. O index.html tem de ficar logo à raiz. Se precisar do passo a passo do FTP: enviar o site com o FileZilla.
|
|
| 3 |
Abra o site numa janela anônima, para não ver uma versão guardada pelo navegador, e navegue pelas ligações.
|
|
| 4 |
Atualize a página numa rota interna (por exemplo /contatos). Se aparecer um 404, siga a seção seguinte.
|
|
Porque dá 404 ao atualizar
Numa aplicação de página única, quem trata de /contatos é o JavaScript, no navegador. No servidor não existe nenhum arquivo com esse nome, por isso um pedido direto (ou um F5) recebe 404. A solução é mandar o servidor devolver o index.html sempre que o arquivo pedido não exista. O servidor da hospedagem lê o .htaccess, por isso cria-se um na pasta pública:RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
Se não quiser mexer no servidor, o Vue Router tem o modo hash (createWebHashHistory), em que os endereços levam um # e nunca dão 404. É menos bonito, e mais simples.
O que se vê, e o que é
| Sintoma |
Causa habitual |
O que fazer |
Página em branco; a console mostra 404 em arquivos .js e .css |
O site está numa subpasta e o build assume a raiz, ou os arquivos ficaram na pasta errada. |
Diga ao build onde vive: base no vite.config, homepage no package.json do Create React App, e o basename do roteador. Compile de novo. |
| 404 ao atualizar uma rota |
Falta a regra do .htaccess. |
Use o bloco acima. |
| Continua aparecendo a versão antiga |
Cache do navegador, que guardou o index.html. |
Recarregue sem cache (Ctrl+F5) ou abra uma janela anônima. Veja o cache do navegador com .htaccess. |
As requisições à API vão para localhost |
O endereço da API foi fixado na compilação. |
Defina-o antes de compilar, na variável do projeto (VITE_... no Vite), e compile de novo. |
Num site estático não há segredos. Tudo o que vai para o build (incluindo as variáveis com prefixo como VITE_ ou REACT_APP_) fica visível para qualquer visitante. Chaves privadas e senhas ficam num servidor, nunca no código do navegador. Quando o site precisa de falar com a sua API, veja o erro de CORS.
|
|
Ao atualizar, envie primeiro, apague depois. Os arquivos do build têm nomes com um código que muda a cada compilação. Se apagar a pasta antiga antes de enviar a nova, quem tem o site aberto fica com a página partida até recarregar. Envie os arquivos novos e só depois retire os antigos.
|
PRODUTO RECOMENDADO Hospedagem de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde R$ 36,30/mês (plano de 3 anos, com cupom) Ver planos |
Angola
Brasil
Kenya
Moçambique
Nigeria
Portugal
South Africa
United Kingdom
United States
International
