如何解决MERN堆栈部署到heroku,但在初始加载时不提供根服务,仅显示子路由
我已经创建了一个MERN应用程序,并且正在尝试将其部署到heroku。当我尝试构建应用程序并使用“ heroku local”对其进行测试时,似乎一切正常,本地服务器启动并且数据库连接,但是初始页面“ /”是空白屏幕。但是,如果我输入“ / rankings /”之类的其他路由,它将起作用。
下面是我的快递服务器的副本
// 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",res) => {
res.send(divisionalRankings);
})
app.get("/rankings/divisions/ufcp4p",res) => {
res.send(ufcP4pRankings);
})
app.get("/rankings/divisions/ufcp4p/ufcdivisions",res) => {
res.send(ufcDivisionalRankings);
})
app.post("/items",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('*',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('*',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;茀
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。