How to serve multiple HTML files with React?

Question

I want to build a web application with React with multiple HTML pages. For example login.html and index.html. I've created these HTML pages and mapped them to URIs with my backend. So I have localhost:8080/login and localhost:8080/index. Unfortunately, React only uses the index.html file to render content!

So index.html works and the React content is shown: localhost:3000/index.html

<!-- index.html -->
...
<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>
  <div id="wizard"></div>
</body>
...

<!-- index.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FetchData from "./FetchData";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<div className="d-flex flex-column">
            <div className="bg-dark text-light AppHeading">Self-Service-Webwizard</div>
            <div className="bg-white"><FetchData /></div>
        </div>,
document.getElementById('wizard') as HTMLElement
);
registerServiceWorker();

But wizardLogin.html doesn't show the React content: localhost:3000/wizardLogin.html

<!-- wizardLogin.html -->
...
<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>
  <div>Wizard login</div>
  <div id="wizardLogin"></div>
</body>
...

<!-- LoginPage.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import LoginForm from "./LoginForm";

ReactDOM.render(
    <div>
        <div><h1>Wizard Login.tsx</h1></div>
        <div><LoginForm/></div>
    </div>,
    document.getElementById('wizardLogin') as HTMLElement
)
;
registerServiceWorker();

Am I doing something wrong or is it not possible to serve multiple HTML files with React?

Github: https://github.com/The-Taskmanager/SelfServiceWebwizard

score 11 · Answer 1 · answered May 12 '19 at 15:19

if you are use create react app you must eject your project first because you must change your entry point in Webpack configuration

first eject ( if you do not have webpack config file )

    npm run eject

and after that go to config file

in webpack.config.js

entry: {
    index: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appIndexJs,
    ],
    admin:[
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appSrc + "/admin.js",
      ]
  },
  output: {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/[name].bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath),
  },

after that you should add Wepack plugin and added that to your project

 new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'admin.html',
    }),

also you should rewrite urls

historyApiFallback: {
      disableDotRule: true,
      // 指明哪些路径映射到哪个html
      rewrites: [
        { from: /^\/admin.html/, to: '/build/admin.html' },
      ]
    }

you can read this page for more informations http://imshuai.com/create-react-app-multiple-entry-points/

EBurkinshaw · Answer 2 · 2021-05-16T14:43:35.970

Ejecting the app didn't seem like the right option. I found this answer which seems to work better. Here is a quote from the answer.

How to model a react application as a multi page app. There are many ways, however, one would be to structure your files like so:

./app --> main page for your app
    ./app/page1/ --> page 1 of your app
    ./app/page2/ --> page 2 of your app
    ...

In this way, each 'page' would contain a self contained react project. Your main application page could contain hyperlinks that load these pages, or you could load them asynchronously in your javascript code.

An alternative which I am using right now is to use a different toolchain. I am using Gatsby which has support for multiple pages. You could also use next.js, however it requires a nodejs express server as the backend.

score -2 · Answer 3 · answered Jul 12 '18 at 13:43

-2

I think you need a router. Here is great react router library which you can use

https://reacttraining.com/react-router/web/example/basic

answered Jul 12 '18 at 13:43

Sergo Kupreishvili

444
9
21

score -3 · Accepted Answer · answered Jul 18 '18 at 08:17

-3

So far I've learned that React native doesn't support multiple HTML pages because it's an single page application. I kept index.html as single HTML page and solved the issue with conditional rendering in react. When a condition is fullfilled then I'm rendering another React .tsx-file.

answered Jul 18 '18 at 08:17

Taskmanager

439
2
7
18

1

Good compromise, but had to downvote.. It's not an answer to the question. OP didn't mention native. – baash05 Oct 14 '18 at 09:23

How to serve multiple HTML files with React?

4 Answers4

Linked