[英]MERN can't deploy to heroku
I am trying to render my React app through NodeJS and deploy it on Heroku.我正在尝试通过 NodeJS 呈现我的 React 应用程序并将其部署在 Heroku 上。 but I seem to have this problem in the browser
但我似乎在浏览器中有这个问题
Uncaught SyntaxError: Unexpected token '<'
未捕获的语法错误:意外的标记“<”
and the page is a blank white page.该页面是空白的白色页面。
I tried so many solutions but I don't seem to know what is wrong and why won't the homepage show up.我尝试了很多解决方案,但我似乎不知道出了什么问题以及为什么主页不会显示。
My Package.json in NodeJS我在NodeJS中的 Package.json
{
"name": "portfolio-app",
"version": "1.0.0",
"description": "a simple app",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
"start": "node app.js",
"client": "cd client && npm run start",
"dev": "concurrently -n 'server,client' -c 'red,green' \"nodemon app.js\" \"npm run client\""
},
"dependencies": {
"body-parser": "^1.19.0",
"concurrently": "^5.2.0",
"create-react-app": "^3.4.1",
"express": "^4.17.1",
"mongoose": "^5.9.6",
"nodemon": "^2.0.2"
},
"engines": {
"node": "10.x"
}
}
my package.json in React App我在 React 应用程序中的package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"history": "^4.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080"
}
my app.js server file:我的app.js服务器文件:
const express = require('express'),
app = express(),
bodyParser = require('body-parser'),
nav = require('./routes/navigation'),
path = require('path'),
PORT = process.env.PORT || 8080;
/* Settings */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
/*Production settings*/
if(process.env.NODE_ENV === "production"){
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
/* Starting server */
app.listen(PORT, () => {
console.log(`APP IS RUNNING ON PORT ${PORT}`);
});
After research, I found that the problem was in the Heroku builder so I added this builder to the Heroku app:经过研究,我发现问题出在 Heroku 构建器中,因此我将此构建器添加到 Heroku 应用程序中:
https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
and the problem was solved.问题就解决了。
I think the problem with Heroku and I prefer to separate the backend and frontend by pushing your react app to netlify and your node backend to heroku我认为 Heroku 的问题,我更喜欢通过将您的反应应用程序推送到 netlify 并将您的节点后端推送到 heroku 来分离后端和前端
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.