How do I set up a Create React App to make a single myApp.js and myApp.css file that can be moved where ever I need?
Background: At my work we have two older websites in need of updating and both have a React app inside the multi page site. The React apps use Create React App. Not my choice of configuration, this is just what I have to work with and I can not change everything.
Currently, when small changes are made to the site we build the bundled a take the final myApp.js and myApp.css files the CRA produce and moved these to the folder where the website expects them to be.
It might be easier to understand it this way. The app builds the .js|.css bundle files here:
../appA/someFolder/build/static/main.jsand../appA/someFolder/build/static/main.css.
These files are then moved to here:
../appA/hostThisSite/someFolder/js/main.jsand../appA/hostThisSite/someFolder/css/main.css
And for the second website it does the same yet moves the file to a whole other website structure
../../appB/hostThisSite/someFolder/js/main.jsand../../appB/hostThisSite/someFolder/css/main.css
Currently we need to update the React app. And to do so I need to address that the new Create React App creates a bunch of files in the /build/static/ folder (and they include hashes in the name and not myApp.js and myApp.css.)
I have done research and the only thing I have come up with is this: https://www.labnol.org/code/bundle-react-app-single-file-200514 And the boss doesn't want me to use gulp.
This is a known issue in create-react-app, several proposed solutions in https://github.com/facebook/create-react-app/issues/5306 that involve using npm packages such as react-app-rewired or craco.
Another answer to this question with two possible solutions, one with eject another with react-app-rewired https://stackoverflow.com/a/58570278/388038