Serve large static page from React

Question

I am re-building our website as a single page React application, but for simplicity would like to keep the landing page the same. The landing page is a large static HTML file (with some JS for animations, bootstrap, etc). A large amount of imports and animations makes it difficult to migrate the entire page as a react component.

I want to add the website under /public/landing-page.html, with all of the extra CSS/JS/assets in the same location. Is there a way to assign a route to serve this page rather than render a route in the usual React way?

This seems like a common problem for people migrating their sites from JS/HTML to React.

Answer 1

You can serve this landing-page.html and corresponding CSS/JavaScript/Asset files as static resources. That is, make Node.js as plain web server for these files, without any connection to React.

For example, if Express framework is used in Node.js, it is pretty easy to make the configuration:

const express = require('express');
const app = express();
...
app.use(express.static(path.join(__dirname, 'public'), { 'extensions': ['html', 'js', 'css', 'png'], 'maxAge': '7d' }));

Then, you can open http://<your-website>/landing-page.html , without any React stuff.

Answer 2

If you want to achieve this within the react structure without using the node server, you should try using

<div __dangerouslySetInnerHTML={{__html: yourSiteAsAString }} />

if you want a safer approach, try using sanitize a node module which sanitizes the html before passing it to __dangerouslySetInnerHTML