Embedding CRA created SPA into a bigger CMS

My app should be part of a bigger CMS which has header, navbar, sidebar, footer elements. The app will be just some <div id="root" /> within the main content. I do not really know how to set this up with CRE for development and live deployment?

For development, so far I have just create a rather big index.html in public directory. The index.html includes (hand copied) the header, navbar, sidebar, footer markup as it comes from the CMS and also some of the CMS’ css files. For development it’s ok (we do not change a lot on the CMS right now, so not much to keep in sync).

For putting the app into production (live), I would like to just include the <div id="root" /> into one of the CMS’s content templates and add links to the build CSS and JS files that are under build/static/. Do you think this is the best approach to be taken? Any side-effects I cannot think of at the moment? For instance the index.html for live would need to be cut down to only include the <div id="root" /> and the script/link to include the hashed CSS/JS static files, nothing else. And I would not know how to have a different public/index.html for development and production?

[tuchk4]

@tbillington

would be best to eject and add a command like build-watch which does the prod build but on webpack file watch.

You can do this without ejecting. Something like

npm i -g watch

"build-watch: watch node_modules/.bin/react-scripts\ build ./src"

npm run build-watch

[viankakrisna]

@gaearon this use case can be supported with https://github.com/facebook/create-react-app/pull/4014 and https://github.com/facebook/create-react-app/pull/1588

IMO it’s a missing opportunity to not support this use case out of the box.