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? :)
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?
This series of posts document a high-level process to use when planning a modern web application, from project organization, collaboration considerations and tooling choices during development, all the way through deployment and performance strategies.