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.

Ukasha · Accepted Answer · 2020-06-11T13:10:02.603

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>
  );
}

Thank you for your reply. As you suspected I am using react-router-dom, and this is a more elegant solution. However a theme for this project has been security. Would it be more secure to have two builds in terms of code isolation? I understand that both end points would still be available, but the one that requires authentication would not be able to access any data without a token. Does this have equivalent or greater security? — Max Karsten, Jun 11 '20 at 12:09
Nope. React app static files should be publicly available. You need to handle authorized and non-authorized routes in your react app. See my updated answer for strategy to archive this. — Ukasha, Jun 11 '20 at 12:49
Excellent, I already implemented a similar protected route component! Thank you for the quick reply and good advice on code-splitting! — Max Karsten, Jun 11 '20 at 13:12

Serve React build files from two different static build directories

1 Answers1