-1

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!

epus
  • 139
  • 1
  • 13
  • Do you have mypage.com/app page as html? – Talgat Saribayev Aug 04 '19 at 07:37
  • Not at the moment. I call yarn build and get an index.html with the react application. That's the problem. Edit: I mean I have the production html (the application) as index.html in the build folder. – epus Aug 04 '19 at 07:47
  • Then maybe create app.html and add reference from index.html(anchor tag) and in script of app.html add react js code? – Talgat Saribayev Aug 04 '19 at 08:01
  • You mean I can create the app.html in the public folder instead (or additionally) of the existing index.html (with the "root" id element)? – epus Aug 04 '19 at 08:05
  • yeah just add app.html file, add link to it and it will show `mypage.com/app.html`. Try that first. After you can add script with react code – Talgat Saribayev Aug 04 '19 at 08:13
  • But I want to use yarn run start and this means that the index.js wants to render the react app to the "root" element (index.js from package.json is executed on page load). I did this but now i get the error that there is no "root" id - element in the index.html. That's correct because this element is in the app.html.. become desperate :( – epus Aug 04 '19 at 08:26

1 Answers1

3

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.
Talgat Saribayev
  • 1,898
  • 11
  • 19
  • Thanks! Sounds good for me. The new index.html works but when I go to mypage.com/app.html there is no content. The root-Element contains an empty div only. Are there some other things I have to configure? Edit: Do I have to configure react-router? In index.js the 'App' i import is undefined... – epus Aug 04 '19 at 12:38
  • I'll do it with one index.html and add two routers ( "/" and "/app") - That is the easiest way I think. Thanks! – epus Aug 04 '19 at 12:51
  • You need to copy content of index.html to app.html. – Talgat Saribayev Aug 04 '19 at 13:01
  • Hey, it's worked well so far - thanks! The only problem I have now is that my reaction routers are not working.... I have three routers: /app.html, /home and /next When I call /app.html, my app.html component is rendered, so to speak. However, if I change the URL to /home, the content from the landing page will be displayed. Is there anything I can do about it? – epus Aug 07 '19 at 19:06
  • Can I ask a question, do you have backend? And are you managing it? – Talgat Saribayev Aug 07 '19 at 19:34
  • I don‘t manage a backend, I deploy it to netlify, run the yarn build command and that‘s it. – epus Aug 08 '19 at 05:05
  • I want to suggest just start new app(create-react-app). Setup you route. And transform you landing page to react one. I know it will take time. But it will payoff. Especially if there is not many js code in landing page. – Talgat Saribayev Aug 08 '19 at 08:04
  • Okay there is a lot of javascript code for the landingpage.. Is there a way to move the react app to domain.com/app/index.htm or is it the same? I mean I can include the html via the dangerouslySetInnerHtml React function but then the javascript will not be executed... Is there a way to execute the javascript for the landingpage after I insert it via dangerouslySetInnerHtml? That would be cool! – epus Aug 08 '19 at 09:50
  • Yeah you cannot actually, only if you implement them. So my suggestion instead of trying to insert landing page to react app, because there will be a lot of issue. Just create component as you landing page, this is only advice I can suggest. – Talgat Saribayev Aug 09 '19 at 17:45