javascript - 同时运行 Node 和 React
问题描述
我正在制作一个 MERN 应用程序,并且在连接/运行节点和反应服务器时遇到了一些问题。
根包.json
{
"name": "server",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "nodemon server/server",
"client": "npm start --prefix client",
"dev": "concurrently \"npm start\" \"npm run client\""
},
"dependencies": {
"async": "^3.2.0",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"dotenv": "^10.0.0",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"mongoose": "^5.13.0",
"morgan": "~1.9.1",
"populatedb": "^1.0.0"
},
"devDependencies": {
"concurrently": "^6.2.0",
"nodemon": "^2.0.8"
}
}
客户端代理:
"proxy": "http://127.0.0.1:5000",
"secure": false
主服务器文件:
require('dotenv').config();
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const mongoose = require('mongoose');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// set up mongoose connection
const mongoDB = process.env.DB_STRING;
mongoose.connect(mongoDB, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:' ));
console.log('Connected');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
if(process.env.NODE_ENV !== 'development') {
app.get('*', function (req, res) {
res.sendFile(path.resolve(__dirname, 'client/build', 'index.html'));
});
}
const PORT = process.env.PORT || 5000
//Express js listen method to run project on http://localhost:5000
app.listen(PORT, console.log(`App is running in ${process.env.NODE_ENV} mode on port ${PORT}`))
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
我正在使用“npm run dev”命令来启动服务器。我收到一条错误消息“代理错误:无法将请求/用户从 localhost:3000 代理到http://127.0.0.1:5000”。我尝试将代理更改为 0.0.0 并将脚本文件更改为:
"start": "node ./bin/www",
"devstart": "nodemon ./bin/www",
"client": "npm start --prefix client",
"dev": "concurrently \"npm start\" \"npm run client\""
但它仍然不起作用。我已经尝试了一些我发现的其他解决方案,但就是无法做到。
这也是我的测试反应文件:
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [users, setUsers] = useState([]);
const getData = async () => {
const res = await axios.get("/users");
setUsers(res.data);
};
useEffect(() => {
getData();
}, []);
return (
<div>
{users.map((u) => (
<h4 key={u._id}>userName : {u.full_name}</h4>
))}
</div>
);
};
export default App;
这也是我的文件夹结构,如果它是相关的
解决方案
在尝试了更多解决方案来解决问题之后,有效的是:在一个终端选项卡nodemon app.js
中运行第二个终端选项卡运行npm start --prefix client
。
并发模块可能有问题,因为这是有效的。
推荐阅读
- modelica - Modelica:识别不稳定/循环模式并发出警告
- azure-data-factory - 数据工厂 - 将字段附加到 JSON 接收器
- git - 如何将先前提交的更改推送到基于先前提交的新分支?
- r - 当您没有完整的值列表或列表太长时,如何将行转换为 Athena 中的列
- visual-studio-code - 双击括号内
- d3.js - D3单杠排序
- outsystems - outsystems 如何在没有 Mac 和 Xcode 的情况下在 P10 版本中开发 iOS 移动应用程序
- angular - 错误:{ 错误:未捕获(在承诺中):错误:无法匹配任何路由。URL 段:'fontawesome-webfont.woff2'
- c++ - 捕获/抑制发送到 std::cout 的 OpenCV 警告
- python - 我有一个匈牙利文本 ISO-8859-2,我会将文本读入文件但在 Python3 中不起作用