I'm working on a project where I need to populate a template.tsx file with the data I collect from a form and generate a html file with the collected data, then download it to the users computer. How can I achieve this with nextJS?
Thanks in advance.
Here is the flow I need to achieve.
If You use a React-based Framework like Next.js, Gatsby or others, You could use ReactDOMServer to generate HTML markup. But it's not required. Perhaps other template mechanisms are better suited for Your use case. We use ReactDomServer for generating HTML-mails just to stay with React. The mails are simple order confirmations and such stuff.
import ReactDOMServer from 'react-dom/server' // Use as template engine
...
return ReactDOMServer.renderToStaticMarkup(
<html lang="de">
<head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Some arbitrary HTML...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style={body}>
...
...
With the rest of the "flow" you are on your own. Depends all on your needs and app architecture.
Related
I've been trying to find a web component framework that allows you to integrate 3rd party web components so that dev won't have to spend time writing CSS when they can reuse libraries such as material component web.
I've checked out svelte, lit-element, and stenciljs but they all run into issues when trying to integrate with 3rd party web components. Are there underlying reason that web component might be incompatible with nesting 3rd party web components?
Update:
I am running into an issue where web components exist in the dom but not visible to users when built.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte + TS + Vite App</title>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.6.0/webcomponents-loader.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<script type="module" src="./assets/MatButton.wc.0e5949a7.js"></script>
</head>
<body>
<h1>Test</h1>
<my-mat-button></my-mat-button>
</body>
</html>
It renders correctly in dev but I am looking to share the component for users to embed via script.
In dev:
In /dist:
All other components work correctly except for the web component.
my question may not be related to react directly and maybe related to MVC routes only but i decided to share the bigger picture if anyone thinks i'm on the wrong track.
we have a React / redux application that bundles to an index.html file with css and js resources:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>Booking Engine</title>
<link href="./main.837f1985001f2e603b8755f0f28be780.css" rel="stylesheet">
</head>
<body>
<div id="sb-be"></div>
<script type="text/javascript" src="./main.adb11750acf05df99619.js"></script>
</body>
</html>
the resources are dynamicly hashed as you can see.
I need to serve this index.html from a MVC application, i tried to do that using this post (by using MapPageRoute and RouteExistingFiles in RouteConfig).
I can serve the html as expected, though the resources are not being served correctly.
This is my file structure in my MVC app:
--MVCRoot
----Other MVC related folders
----ReactFolder
--------dist
------------index.html
------------main[hash].js
------------main[hash].css
now using a MapPageRoute like so:
routes.MapPageRoute("index", "SomeName/{*pathInfo}", "~/ReactFolder/dist/index.html");
The resource files of main.js and main.css are being served as the index.html, i mean i literally get the index.html instead of the actual js and css files.
I tried with routes.RouteExistingFiles set to true or false but no help.
EDIT: basically my question is how to serve a html static file with a "pretty" (custom) URL without interrupting the page's resources load with their relative path?
Oki, I got my head on the table here.
I'm trying to get contents from another page, and interact with it. Using some kind of advanced iframe solution.
Up until now I've been using the ugly iframe solution, you can see the results here :
http://www.mosfellsbaer.is/stjornkerfi/stjornkerfi/fundargerdir/
Please try to interact with it to see how ugly this is.
Ok..
I found another page that uses the same system as we do, but it looks a lot better.
It's an iframe, but when looking at the source code, I dont see any iframe embed code or anything that points to that it's an iframe. Here is the page :
http://www.kopavogur.is/stjornsyslan/fundargerdir/searchmeetings.aspx
But I know this is some kind of an iframe.
Their way is a bit better because they can use their own css and such.
Somehow they get the contents from the searchmeetings.aspx and post it to their page
How the h... are they doing this ?
I'm kind of new at this here
Thanks in advance
It's not an iframe... Looks like they're doing something like this: How to display an ASPX in another ASPX's DIV dynamically at runtime?
It's an ASP page, and the inserted document has a few clues telling us that it's a Microsoft generated page as well:
<div class="boxbody">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Leit í fundargerðum</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="css/fonts.css" rel="stylesheet" type="text/css">
</HEAD>
<body>
Good day -- I'm currently using Facebook's PHP SDK to share a link (see: https://developers.facebook.com/docs/php/howto/postwithgraphapi/), but when I attempt to customize the image, title and description via the Facebook meta tags, they do not take effect (FB always renders the defaults instead).
Here is my html head information:
<head prefix="og: http://ogp.me/ns#">
<title>Share to Facebook Custom Image</title>
<meta property="og:title" content="Share to Facebook Custom Image">
<meta property="og:type" content="website">
<meta property="og:url" content="http:...">
<meta property="og:image" content="http://www.millennialmedia.com/images/home/mmedia-2.png">
<meta property="og:description" content="add a short description of the page or content">
<meta property="fb:app_id" content="751866978175179">
</head>
Can someone please advise as to what I might be doing wrong? Much obliged!
Go to facebook debugger (ex linter) and paste the url. That should help debug. Facebook caches a copy and debugger refreshes it. Try that. Another thing that might help as well is clearing your browser's cache as the last solution.
EDIT SOLVED
You are using XHTML and XHTML is strict on errors. That was causing the facebook url parser to fail getting the information due to an invalid <br /> tag that you are using (</br>). Fix that and it will work. If going on with XHTML look here for common mistakes
I recommend switching to html like so:
<!doctype html>
<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb#">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
As for your image not displaying issue upload a bigger image bigger from 200x200 pixels if I remember correctly.
Our app renders Like buttons that point back to an actual Facebook page. However, instead of pointing the Like button's href directly to the FB url, we proxy it through our servers through an opengraph endpoint. This is helpful because it allows us to have more detailed analytics on when these endpoints are used (amongst other things.) When these endpoints are hit with a user agent like 'facebookexternalhit', they render something like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta property="fb:app_id" content="158708354177049" />
<meta property="og:site_name" content="BandPage" />
<meta property="og:url" content="http://www.facebook.com/stormystrongmusic" />
<meta property="og:type" content="band" />
<meta property="og:title" content="Stormy Strong" />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://graph.facebook.com/20501829906/picture" />
<title>Stormy Strong</title>
<link rel="canonical" href="http://www.facebook.com/stormystrongmusic"/>
</head>
<body>
</body>
</html>
Note that both og:url and the link rel="canonical" point to the actual Facebook Page. In practice, this looks like it behaves fine when we try running the link through Facebook's debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.bandpage-s.com%2Fogp%2F11601543111380992
However, there is a problem where, after an interval, the Like buttons appear to not resolve back to the page anymore. This results in the Like count being off, the button not being 'Liked' if you already like the page, etc. Manually triggering a re-scrape by going to the OG debugger url above solves the problem, for a time.
Obviously manually re-triggering these scrapes is not a tenable solution. Are there multiple scraper behaviors happening here? It seems like the scraper that is triggered w/ the debugger is different than the one that periodically re-scrapes automatically.
Why does this happen? Is there anything we can do to get around this, except for getting rid of our ogp endpoint 'middle-man' here? This seems like a perfect utilization of og:url.