MERN堆栈部署到heroku,但在初始加载时不提供根服务,仅显示子路由

时间:2020-10-31 00:51:43

标签: node.js reactjs express mern

我已经创建了一个MERN应用程序,并且正在尝试将其部署到heroku。当我尝试构建应用程序并使用“ heroku local”对其进行测试时,似乎一切正常,本地服务器启动并且数据库连接,但是初始页面“ /”是空白屏幕。但是,如果我输入“ / rankings /”之类的其他路由,它将起作用。

enter image description here

enter image description here

下面是我的快递服务器的副本

// all imports below
const express = require("express");
const mongoose = require('mongoose');
const fileUpload = require("express-fileupload")
const p4pBoxingRankings = require("./p4pBoxingRankings")
const divisionalRankings = require("./divisionalRankings.js")
const ufcP4pRankings = require("./ufcRankings.js")
const ufcDivisionalRankings = require("./ufcDivisionalRankings.js")



let bodyParser = require('body-parser');
let cors = require('cors');

const app = express();
const path = require('path');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(fileUpload());
app.use(cors());
app.use(express.static('public'));
app.set('port', (process.env.PORT || 8080));
// code to connect datbase below
const URI = process.env.MONGODB_URI || "mongodb+srv://skunk_hunnt:P@cquiaop4p224@cluster0.4cqzd.mongodb.net/Fight_Auction?retryWrites=true&w=majority"
mongoose.connect(URI, { useNewUrlParser: true })
    .then(() => {
    console.log('Database connected...')
  }).catch((err) => {
    console.log(err);
})


// code to stringify items below
const ItemSchema = new mongoose.Schema({
    itemDescription: { type: String },
    askingPrice: { type: String },
    itemDetails: { type: String },
    pictures: {type: String}
});
const fightItem = mongoose.model('Item', ItemSchema);

// all axios requests below
app.get("/items", function(req, res){
    //make a DB query and send back all the items
    fightItem.find({},(err, data)=>{
        res.send(data)
    })
  })

app.get("/rankings", async(req, res) => {
    res.send(p4pBoxingRankings);    
})

app.get("/rankings/divisions", async(req, res) => {
    res.send(divisionalRankings);
})

app.get("/rankings/divisions/ufcp4p", async(req, res) => {
    res.send(ufcP4pRankings);
})

app.get("/rankings/divisions/ufcp4p/ufcdivisions", async(req, res) => {
    res.send(ufcDivisionalRankings);

})



app.post("/items", function(req, res){
      
    let item = new fightItem();
    item.itemDescription = req.body.item.itemDescription
    item.askingPrice = req.body.item.askingPrice
    item.itemDetails = req.body.item.itemDetails
    item.pictures = req.body.item.pictures
    item.save((err,res)=>{
    })

});

app.post('/upload', (req, res) => {
    if (req.files === null) {
      return res.status(400).json({ msg: 'No file uploaded' });
    }
  
    const file = req.files.file;
  
    file.mv(`${__dirname}/public/${file.name}`, err => {
      if (err) {
        console.error(err);
        return res.status(500).send(err);
      }
  
      res.json({ fileName: file.name, filePath: `/public/${file.name}` });
    });
});

// if (process.env.NODE_ENV === 'production') {
//     // Serve any static files
//     app.use(express.static(path.join(__dirname, 'build')));
//   // Handle React routing, return all requests to React app
//     app.get('*', function(req, res) {
//       res.sendFile(path.join(__dirname, '/build/index.html'));
//     });
//   } 

  app.use("", express.static(path.join(__dirname, 'build')));
  // Handle React routing, return all requests to React app
    app.get('*', function(req, res) {
        res.sendFile(path.join(__dirname, '/build/index.html'));
    });
   

app.listen(app.get('port'), function() {
    console.log('Server started on port '+app.get('port'));
});

这是我的反应路由器。

import React from "react";
import { BrowserRouter, Route, Switch, } from "react-router-dom";
import BrowseItemsPage from "../components/BrowseItemsPage.jsx";
import HomePage from "../components/HomePage.jsx";
import NewsAndRankings from "../components/NewsAndRankingsPage.jsx";
import NotFoundPage from "../components/NotFoundPage.jsx";
import SellItemPage from "../components/SellItemPage.jsx";




const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" component={HomePage} exact={true}/>
                <Route path="/browse-items" component={BrowseItemsPage}/>
                <Route path="/sell-items" component={SellItemPage}/>
                <Route path="/rankings" component={NewsAndRankings}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>
    </BrowserRouter>
    
);

export default AppRouter;茀

0 个答案:

没有答案