Após rodar npm run build, todos os arquivos são gerados na pasta build, mas quando tento rodar o HTML em um servidor local (Mamp ou o servidor que o Webstorm cria para rodar os arquivos), nada funciona. Inspecionando o código, vi que ele dá erro ao carregar o css e o js, pois usa o path "/static/...". Alterei esses paths para './static/...' e passou a carregar o js e o css corretamente, mas ainda sim, apenas a barra lateral é renderizada e não o conteúdo. Aconteceu isso com alguém?
Olá, Filipe.
Me parece que você está tendo um problema de caminho. Verificar se todos os caminhos de JS e CSS estão corretos no HTML. Dá uma olhada na aba network no developer tools do seu navegador. Se estiver com problema de caminho é só fazer uma alteração nos caminhos. Faz sentido?
O que achei estranho, é que criei um outro app com o create-react-app e simplesmente dei um build e deu o mesmo problema de path no build. Testando em dev com o npm start, funciona na boa. Mesmo tendo colocado o "./" no html gerado para carregar o CSS e o JS, apenas aparece o barra lateral esquerda, mas não o conteúdo. O tenso disso é que, depois que resolvo o problema dos paths, não dá erro nenhum, mas tb não carrega os componentes do React, mas tb não dá erro quando clico em qual botão.
Oi Filipe,
Para que o roteamento funcione direitinho é importante que a variável de ambiente PUBLIC_URL diga qual é o endereço que a aplicação será servida.
Quando você roda usando o server de desenvolvimento do webpack ele já coloca essa variável automaticamente com o endereço certo.
No caso em que você vá servir os arquivos num servidor seu, é necessário criar essa variável antes de rodar o npm run build
Para a criação de variáveis de ambiente num projeto criado com o create-react-app, basta criar um arquivo com nome .env e colocar suas variáveis lá. A sintaxe é essa:
NOME_DA_VARIAVEL=VALOR_DA_VARIAVEL
NOME_DA_VARIAVEL2=VALOR_DA_VARIAVEL2No seu caso, o arquivo .env ficaria assim, caso o endereço do servidor fosse http://localhost:4200/app
PUBLIC_URL=http://localhost:4200/appSe quiser que essa variável de ambiente só seja usada em produção, ou seja, só quando rodar o npm run build, você pode chamar o arquivo de .env.production.
Pra saber de mais variáveis e quando é necessário alterar o valor delas, consulte essa tabela aqui.
Pra saber mais desses arquivos .env, dê uma olhada aqui
Se tiver alguma dúvida e só falar :)
Abraço
Valeu Artur,
Testarei depois. Obrigado pela atenção.
Deu certo Filipe?