gpt4 book ai didi

javascript - 我正在尝试通过 Express 为我的 React 应用程序提供服务,为什么会收到 404 错误?

转载 作者:行者123 更新时间:2023-12-02 23:59:05 25 4
gpt4 key购买 nike

我有一个 React 应用程序正在构建到我的项目的/dist 目录中,我正在尝试通过我的 Express 服务器提供 bundle 和所需的文件,以及连接到 mongo 并为那里的一些数据提供 api。

现在我无法加载我的应用程序。我在 localhost:5000 处收到错误GET http://localhost:5000/dist/bundle.js net::ERR_ABORTED 404 (Not Found)

下面是我的服务器文件,项目的其余部分是 here

服务器.js:

require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const routes = require('./routes/api');
const path = require('path');

const app = express();

const port = process.env.PORT || 5000;

//connect to the database
mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true })
.then(() => console.log(`Database connected successfully`))
.catch(err => console.log(err));

// overide mongoose promise (depricated) with node's promise
mongoose.Promise = global.Promise;

app.use((req, res, next) => {
// TODO: should header be set on res or req?
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

app.use(bodyParser.json());

app.use('/api', routes);

app.use((err, req, res, next) => {
console.log(err);
next();
});

app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/../index.html'));
});

app.use('/../dist', express.static('dist'));

app.listen(port, () => {
console.log(`Server running on port ${port}`)
});

最佳答案

开始工作了。尽管我建议切换到我的 fullstack-mern-kit ,但这由您决定。

无论如何,请按照以下步骤操作...

package.json更改scripts至:

  "scripts": {
"dev": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode=production",
"start": "node ./server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},

在您的 dist 中文件夹中,添加 index.html (您还需要在编译的 <link> 样式表中包含 css):

<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>

在您的 server.js 中文件,像这样修改它:

const express = require("express");
const app = express();
const { resolve } = require("path");

app.get("/sampleData", (req, res) => {
res.send("sample data");
});

app.use(express.static("dist"));

app.get("*", (req, res) => res.sendFile(resolve("dist", "index.html")));

app.listen(8080);

运行npm run build ,然后npm start ,然后导航至 http://localhost:8080

关于javascript - 我正在尝试通过 Express 为我的 React 应用程序提供服务,为什么会收到 404 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55252336/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com