У меня есть проект ReactJS с Node / Express, обслуживающим мой сервер.На моем внешнем интерфейсе (React) обслуживается порт 3312, а на моем сервере - обслуживающий порт (5000).Когда я загружаю свой интерфейс через порт 3312, все выглядит отлично, и мои маршруты маршрутизатора реакции работают нормально.(Работа моего API все отлично).Однако, когда я пытаюсь обработать статические файлы и посмотреть, получаю ли я тот же результат через мой сервер (порт 5000), я вижу только стили на своей странице.(У меня есть цвет фона) Я не вижу никаких HTML, что статические файлы должны обслуживать?
Я не получаю ошибок в консоли, когда смотрю на localhost: 5000.Тем не менее, мои стили CSS отображаются на странице правильно (потому что на моем теле установлен цвет фона).Тем не менее, я не вижу ни одного моего внешнего интерфейса React, отображающего HTML-код.Я зашел в свой файл index.html и поместил простой тест в корневой div, и он отображается, но я не понимаю, почему мой код React не отображается на моем сервере.
Я, скорее всего, думаю, что проблемас экспресс-статическими файлами, не обслуживающими мои изображения или код React Router.Следует также отметить, что я не использую create-реакции-приложение Я использую webpack dev server response no cli.
Кроме того, я не использую create-реакции-приложение Я не использую Cliдля пользовательского веб-пакета.
Вот мой код:
(Node Server)
const express = require("express");
const path = require("path");
const router = express.Router();
const app = express();
const port = 5000;
// Serve static files on server
app.use("/public", express.static(__dirname + "/../public"));
app.get("*", function(request, response) {
response.sendFile(path.join(__dirname + "/../public/index.html"));
});
if (app.get("env") === "development") {
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
} else {
app.listen(port, "171.33.4.126", () => {
console.log(`Server started on port ${port}`);
});
}
rout.js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";
export default (
<Router>
<div>
<Switch>
<Route exact path="/" component={Landingpage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/contact" component={Contactpage} />
</Switch>
</div>
</Router>
);
index.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";
ReactDOM.render(<div>{Routes}</div>, document.getElementById("root"));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
href="/public/assets/css/styles.css"
rel="stylesheet"
type="text/css"
/>
<title>Site</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Разработка конфигурации Webpack
const webpack = require("webpack");
const path = require("path");
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
devServer: {
historyApiFallback: true,
port: 3312,
proxy: {
"/api": "http://localhost:5000"
}
},
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: path.join(__dirname, "/public"),
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
// new HtmlWebPackPlugin({
// template: "./public/index.html"
// }),
new BrowserSyncPlugin({
host: "localhost",
port: 3312,
files: [
"./public/*.html",
"./public/assets/scss/*.scss",
"./public/assets/variables/*.scss",
"./public/assets/mixins/*.scss",
"./public/assets/reset/*.scss"
],
proxy: "http://localhost:3312/"
})
]
};
Вот скриншот структуры моей папки:
Снимок экрана состояния сети в консоли:
