React CRA avec la configuration SSR lance 404 lors de l'utilisation du html résultant

Question

J'ai une application react construite en utilisant CRA avec les configurations par défaut. Je voulais faire du SSR, j'ai donc suivi un article similaire à celui-ci https://www.vairix.com/tech-blog/server-side-rendering-ssr-of-create-react-app-cra-app-in-2020

Ensuite, j'ai voulu intégrer le JS et le CSS afin de pouvoir cliquer sur l'URL et copier la page HTML résultante, puis l'utiliser où bon me semble.

Pour cela, j'ai utilisé le plugin react-app-rewired qui fonctionne maintenant je peux voir le HTML avec les CSS et JS en ligne.

Le problème est que lorsque je copie le code HTML généré et que je l'enregistre en tant que .html, et que lorsque j'ouvre la page, elle renvoie l'erreur 404.

J'essaie de copier le code HTML produit et de l'utiliser comme composant individuel dans une application complètement différente.

Ai-je oublié quelque chose ?

config-overrides.js pour react app rewired

const HtmlWebpackPlugin = require("html-webpack-plugin");
const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;

module.exports = {
  webpack: function(config, env) {
    if (env === "production") {
      config.plugins.push(new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]));
      config.plugins.push(new HTMLInlineCSSWebpackPlugin());
    }
    return config;
  }
};

server.js pour SSR

import express from "express";
import path from "path";
import renderer from "./react-renderer";

const app = express();
const PORT = 8000;

const routes = ["/custom1/:id","/custom2/:id","/custom3/:id"];

app.get("/*", renderer(routes));

app.use(express.static(path.resolve(__dirname, "../build")));
app.use(express.static(path.resolve(__dirname, "../public")));

app.listen(PORT, () => {
  console.log(`App running in the port ${PORT}`);
});

Answer 1

404 est le code HTTP pour introuvable : Je ne pense pas que le problème soit d'ouvrir la page mais de la trouver.

Il semble que la première route que vous avez ajoutée à votre serveur capte toutes les demandes :

app.get("/*", renderer(routes));

vous pouvez essayer de le déplacer en dernier lieu

app.use(express.static(path.resolve(__dirname, "../build")));
app.use(express.static(path.resolve(__dirname, "../public")));

app.get("/*", renderer(routes));

De plus, vous n'avez pas indiqué où vous avez copié la page résultante. ../build ou en ../public sinon je ne suis pas surpris que vous ne puissiez pas l'obtenir.