React — лучшая практика для приложений с разными точками входа/разделами

Сейчас я работаю над более крупным приложением React, и у меня есть несколько вопросов о том, правильно ли я все настроил (лучшая практика). Приложение имеет два разных «раздела». Я пытаюсь привести более простой пример (школьный сценарий), как устроена структура:

  • Первый раздел приложения используется директором для настройки школьных классов, учителей, учеников, комнат и т. д.
  • Раздел section используется всеми пользователями (учителями, учениками), которых определил директор. Учителя могут составлять расписание и т. д.

Теперь я пытаюсь: директор может получить доступ к своему разделу приложения с URL-адресом: admin.school.com - учителя и ученики могут получить доступ к приложению с URL-адресом: school.com

Прямо сейчас я поместил все в одно приложение для реагирования, поэтому я могу использовать один и тот же дизайн, компоненты и т. д. Во время разработки я переключаюсь между двумя приложениями, комментируя приложение, к которому я не хочу обращаться, в файле index.js:

// ReactDOM.render(<AppAdmin />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));

Теперь мой вопрос: (Как) возможно ли, что я могу получить сборку приложения с двумя файлами «index.html», чтобы «admin.school.com» указывал на точки «admin.html» и «school.com». в "index.html". Моя главная цель (как я уже сказал) - иметь одну основу кода на моем сервере и всего два разных html файла. Возможно ли это или мне нужно дважды создавать приложение? Принципал должен иметь доступ к обычному разделу без нового входа в систему.

Я надеюсь, что мое объяснение было легко понять. Спасибо за помощь!


reactjs react-scripts
person Mike_NotGuilty    schedule 02.11.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать process.env для передачи переменных среды (см. https://create-react-app.dev/docs/adding-custom-environment-variables/ при использовании create-react-app), например. в index.js:

const Component = process.env.REACT_APP_ADMIN ? AppAdmin : App
ReactDOM.render(<Component />, ...)

и в package.json:

"scripts": {
  ...
  "build-admin": "REACT_APP_ADMIN=1 npm run build"
}
person Aprillion    schedule 02.11.2019
comment
Значит, мне нужно две сборки? Поэтому я собираю npm run build-admin -> помещаю все из каталога сборки в папку на сервере, которая указывает на admin.school.com. А потом то же самое для school.com? - person Mike_NotGuilty; 02.11.2019
comment
если ваша система сборки поддерживает пользовательский каталог сборки, используйте его. в противном случае вы можете переместить файлы в другой каталог, например. автор REACT_APP_ADMIN=1 npm run build && mv build build-admin, вдохновленный stackoverflow.com/a/44538829/1176601 - person Aprillion; 02.11.2019

arrow_upward
0
arrow_downward

Вы можете разделить приложение React на несколько одностраничных приложений (SPA). Шаблон Crisp React поддерживает эту функцию. Хотя он использует TypeScript.

Теперь у меня вопрос: (Как) возможно ли получить сборку приложения с двумя файлами index.html.

Два файла .html могут называться по-разному.
У вас может быть один SPA с именем admin и точкой входа (также называемой целевой страницей) admin.html. И еще один SPA под названием school с точкой входа school.html. Все, что вам нужно для этого, это изменить блок SPA Configuration:

var SPAs = [
    new SPA({
      name: "admin",
      entryPoint: "./src/entrypoints/first.tsx",
      redirect: false
    }),
    new SPA({
      name: "school",
      entryPoint: "./src/entrypoints/second.tsx",
      redirect: true
    })
  ];
  SPAs.appTitle = "SchoolApp";

и выполнить yarn build. Оба SPA созданы для вас с файлами .html. Конечно, вы можете написать admin.tsx, school.tsx и использовать его вместо first.tsx, second.tsx.

поэтому «admin.school.com» указывает на «admin.html», а «school.com» указывает на «index.html».

Это не относится к React.
Вы создаете две записи DNS для «admin.school.com» и «school.com», обе указывающие на один и тот же IP-адрес вашего веб-сервера. Предположим, вы используете NodeJS/Express. В своем обработчике маршрута для /, например. app.get("/", (req, res, next) => { ... } изучите req.hostname и, в зависимости от того, является ли он "admin.school.com" или "school.com", заставьте обработчик обслуживать admin.html или school.html.

person winwiz1    schedule 02.11.2019