How to add static pages?

[jdarling]

I couldn't find this in the documentation and am lost as to how exactly I should go about creating additional static pages/folders outside the default index.html

In my case I want to create a folder (admin/) that contains a different index.html file that contains a complete app that imports parts of the root app.

What is the right way of doing this?

[viankakrisna]

why not just use react-router?

[jdarling]

Because I don't want all assets delivered to "normal" users that are only associated with administrative users.

[viankakrisna]

It can be done with code splitting though. https://www.drewbolles.com/blog/2016/11/14/webpack-code-splitting-with-create-react-app-react-router/

[jdarling]

So, is the answer that static pages outside of index.html are not supported? I don't have any "need" or want to start using React-Router at this point.

Just playing around with create-react-app to see if it fits our business needs and would be a suggestible solution, and what cases fall outside when to suggest it.

Naturally the Admin section could be built in a separate project and pull from common assets, in fact that would probably be the suggestion, this is just the first use case I could come up with off the top of my head.

[viankakrisna]

AFAIK the production build script only process one index.html (for assets url) from the public folder and generates hashed assets for that build, so for your use case I think it's best just to build a separate project for admin section or use react router.

[gaearon]

In my case I want to create a folder (admin/) that contains a different index.html file that contains a complete app that imports parts of the root app.

Building a separate page is not supported out of the box, sorry!
You would need to eject and tweak your Webpack configs and build script to get this working.

You could implement this with code splitting, but it would mean admin part, when necessary, always loads after the main bundle. To make it load immediately when you go to /admin, you would still need to eject (and add an additional entry point).

Code splitting has no relation to React Router. You would need to use require.ensure API from Webpack for code splitting, and it just accepts a callback. You could do it together with RR, but also it works fine without it.

We’ll be changing how code splitting works (from require.ensure to dynamic import() proposal) in a future release.

[viankakrisna]

Code splitting has no relation to React Router. You would need to use require.ensure API from Webpack for code splitting, and it just accepts a callback. You could do it together with RR, but also it works fine without it.

so we can just conditionally require.ensure inside components?

[gaearon]

Sure, you should be able to.

[viankakrisna]

Great! Thank you!

[gaearon]

Going to close as a duplicate of #1084.
This is the same feature being requested.