Реагировать - Лучшая практика для применения с различными точками входа / разделами - PullRequest
Новая
       32

Реагировать - Лучшая практика для применения с различными точками входа / разделами

2 голосов
/ 02 ноября 2019

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

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

Теперь я пытаюсь сделать следующее: директор может получить доступ к своему разделу приложения с помощью 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-файла. Это возможно или мне нужно собрать приложение дважды? Директор должен иметь доступ к обычному разделу без нового входа в систему.

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

Ответы [ 2 ]

1 голос
/ 02 ноября 2019

Вы можете использовать process.env для передачи переменных окружения (см. https://create -react-app.dev / docs / добавление-настраиваемое-окружение-переменные / при использовании create-реагировать-приложение),например, в 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"
}
0 голосов
/ 02 ноября 2019

Вы можете разделить приложение 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 ".

Это нереактивная часть. Вы создаете две записи 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.

.
...