Search code examples
javascriptreactjscreate-react-app

Mix landing page with react app (create-react-app)

What are the best practices for "integrating" a React app into an existing HTML landing page?

For example, I have a marketing page on mypage.com/ and would like to use the react app on mypage.com/app only.

What I tried is to use react router and use the dangerouslySetInnerHTML function to include the HTML page but for this case I need to use a html-loader and I use react-scripts instead of the webpack.config so I think it is not possible to add the loader. Isn't it? 

<Router>
  <Route path="/" exact component={Landingpage} />
  <Route path="/app" exact component={App} />
</Router>

/* Landingpage */
return () {
  <div ... dangerouslySetInnerHTML={{ __html: html }} />
}

I tried the following but I don't have the webpack.config because I use react-scripts. React: how to load and render external html file?

What I want is to call yarn build and receive the finished application. Do you have any suggestions how I can reach that?

Thanks so much in advance!

Solution

  • Bad news
    You can't do that with default configuration of create-react-app

    Good News
    It is possible with eject.

    1. npm run eject
    2. Add app.html and add link to it from index.html
    3. inside config/paths.js change line appHtml: resolveApp('public/app.html') to
    ...
appHtml: resolveApp('public/app.html'),
...
    1. config/webpack.config.js change to
    {
  filename: 'app.html', // Add this line
  inject: true,
  template: paths.appHtml
},
    1. Configure react-router if exists, accordingly.