Last active
April 1, 2020 17:12
-
-
Save benedictjohannes/33f93ccd2a66b9c150460c525937a8d3 to your computer and use it in GitHub Desktop.
Workaround to enable switching main entry point of Create-React-App by .env
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // package.json | |
| { | |
| //... | |
| "scripts": { | |
| "startfirst": "REACT_APP_MAIN_COMPONENT=FirstMainComponent react-scripts start", | |
| "buildfrst": "REACT_APP_MAIN_COMPONENT=FirstMainComponent react-scripts build", | |
| "startsecond": "REACT_APP_MAIN_COMPONENT=SecondMainComponent react-scripts start", | |
| "buildsecond": "REACT_APP_MAIN_COMPONENT=SecondMainComponent react-scripts build", | |
| "test": "react-scripts test", | |
| "eject": "react-scripts eject" | |
| }, | |
| //... | |
| } | |
| // src/index.js | |
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import './index.css'; | |
| import * as serviceWorker from './serviceWorker'; | |
| let {Suspense} = React | |
| let appstring = './' + process.env.REACT_APP_MAIN_COMPONENT | |
| const DynamicallyLoaded = React.lazy( () => import(`${appstring}`) ) | |
| const DynamicLoader = () => <div className='h100 w100'> | |
| <Suspense fallback={<div> </div>}> | |
| <DynamicallyLoaded/> | |
| </Suspense> | |
| </div> | |
| ReactDOM.render(<DynamicLoader />, document.getElementById('root')); | |
| serviceWorker.unregister(); | |
| // src/FirstMainComponent.js | |
| // src/SecondMainComponent.js |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CRA devs did not pulled this commit which would have allowed switching main component of CRA.
Usiing React lazy loading, switching main entry point is an achievable workaround, albeit not ideal.