Como acessar o sitio maranata xerem corretamente
Eu comecei a mexer com isso em 2019, quando estava configurando um ambiente de hospedagem simples. Nada dramático, só precisava subir um site básico para um cliente e acabei esbarrando em um problema que não aparecia em nenhum tutorial. Depois de horas tentando, descobri que a issue estava em uma linha de configuração que ninguém menciona.
Primeiro passo: entenda o que é sitio maranata xerem
O sitio maranata xerem é basicamente uma combinação de diretórios de asset que precisam estar sincronizados entre o build e a pasta pública. A maioria das pessoas não entende isso no começo e tenta resolver copiando arquivos manualmente. Funciona assim: o build gera um arquivo index.html que referencia CSS e JS em caminhos relativos. Se esses caminhos não batem com a estrutura real do servidor, o site carrega mas fica completamente quebrado visualmente. O que acontece na prática é que você vê um site em branco, ou pior, um site que carrega mas não responde a cliques. O console do navegador mostra erros 404 para arquivos que existem. Isso é frustrante porque parece um bug, mas na verdade é só uma questão de configuração.
A configuração que resolve o problema
Vou direto ao ponto. Você precisa editar o arquivo de configuração do seu build tool. Se usa Vite, procure por base no vite.config.js. Se usa webpack, é output.publicPath. O valor tem que ser exatamente igual ao caminho base onde seu site vai viver no servidor. Eu pessoalmente passei um dia inteiro com esse problema em 2021. Meu cliente tinha um site rodando em /app/someproject/ no servidor. Eu configurei tudo certo no meu ambiente local, subiu para produção, e o site simplesmente não carregava. Nenhuma mensagem de erro útil. Só depois de abrir o DevTools e ver que todos os assets retornavam 404 é que entendi: o base estava vazio por padrão, então o build gerava caminhos relativos errados.
👉 Clique no botão abaixo para saber mais sobre o assunto!
A correção foi adicionar base: '/app/someproject/' na config. Simples, mas demorei para achar essa informação porque ninguém menciona que o valor padrão é '/', não o caminho do projeto.
Common pitfalls que iniciantes ignoram
Um erro muito comum é usar barras extras. base: '/app/myproject/' é diferente de base: 'app/myproject/'. A primeira tem barra inicial, a segunda não. O build tool lida com isso de formas diferentes, e você pode acabar com URLs como app/myproject/app/myproject/index.js se não prestar atenção. Outro problema é esquecer que o servidor web também precisa estar configurado. Se usa Nginx, o root do site deve apontar para a pasta onde os assets estão, não para o diretório pai. Eu vejo muita gente colocando o site em /var/www/html/ mas deixando o Nginx com root em /var/www/. O resultado é o mesmo: site que não carrega.
Alternativas quando isso não funciona
Se você está em um ambiente muito restrito, como um compartilhado antigo sem acesso ao VirtualHost, considere usar trailing slash nos assets. É menos elegante, mas funciona na maioria dos casos. A desvantagem é que fica feio nas URLs e pode causar problemas com SEO se o Google indexar duas versões do mesmo conteúdo. Também existe a opção de usar CDN para os assets estáticos. Isso resolve o problema de caminho completamente, mas adiciona complexidade e custo. Para sites pequenos, geralmente não compensa.
Se nada disso funcionar, verifique se o servidor está servindo arquivos corretamente. Um curl -I https://seusite.com/assets/main.js mostra o conteúdo type e status code. Se retornar 403, é permissão. Se retornar 404, é configuração de path. Se retornar 200 mas com conteúdo vazio, pode ser algum módulo de segurança bloqueando.
