Я пытаюсь развернуть свое портфолио разработчиков с помощью React + Node.js и Express на Heroku, и сборка прошла успешно, и говорится, что она развернута, но я продолжаю получать пустой экран или темный экран. Я очень запутался, и мне было интересно, является ли это структура синтаксиса на моем сервере. js файл, вызывающий проблему, или что-то в пакете. json или даже мой index. html. В настоящее время я получаю эту ошибку: Не удалось загрузить ресурс: сервер ответил статусом 404 (не найден). Я подозреваю, что, возможно, я неправильно указываю на это на моем сервере. js файл.
Если бы кто-нибудь мог дать предложения о том, как решить эту проблему, это было бы потрясающе. Я так близок к его развертыванию. Это расстраивает, и я пробовал много разных предложений по переполнению стека.
Вот мой индекс. html file:
<html lang="en"></html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="icon" type='image/x-icon' href="favicon.ico">
<meta name="theme-color" content="#000000" >
<meta
name="description"
content="Web site created using create-react-app">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="stylesheet" href="./css/style.css" href="text/css">
<link rel="manifest" href="/manifest.json" >
<script type="text/babel" src="./lander.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="public/css/layout.css">
<link href="public/css/media-queries.css">
<link href="public/css/magnific-popup.css">
<title>Kevin Gillooly Dev Portfolio</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
Вот мой сервер. js файл:
require ('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const buildPath = ('build/index.html');
const port = process.env.PORT || 5000;
const sendGrid = require('@sendgrid/mail');
const server = express();
server.use(bodyParser.json());
server.use(cors());
server.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
server.get('/api', (req, res, next) => {
res.send('API Status: Running')
});
server.use(express.static(__dirname));
server.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'index.html'));
});
const REACT_APP_SENDGRID_API_KEY =`${process.env.REACT_APP_SENDGRID_API_KEY}`
server.post('/api/email', (req, res, next) => {
sendGrid.setApiKey(REACT_APP_SENDGRID_API_KEY);
console.log(req.body);
const msg = {
to: 'kevgill95@gmail.com',
from: req.body.email,
subject: req.body.subject,
text: req.body.message
}
sendGrid.send(msg)
.then(result => {
res.status(200).json({
success: true
});
})
.catch(err => {
console.log('error: ', err);
res.status(401).json({
success: false
})
})
});
server.listen(port, () => {
console.log(`Server is up on port ${port}!`);
});
Вот мой пакет. json файл:
{
"name": "dev-personal-portfolio",
"description": "a really cool app",
"version": "1.0.0",
"homepage": "https://kev-personal-portfolio.herokuapp.com/",
"engines": {
"node": "12.x"
},
"private": true,
"proxy": "http://localhost:5000",
"secure":false,
"dependencies": {
"@lawcket/websocket": "^0.1.5",
"@material/textfield": "^6.0.0",
"@popperjs/core": "^2.4.4",
"@react-pdf/renderer": "^2.0.0-beta.6",
"@sendgrid/mail": "^7.2.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"async": "^3.2.0",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"material-components-web": "^6.0.0",
"nodemailer": "^6.4.10",
"react": "^16.13.1",
"react-animations": "^1.0.0",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-loadable": "^5.5.0",
"react-mdl": "^2.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-spring": "^8.0.27",
"react-sticky": "^6.0.3",
"serve-favicon": "^2.5.0",
"typescript": "^3.9.6"
},
"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"
]
},
"devDependencies": {
"3": "^2.1.0",
"-": "0.0.1",
"jquery": "^3.5.0",
"popper.js": "^1.16.0"
}
}
Любая помощь будет принята с благодарностью!
(РЕДАКТИРОВАТЬ) Вот скриншоты того, как устроен мой каталог
Снимок экрана 1
Снимок экрана 2
(Подробнее РЕДАКТИРОВАТЬ) Вот скриншот моей структуры папок сейчас. 
** EDIT AGAIN **
Here is my folder structure
обновленные папки