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.
Is the only way to use an external stylesheet with Elm to use Browser.element and do something like the following?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="spectre.min.css">
<script src="elm.js"></script>
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
What if I want to use a Browser.Document instead, or even a Browser.Application ?
When searching the internet for Elm and CSS, I only find libraries that write CSS using Elm, or that replace CSS with Elm code. But what if I already have a CSS stylesheet that I want to use. I'd like to use Spectre CSS. It's just a single CSS file "spectre.min.css". Can I use that with Elm in a simple way?
If you want to control the HTML document (i.e. the head section) where your app is running in then you have to switch from using elm-reactor to embedding the compiled Elm app like described in the Elm guide.
I have created a little boilerplate setup that allows me to control the "index.html" and have hot code reloading via a little script (no other dependencies).
I've used PythonAnywhere before, but this is the first project that utilizes a Django back end and React front end. What is strange is that if I run this exact project on localhost, there are no troubles at all. It is only when I host this website on PythonAnywhere do I get this error.
They're probably hard to see...
Refused to apply style from 'http://bluebirdteaching.pythonanywhere.com/static/css/2.8aa5a7f8.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Looking this up, I've come across this page a lot, but I just can't seem to make sense of the answers provided there. I just don't understand why this works on localhost, but not on PythonAnywhere.
I included the above image not just to show my index.html, but also to show the project directory as that seems to be necessary as the other post linked explains. If the answer I'm looking for is in that other post, I just can't make sense of it.
Again, everything works as expected when I run the project locally. Of course, thanks guys for any help. I've been going at this problem for a while now; any help/explanations would be a huge relief.
Edit: Here is the index.html file generated when I do npm run build. This is where all those chunk.css and chunk.js are referenced.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>BlueBird Teaching</title>
<link href="/static/css/2.f3cffc9e.chunk.css" rel="stylesheet">
<link href="/static/css/main.aa904fbe.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],f=r[2],c=0,s=[];c<p.length;c++)a=p[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(i&&i(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this.webpackJsonpreactapp=this.webpackJsonpreactapp||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var f=0;f<p.length;f++)r(p[f]);var i=l;t()}([])</script>
<script src="/static/js/2.f7026f3a.chunk.js"></script>
<script src="/static/js/main.f2b0e582.chunk.js"></script>
</body>
</html>
Solution
The reason why it was working locally but not on Heroku or PythonAnywhere was just because I needed to set out mapping for static files. Literally all I needed to do this whole time was python3 manage.py collectstatic.
One of the suggestions in the SO post you linked to is that you're may not actually be serving CSS, but may be serving HTML instead. Have you loaded the css page in a browser to see what you're returning from that URL?
The reason behind why it shows mime type error is that, staticfiles_dirs doesn't include src folder, and if there is images inside src, it doesn't get include in staticfiles folder while collectstatic process, hence throws error.
so make sure to not use import images inside src or public, instead host them.
I've just started looking at using the HERE Javascript API and wish to display the map in an embedded web browser. (I'm using Delphi, however this problem might apply to any development tool that supports embedded browsers). I'm using the quick start example:
https://developer.here.com/documentation/maps/topics/quick-start.html
The HERE logo displays in the bottom right, and the copyright notice in the bottom left, but the map does not display. Identical HTML being loaded from a file displays OK in Edge.
I have an entry in the registry in:
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
For my application, and have tried values of 11011, 11001, 99999, 9999 and 11001, however the result is all the same. Are embedded browsers not supported, or is there something else I need to do?
EDIT:
Doing the same thing in a Visual Studio C++ MFC app results in the same behaviour
EDIT 2:
Now that Delphi has support for embedding Edge browser - still the same issue, i.e. HERE logo and copyright shows, but no map. Can someone from HERE actually respond and indicate whether it's even possible to use an embedded browser? (MFC app which uses Edge didn't work, either)
EDIT 3:
A colleague suggested opening the DevTools and checking the console for errors - here's the result:
This is what I found while making it work in the webbrowser control of MS Access (embedded IE). You have to use P2D engine and legacy javascript files from Here maps. I did and now the map is shown but it's not draggable yet, don't know why.
I put 11001 in my registry but I also add this line to my html:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Then you need at least these links to have legacy support (in this particular order):
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
And this option in the map initialization:
engineType: H.map.render.RenderEngine.EngineType.P2D,
It turns out that using NavigateToString in ICoreWebView2 does not work with HERE.
The solution was to use a file for the HTML, and use Navigate with a URL of, for example: file://C:\HTML\Here.html
I have a website here hosted on Github Pages using Beautiful Jekyll. See here for the actual code behind the blog on Github.
I'd like to embed a leaflet map into one of my blog posts. I am using the R package leaflet.
So say for example I make a map:
library(htmlwidgets)
library(leaflet)
m <- leaflet() %>% #basic map
addTiles() %>%
How do I embed this on my page? One thing I tried to do is save the html file using:
saveWidget(widget = m, file="your_map.html", selfcontained = FALSE)
This works and saves the html file locally. I tried copying and pasting the html code into one of _posts on Github but that didn't work.
Any suggestions?
You can have a look at how they are doing this for the official R leaflet page at their github page (the one for the website, not for the leaflet-code).
I don't see on your site that you are using R-markdown to create your markdown pages. It is really worth a try! Have a look at yihui's jekyll example. Basically you use knitr to generate your pages. This means you write markdown and are able to embed your R-Code into the markdown page. Like for example:
```{r}
plot(runif(10))
```
The same you can do with leaflet:
```{r}
library(leaflet)
leaflet() %>% addTiles() %>% setView(10, 51, zoom = 8)
```
htmlwidgets should be automatically loaded by knitr.
For example you can have a look how the basemap page for the R leaflet page is done in R-markdown.
One important thing if you include leaflet maps in your page is though to include all the scripts in the page head. On my page I inserted it in the head.html in the _includes folder.
I had to add the following:
{% if page.maps %}
<script src="/assets/jquery-1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/assets/bootstrap-3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="/assets/bootstrap-3.3.1/js/bootstrap.min.js"></script>
<script src="/assets/bootstrap-3.3.1/shim/html5shiv.min.js"></script>
<script src="/assets/bootstrap-3.3.1/shim/respond.min.js"></script>
<script src="/assets/htmlwidgets-0.5/htmlwidgets.js"></script>
<link href="/assets/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="/assets/leaflet-0.7.3/leaflet.js"></script>
<link href="/assets/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<script src="/assets/leaflet-binding-1.0.1/leaflet.js"></script>
{% endif %}
I added an option maps: true into the front matter of pages with maps so that the part {% if page.maps %} makes sure that all this code is only loaded for pages that need it.
I copied all the scripts from a folder that was created by knitr when I compiled the R-markdown page without jekyll. Therefore I had to set
output:
html_document:
self_contained: no
in the front matter (otherwise the code is embedded in the page and can't be copied so easily).
The team behind R leaflet include the libs in their index.html like this:
<script src="libs/jquery/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap/css/flatly.min.css" rel="stylesheet" />
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/bootstrap/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap/shim/respond.min.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<link href="libs/leaflet/leaflet.css" rel="stylesheet" />
<script src="libs/leaflet/leaflet.js"></script>
<link href="libs/leafletfix/leafletfix.css" rel="stylesheet" />
<script src="libs/leaflet-binding/leaflet.js"></script>
You can copy the libs from their libs folder.
I see on your page that you already got it to work with a different method. I just wanted to include this because I was just working on the same topic...
Based on #nnn answer I put together a tutorial for doing so:
FULL TUTORIAL ON THIS LINK
In short:
On GitHub/Jekyll
Identify the code you need to include. I already did it for you See on my GitHub
Copy/paste it in the code that builds your <head>. This would depend on your Jekyll implementation. After doing that, the needed libraries would be loaded every time that Jekyll builds the website.
On Rstudio
Create a map with leaflet and knit it to a github_document. It is important to knit it using always_allow_html: yes in the front matter.
On Markdown
Check that every leafletmap has produced an html code in the .mdfile. Something like this:
<!--html_preserve-->
<script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
{"x":{"options": ...
<!--more funky code here-->
Paste this chunk before the <script> part:
<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html-widget"></div>
So you got something like this for each leaflet map:
<!--html_preserve-->
<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html- widget"></div>
<script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
{"x":{"options": ...
<!--more funky code here-->
Now publish it on GitHub. Now when Jekyll builds your blog/web hosted on GitHub the libraries are loaded and the leaflet map displays correctly. Note that on local or markdown the map is still not visible.
Once that you have done it a couple of times you will see that is basicaly copy/paste/modify the chunk that I presented on step 5.
I found a solution here https://jayrobwilliams.com/posts/2020/09/jekyll-html
Store the output from the saveWidget in your website directory.
wrap the relative path in an iframe and style as you please.
<iframe src="/interactiveDocs/map.html" height="600px" width="100%" style="border:none;"></iframe>
It has worked well for my purposes