Serve React build files from two different static build directories

Question

I am currently in the process of creating a react webpage, using starlette as my web server framework that hooks up my database and provides the API. To improve code separation and unneeded loading of files I divided my page into two separately built react pages. One for the login page before verification, and one for the main page once verification has been completed and the user has a valid token. The problem with this is that both react web pages send GET requests as an example to: /static/js/2.91da4595.chunk.js.

I am wondering if it is possible for me to change where react will send requests to when looking for static files. So for example my login page will look to /otherstatic/js/2.91da4595.chunk.js instead.

There might be a more elegant way to reach the point I want to, so feel free to suegest a different method. Let me know if any further explanation or code is needed, and I can add it to this post.

Answer 1

You may need to do code-splitting. Read here for further information.

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.

I assume you used react-router-dom, so here's a simple implementation:

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

const HomePage = React.lazy(() => import('./HomePage'));
const LoginPage = React.lazy(() => import('./LoginPage'));

function MyApp() {
  const [auth, setAuth] = React.useState({
    isLoading: true,
    isAuthenticated: false,
    data: null,
  })

  React.useEffect(() => {
    const checkAuth = () => {
      // call setAuth here
    }

    checkAuth()
  }, [])

  const MyRoute = ({ component: Component, authorized: false, ...rest }) => (
    <Route
      {...rest}
      render={props => {
        if (auth.isLoading) return null
        if (authorized) { // Home page access
          return auth.isAuthenticated
            ? <Component {...prop} />
            : <Redirect to="/login" />
        } else { // Login page access
          return !auth.isAuthenticated
            ? <Component {...prop} />
            : <Redirect to="/" />
        }
      }}
    />
  )

  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <MyRoute path="/login" component={LoginPage} authorized={false} />
          <MyRoute path="/" component={HomePage} authorized={true} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}