#javascript #reactjs #server-side-rendering #static-files
#javascript #reactjs #рендеринг на стороне сервера #статические файлы
Вопрос:
Из всего, что я прочитал, мой опыт звучит странно. Но похоже 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
- В
package.json
, добавьтеhomepage
настройку. Я поставил"homepage": "/static"
(это была та часть, которую я не понимал, что мне не хватало). Информация в этом разделе: https://create-react-app.dev/docs/deployment / но я не понимал этого, пока не увидел это в другом репозитории