React - Best practice for application with different entry points/sections

Question

I'm working on a larger React Application right now and have some questions about if I set everything up correct (Best Practice). The application has two different "sections". I'm trying to give an easier example (school scenario) how the structure is set up:

The first section of the application is used by principal to set up school classes, teachers, students, rooms, etc...
The section section is used by all the users (teachers, students) that the principal defined. The teachers can set up timetables, etc...

Now what I trying to is: The principal can access his section of the application with the url: admin.school.com - The teachers and students can access the application with the url: school.com

I've put everything in a single react application right now, so I can use the same design, components, etc. During development I switch between the two applications by comment out the application I don't want to access in the index.js file:

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

My question now is: (How) is it possible that I can get a Build of the application with two "index.html" files so "admin.school.com" points to "admin.html" and "school.com" points to "index.html". My main goal is (like I said) - to have one code basis on my server and just two different html files. Is this possible or do I need to build the application twice? The principal should be able to access the normal section without new login.

I hope that my explanation was easy to understand. Thank you for your help!

score 1 · Answer 1 · answered Nov 02 '19 at 10:31

1

You can use process.env to pass environment variables (see https://create-react-app.dev/docs/adding-custom-environment-variables/ if using create-react-app), e.g. in index.js:

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

and in package.json:

"scripts": {
  ...
  "build-admin": "REACT_APP_ADMIN=1 npm run build"
}

answered Nov 02 '19 at 10:31

Aprillion

21,510
5
55
89

So I need two builds? So I build "npm run build-admin" -> put everything from build directory to the folder on the server which points to "admin.school.com". And then the same for "school.com" ? – Mike_NotGuilty Nov 02 '19 at 10:36
1

if your build system supports custom build directory, use it. otherwise you can move the files to a different directory e.g. by `REACT_APP_ADMIN=1 npm run build && mv build build-admin` as inspired by https://stackoverflow.com/a/44538829/1176601 – Aprillion Nov 02 '19 at 10:43

score 0 · Answer 2 · answered Nov 02 '19 at 16:18

You can split React application into several Single Page Applications (SPAs). Crisp React boilerplate supports this functionality. Although it uses TypeScript.

My question now is: (How) is it possible that I can get a Build of the application with two "index.html" files.

The two .html files can be called differently.
You can have one SPA called admin with the entry point (also called landing page) admin.html. And another SPA called school with entry point school.html. All you need for that is to modify the SPA Configuration block:

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";

and execute yarn build. Both SPAs are created for you with .html files. Of course you can write admin.tsx, school.tsx and use it instead of first.tsx, second.tsx.

so "admin.school.com" points to "admin.html" and "school.com" points to "index.html".

This is a non-React part.
You create two DNS entries for "admin.school.com" and "school.com", both pointing to the same IP address of your webserver. Let's assume you use NodeJS/Express. In its route handler for / e.g. app.get("/", (req, res, next) => { ... } examine req.hostname and depending on it being either "admin.school.com" or "school.com" make the handler serve admin.html or school.html.

React - Best practice for application with different entry points/sections

2 Answers2