3

Background:

I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.

I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.

Problem:

Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?

When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:

This HTML file is a template. If you open it directly in the browser, you will see an empty page.

Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.

But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.

I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.

p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.

Edit note: My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?

Shailesh Appukuttan
  • 770
  • 8
  • 19

3 Answers3

3

Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps. (ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)

Mario Perez
  • 2,777
  • 1
  • 12
  • 21
  • 2
    Thanks for that link and the leads Mario. I am going through them right now, especially Gatsby, But before starting I had a question..... my app is actually just a single page, that accepts use data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. Is this doable within 'create-react-app', or is it still advisable to use Gatsby/Next? Wanted to be confirm if its not overkill for my purposes. Thanks again. – Shailesh Appukuttan Nov 10 '20 at 21:47
  • 1
    I have taken a closer look at Gatsby, and I get the feeling it is meant for generating static HTML files beforehand and having them uploaded to the server.... that is it cannot be used to generate HTML files on the fly dynamically, whereby the user can input data in a web form on my webpage and have this data used to generate a static HTML file. – Shailesh Appukuttan Nov 11 '20 at 12:32
0

If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.

For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).

You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.

Dom355
  • 171
  • 2
  • 15
  • Hi, thanks for your reply. I should have clarified that bit (have now edited my post). My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. – Shailesh Appukuttan Nov 10 '20 at 21:56
  • 2
    In that case, I think you could create a button that will scrap the page source code and allow users to download it. If you're familiar with Node, here's a simple package : https://www.npmjs.com/package/website-scraper – Dom355 Nov 10 '20 at 22:04
  • Thanks for these suggestion. I tried this approach, but the problem is that since it is a single page app, the target page does not have a direct URL, but rather appears on a button click. The web scrapers are able to only work on the immediate page at the target URL. – Shailesh Appukuttan Nov 12 '20 at 08:19
0

You can turn on the debugger (f12) and go to "Elements"

Then right-click on the HTML tag and press edit as HTML

And then copy everything (ctrl + a)

enter image description here

Tim Kozak
  • 4,026
  • 39
  • 44
  • The problem with doing this is that it won't copy generated styles that are applied via JS to shadow dom or react components. There's a high probability that once he copies that code, it will lose a lot of styling or other important code, possibly Shadow Dom as well. – user1809836 Nov 11 '20 at 00:43
  • Yep but the problem of the author that he can't even get this via the approaches he uses. Maybe this will be helpful to him. Seans he has control over the app code itself he can fix any missing styling etc. – Tim Kozak Nov 11 '20 at 09:45
  • Thanks for the suggestion. The problem is that the end users of the tool (page creator) cannot be expected to use this method. What is requried is my page/tool to act as a standalone page creator based on user input. The users should be able to obtain the HTML page/source code of the produced output. – Shailesh Appukuttan Nov 11 '20 at 12:26
  • I would thus need to find a way (if at all possible) to allow the user to download/view the resultant HTML code corresponding to what is displayed on the screen on the click of a button. – Shailesh Appukuttan Nov 11 '20 at 12:27
  • I got it. Then I think you just need to access dom directly from js and generate an HTML file on the fly. Something like this https://stackoverflow.com/a/64470124/788798 – Tim Kozak Nov 12 '20 at 10:50