服务端渲染（Express/React），在没有定义路由的情况下提供文件

Question

From everything I've read, my experience sounds strange. But it seems like express.static is serving up files at root when I would like to pass in values.

To lay it out, I have a:

• React app, and I use create-scripts to build for production
• Express app, in the same repo as above that should be serving up the files

My repository is laid out so the folder structure looks something like this:

/build (React js files after building src)
/dist (Express js files after building server)
/server (Express in typescript)
/src (React in typescript)

In /server/index.ts I have something like:

const app = express();
export function configureApp() {
    // CONFIGURATIONS
    app.set('env',config.environmentName.toLowerCase());
    app.set('port', config.port);
    app.set('https', config.https);

    // MIDDLEWARE SETUP
    app.use(compression());
    app.use(REQUEST_LOGGER);
    app.use(ERROR_LOGGER);
    app.use(express.json());

    // Below here is where it troubles me
    app.use(express.static(path.join(__dirname, '../../build'))); // This will always run on localhost: 080

    // This is never called. I know this code will work as when I put it under a different path (changes `/` to `/blah`, I can see this stuff. But this is never called for localhost:8080 which means I can't pass anything to the view
    app.use('/', (req: Request, res: Response ) => {
        const store = configureStore({
            'userSession':{
                'userName' : 'fakeUserName'
            }
        });

        const reduxState = JSON.stringify(store.getState());

        const filePath = path.join(__dirname, '../../../build', 'index.html');
        fs.readFile(filePath, 'utf8', (err, htmlData) => {
            return res.send(htmlData.replace('__REDUX_STATE__={}', `__REDUX_STATE__=${reduxState}`));
        })
}

export default app

When I start up the page on localhost:8080 , it shows the page, however, when I want to pass in values to the the above line, it does not work. It will only pass in the values when it is not at the root level (eg localhost:8080/, if I move it to localhost:8080/blah, I get the values passed in)

Answer 1

Resolved. I had to change two things:

1. Select a route for where the static files should be served from

• from: app.use(express.static(path.join(__dirname, '../../build')));
• to: app.use('\\static', express.static(path.join(__dirname, '../../build'))); (can use something else besides \\static

2. In package.json , add a homepage setting. I put "homepage": "/static" (this was the part I didn't understand I was missing). Info in this section: https://create-react-app.dev/docs/deployment/ but I didn't understand it until I saw this in another repo