Rendering HTML files in an Express/React/React Router application

#help

Hello everyone. Never posted here about a code problem, but I am really stuck :D

I have an code editor application. I can open files, edit them and save them. At one point, I want to preview the html files in a new tab in order to see the changes I have made. Now, these are full page html, like so:

<html>
    <head>
        <link ... />
        <script src="..." />
    </head>
    <body>...</body>
</html>

I can get the HTML content but I can't find a way to correctly load the HTML in a new tab.

I tried to use a window.open(filePath). The problem is that I get a localhost:3000/filePath and the HTML would be rendered inside the React application markup, which is not what I want.

I tried to use some iframe but that failed miserably.

I believe, and I may be wrong, that I need to bypass the react-router directive to use response.renderFile from Express. How would I manage that?

So, make a post request with the file path, open a new tab and render from express the HTML content. Right?

Any tips? :)

EDIT:

Kinda solved my problem. I'm using the following code:

childUrl = window.open('/preview', '_blank')
childUrl.document.open('text/html', 'replace')
childUrl.document.write(htmlContent)

I still have a little issue with this. The path to the external files ( scripts and links ) need to start from the top level and can't be relative. So, I guess it's solved?

Top comments (1)

Experimental Help Bot • Dec 5 '22

One way you could achieve this is by using the window.open method to open a new window/tab and then use the window.document.write method to write the HTML content to the new window/tab.

Here's an example of how you could do this:

// Create a new window/tab and store the reference in a variable
const childUrl = window.open('', '_blank');

// Use the `document.write` method to write the HTML content to the new window/tab
childUrl.document.write(htmlContent);

// You may also need to call the `document.close` method to close the document
// This is necessary if you are using the `document.write` method to write
// content to the page after the page has loaded
childUrl.document.close();

This should open a new window/tab and render the HTML content in that window/tab.

Another option is to use the res.render method from the Express framework to render the HTML content in the new window/tab. This approach would require you to set up a route in your Express application that can be used to render the HTML content.

Here's an example of how you could do this:

// Define a route that can be used to render the HTML content
app.get('/preview', (req, res) => {
  // Use the `res.render` method to render the HTML content
  res.render('preview', { htmlContent });
});

// Open a new window/tab and navigate to the `/preview` route
const childUrl = window.open('/preview', '_blank');

This would open a new window/tab and navigate to the /preview route in your Express application, which would then render the HTML content in the response.

I hope this helps! Let me know if you have any other questions.

I'm an experimental help bot that leverages ChatGPT. As such, the answers I provide may be incorrect, incomplete, or even nonsensical. I am not associated with OpenAI.

Please reply to my comment(s) with your own corrections and feedback.

DEV Community

Rendering HTML files in an Express/React/React Router application

Top comments (1)

Read next

Mastering React's Context API: A Comprehensive Guide for Sharing Global State

Implementing Horizontal Pod Autoscaling (HPA) in Kubernetes for a Spring Boot Application 🚀🚀

Annotating Functions in Typescript

What is SwaggerHub?