0

Fiz um pequeno sistema web e fiz deploy dele no heroku, acontece que as rotas funcionam normalmente em desenvolvimento, mas em produção as rotas não são renderizadas e tenho o seguinte erro "Cannot GET [nome da rota]" ja pesquisei em diversos sites pessoas com problemas parecidos mas ainda não consegui resolver

meu Index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter,Router, Route, Switch, Redirect, } from "react-router-dom";

// core components
import Admin from "layouts/Admin.js";
import Login from './Login/Login'

import "assets/css/material-dashboard-react.css?v=1.9.0";

//const hist = createBrowserHistory();
import {history} from './history'
import PrivateRoute from './PrivateRoute/PrivateRoute'
import { AuthProvider } from "./Provider/auth";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/login" component={Login}/>
      <Route path="/admin" component={Admin} />{/*rota home*/}
      <Redirect from="/" to="/Login" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

meu package.json

{
  "name": "meu-site",
  "version": "1.9.0",
  "private": false,
  "main": "dist/index.js",
  "dependencies": {
    "@material-ui/core": "4.10.0",
    "@material-ui/icons": "4.9.1",
    "axios": "^0.21.1",
    "chartist": "0.10.1",
    "classnames": "2.2.6",
    "crypto-js": "^4.0.0",
    "express": "^4.17.1",
    "formik": "^2.2.6",
    "history": "4.10.1",
    "perfect-scrollbar": "1.5.0",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-chartist": "0.14.3",
    "react-dom": "16.13.1",
    "react-google-maps": "9.4.5",
    "react-redux": "^7.2.4",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "react-swipeable-views": "0.13.9",
    "redux": "^4.1.0"
  },
  "scripts": {
    "dev": "react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "build-package": "npm run build-package-css && babel src --out-dir dist"
  },
  "optionalDependencies": {
    "@types/googlemaps": "3.39.6",
    "@types/markerclustererplus": "2.1.33",
    "ajv": "6.12.2",
    "typescript": "3.9.3"
  },
  "devDependencies": {
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-prettier": "3.1.3",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "prettier": "2.0.5"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": []
  }
}

o deploy foi feito no heroku e a falha tambem acontece quando tenta recarregar a pagina, o sistema abre a primeira pagina e de acordo que vou clicando nos botões tudo acontece normalmente, mas quando tento colocar o nome da rota na barra do navegador ou tento recarregar a pagina isso tudo acontece.

Servidor:

const express = require('express')
const {resolve}= require('path')
const app = express()

app.use('/', express.static( resolve( __dirname, './build' ) ) ) 

app.listen(process.env.PORT || 3000,(err) => {
  if(err){
    return console.log(err)
  }
  console.log('Sistema no ar')
})
5
  • E o código do servidor que está servindo os arquivos, está como? Commented 13/05/2021 às 17:38
  • estou usando um arquivo "server.js" e em scripts do package.json em start vai "node server.js" const express = require('express') const {resolve}= require('path') const app = express() app.use('/', express.static( resolve( __dirname, './build' ) ) ) app.listen(process.env.PORT || 3000,(err) => { if(err){return console.log(err)} console.log('Sistema no ar') }) Commented 13/05/2021 às 17:43
  • a mensagem de erro no heroku é : at=info method=GET path="/admin" dyno=web.1 connect=1ms service=3ms status=404 bytes=388 protocol=https Commented 13/05/2021 às 17:48
  • 1
    Acontece que você está servindo só a rota / para a sua aplicação React. Experimente app.use('/*', usando /* ao invés de apenas /. Isso fará com que toda requisição não atendida por algum app.use anterior seja tratada neste app.use('/*' Commented 13/05/2021 às 17:50
  • fazendo isso os erros passaram a mudar de 404 para 301 ou 304 fiz a seguinte alteração:const express = require('express') const {resolve}= require('path') const app = express() app.use('/*', express.static( resolve( __dirname, './build' ) ) ) app.listen(process.env.PORT || 3000,(err) => { if(err){return console.log(err)} console.log('Sistema no ar') }) 2021-05-13T18:15:16.723330+00:00 heroku[router]: at=info method=GET path="/static/js/2.69f5d869.chunk.js" status=301 bytes=520 protocol=https ou status=304 Commented 13/05/2021 às 18:21

2 Respostas 2

2

Este eh um problema bastante comum por mais simples que pareça para outras pessoas.

Basicamente as seguintes coisas estão acontecendo com o seu projeto:

  1. O seu projeto react funciona direito em localhost pois provavelmente o seu webpack esta configurado para redirecionar as suas requests para o seu arquivo index.html independemente de qual rota for chamada.

  2. Quando voce acessa seu codigo pelo heroku, as requests caem no seu webserver, e esse roteamente não está configurado lá pelo que voce nos mostra no seu codigo.

Quando voce usa a seguinte linha:

app.use('/', express.static( resolve( __dirname, './build' ) ) ) 

Voce diz somente para a request que chama a raiz do seu site para mostrar o conteudo da pasta build.

Agora voce precisa apontar TODAS as outras requests tambem para a sua pasta build assim como na linha abaixo:

app.use('/', express.static( resolve( __dirname, './build' ) ) ) 
app.use('*', express.static( resolve( __dirname, './build' ) ) ) // <- a magica esta aqui nesta linha

Apos isso acredito que suas rotas react deve funcionar no heroku.

0

Tive problema semelhante e só consegui resolver substituindo o uso do <BrowserRouter basename="/"> pelo <HashRouter basename="/">.

Precisei ajustar alguns href= também, incluindo o # antes da url de direcionamento.

Eu rodava local para testar, onde:

  • Dev: rodava com npm run dev direto

  • Prod: criava a build com npm run-script build e rodava com npm start

Todos os efeitos (defeitos ... kkk) de roteamento identificados na build de produção eram os mesmos identificados no Heroku.

Criar build e executar em produção me economizou bastante tempo, pois não precisava esperar o tempo de deploy do Heroku para testar por lá.

Até encontrei soluções mais complexas, mas no meu caso, para uma aplicação da facul, isso foi o suficiente.

Para quem quiser ver o código, segue o link do git: https://github.com/grosaict/CDC-web-client

Espero ter ajudado

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .