如何配置我的 React 项目以从公共文件夹 html 文件中删除.html 扩展？

Question

I currently am working on a project that involves appending a react app to a static website. I can't just convert the html to jsx because the website uses custom css that can't be easily rendered by React without a ton of refactoring.

I've been using react-app-rewired-multiple-entry to add the html files to the project, which worked in development, but didn't work in the build. Another approach I have considered is putting the html files into the public folder and defining the route to the public folder to not require.html extensions to access html files. I can't use React-Router-DOM or anything because these files are outside of the scope of the react-app.

The HTML files will render properly when placed in the public folder, but they have that pesky.html extension in the URL, and I was wondering if there's a way to rewire the create-react-app configuration, or even next.js configurations, to tell it's internal router to serve.html files when the extensions aren't put into the URL.

Answer 1

SOLVED:

So my mistake was assuming that the dev server was the same server that the build bundle was served on. Huge mistake. To elaborate, what this means is that when I would I would do serve -s build, the server set up by serve didn't have the routes set up to display the static files, even though I did properly by modifying the dev server.

What I wound up doing was creating a custom (but simple) server.js file that served the unique build bundle, serving each static file separately. It wound up looking something like this (code provided in case anyone else encounters this problem):

const path = require("path");
const express = require("express");
const app = express(); // create express app

// serve the react-app by serving index.html
app.get("/react-app", (req, res) => {
  res.sendFile(path.resolve("./build/index.html"));
});

// serving the static files at different routes
const routes = ['home', 'about', 'help', 'etc'];

routes.forEach(route => {
  app.get(`/${route}`, (req, res) => {
    res.sendFile(path.resolve(`./build/${route}.html`));
  });
});

// start express server on port 5000
app.listen(5000, () => {
  console.log("server started on port 5000");
});