How to build two different builds from with react – Reactjs

As of now, not an answer for your original question, how to make two different builds.

A way to make it harder for people to look at the admin page source and easier for you to deploy, is to use the code splitting capabilities of Webpack.

React provides a simple way to split your app in bundles, with the React.lazy method. However I think you need React 16.6.0 and above

For webpack code splitting you’ll need version 4 and above

I used react 18.2.0, webpack 5.75.0

I bootstraped the app with npx create-react-app to go fast.

I think react-app-rewired keeps default cra configuration and you should be good. Maybe you will need to update some webpack config, will see

If you are using some kind of routing, you can inspire yourself from this code. I used react-dom-router 6.8 version

The App.js file

import { BrowserRouter, Routes, Route, Link,Navigate } from 'react-router-dom';
import { ProtectedRoute } from './ProtectedRoute';
import * as React from 'react'

// The React.lazy() will normally handle everything for you
const Admin = React.lazy(() => import('./AdminPage'))

function App() {
  return (
    <BrowserRouter>
      <h1>Lazy Router</h1>

      <nav>
        <Link to="/">Home</Link>
        <Link to="/admin">Admin page</Link>
      </nav>
      <Routes>
        <Route path='/' element={<HomePage/>} />
        <Route path='/admin' element={
          <ProtectedRoute
          element={<Admin/>}
          fallback={<Navigate to="/" replace/>}
            />
        }
        />

      </Routes>
    </BrowserRouter>
  );
}

const HomePage = () => {
  return (
    <div>
      Home page
    </div>
  )
}


export default App;

So you can pass the Component you want to protect, the AdminPanel Page into the ProtectedRoute component. Its goals is to call your API to check if it has permission to acces the AdminPanel.

I defined two props, an element, any component you want, here the AdminPanel component wrapped with React Lazy.
And a fallback, A Redirect to the HomePage if authorization failed.

The ProtectedRoute.js

import { useEffect, useState } from 'react';
import * as React from 'react'
const ProtectedRoute = (props) => {

    /* You could write your own hook that will performed the authorization call to your API. 
        The hook could returns load and authorized states
        But for simplicity
    */
    // Auhtorization state which reflects your api auth
    const [authorized, setAuthorized] = useState(false)
    // Load state, just to wait until isAuth function returns
    const [load, setLoad] = useState(false)


    // An inelegant function to mimic authorization call to the server
    const isAuth = () => {
        setTimeout(() => {
            setAuthorized(true)
            setLoad(true)
        }, 2000)
    }

    // Call your API when the ProtectedRoute component is mounted
    useEffect(() => {
        isAuth()
    },[])
    // Loader until the authorization complete and eventually your AdminPanel is loaded
    return (
        <React.Suspense fallback={<>...loading</>}>
            {load ?
                authorized ?
                    props.element
                    : props.fallback
                : <>...loading</>}
        </React.Suspense>
    )

}
export { ProtectedRoute }

And the AdminPage.js

const AdminPage = () => {
  return (
    <div>
      Admin Page
    </div>
  )
}
export default AdminPage

You will see that the chunk for the adminPanel will only be downloaded when you request it, i.e. when authorization is successful.

Note, if the bundle fails to load with React.lazy, your react application will completely crash. You have to protect it with a <MyErrorBoundary></MyErrorBoundary> component.
This is explained in this react documentation

Is this method 100% bullet proof, can some people hack a bit react state ? I won’t be surprise if it is the case. But it still makes it harder for people to access the source code of your AdminPanel.

In addition, if your react bundles are distributed by a server you control, when the client requests the bundle for the admin page, you can check its rights.

By default, bundles are named with barbarian names, and will be hard to filter, but I think you can give them the name of the module in question, according to the webpack documentation, in the output:{filename:etc..} section. This would be much easier to filter and control, when a client request the adminpanel.bundle.js file.

Will edit my response if you need some precisions and after playing a bit with webpack, but for now I am lazy