Блог

Из всего, что я прочитал, мой опыт звучит странно. Но похоже express.static , что он обслуживает файлы в корне, когда я хотел бы передать значения.

Чтобы изложить это, у меня есть:

• Реагируйте на приложение, и я использую create-scripts для сборки для производства
• Экспресс-приложение, в том же репозитории, что и выше, которое должно обслуживать файлы

Мой репозиторий выложен так, что структура папок выглядит примерно так:

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

У /server/index.ts меня есть что-то вроде:

 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

  

Когда я запускаю страницу localhost:8080 , она показывает страницу, однако, когда я хочу передать значения в приведенную выше строку, это не работает. Он будет передавать значения только тогда, когда он не находится на корневом уровне (например, localhost: 8080 /, если я перемещу его на localhost: 8080 / бла, я получу переданные значения)

Устранено. Мне пришлось изменить две вещи:

1. Выберите маршрут, по которому должны обслуживаться статические файлы

• От: app.use(express.static(path.join(__dirname, '../../build')));
• to: app.use('static', express.static(path.join(__dirname, '../../build'))); (может использовать что-то еще, кроме static

2. В package.json , добавьте homepage настройку. Я поставил "homepage": "/static" (это была та часть, которую я не понимал, что мне не хватало). Информация в этом разделе: https://create-react-app.dev/docs/deployment / но я не понимал этого, пока не увидел это в другом репозитории