Не видно, чтобы маршрутизатор React работал на производстве с heroku

#reactjs #heroku #react-router

#reactjs #heroku #react-router

Вопрос:

Я загрузил свое приложение на heroku. Я хотел example.herokuapp.com/someRoute бы работать так же, как localhost:3000/someRoute (он работает локально, но не когда я загружаю его на heroku) что я должен сделать, чтобы заставить его работать? Я попытался добавить статический файл.json с этой конфигурацией

 {
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}
  

но это ничего не изменило: ( Есть предложения, как это исправить?

Ответ №1:

Возможно, у вас ошибка, из-за которой вы отправляете индексный файл, например, с помощью res.sendFile из папки / client / public . Вместо этого в производственной среде вы должны были обслуживать его из / client / build

Пожалуйста, передайте файл из сборки в производство и общедоступный при разработке.

Пример таков:

 if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "./client/build/index.html"));
  });
}

else {
  app.use(express.static(path.join(__dirname, '/client/public')));
  app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "./client/public/index.html"));
  });
}
  

Комментарии:

1. я думаю, проблема в том, что я вообще не добавлял res.sendFile … я не уверен, как мне его добавить, поскольку я использую контроллер …. это мой код « app.use(express.static(path.join(__dirname, ‘client / build’))); app.use(bodyParser.urlencoded({extended: true})); app.use(bodyParser.json()); app.use(‘/’, MainController); app.listen({port}, () => {console.log( app is on port: ${port} ); }); process.on(‘uncaughtException’, (ошибка, происхождение) => {console.log(ошибка); }) «

2. и имеет ли значение, использую ли я общедоступную папку или папку сборки?

3. Да, это важно. Папка сборки — это папка, которая используется heroku во время производства, и это также стандартная практика для этого!

4. моя проблема в том, что я вообще не загружал клиентскую папку на github, и теперь я не могу ее добавить, поэтому мне придется создавать новое приложение? кстати, с кодом все в порядке?

5. Если вы сделаете это так, как я упоминал, это обязательно сработает!