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.
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 looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.
I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask.
So it has this base.html file which has some code links to a css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RELAX AND WORKOUT</title>
<link rel="stylesheet" href="bulma.css" />
</head>
Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.
They are both at ./project/templates/the_file
This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css
It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all.
I also tried absolute path and relative path. Neither of them worked.
I'm running it on Windows 10. Using Python 3.7 and flask.
So in my case, how do I make the html load this local css file?
Edit:
Ok, I made it work eventually.
I made a new folder called "static" and put the css file inside it. Then I changed the path to this:
<link rel="stylesheet" href="../static/bulma.css" />.
Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?
But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.
From flask docs:
Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:
{{ url_for('static', filename='style.css') }}
You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.
In your html code use:
<head>
<link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Try changing your href="bulma.css" to href="./bulma.css" and see if it works.
Are you sure you don't have to go into the templates folder? "/templates/bulma.css"
Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.
As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:
https://www.w3schools.com/html/html_filepaths.asp
I am requesting a single EJS file (setting Express, Request).
app.get('/space', function(req, res){
res.render('space.ejs');
});
The file actually renders but only two of three CSS stylesheet link are work when opening the page with my node app. The link that does not work is W3 school. (the only http of all three, could that be the reason?)
However, the all three links work when I open the file directly in browser.
Could someone explain this behavior?
Here is the .ejs file.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
You might be trying to access an insecure resource over a secure connection, if your site is on https you cannot request an http asset. Try changingnthe w3 link to https. It could also be CORS blocked, do you see any errors in the console?
you have written
app.use(express.static(__dirname + '/public'));
<link rel="stylesheet" href="/css/w3.css"/>
you need to add "static" in link tag
<link rel="stylesheet" href="/static/css/w3.css"/> and it should work for you.
in your case your server.js file in lib dir that is why you should do this
app.use(express.static(process.cwd() + '/public'));
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>HTML Document</title>
<meta charset="UTF-8" />
</head>
<body>
A Directory
</body>
</html>
By default when I open this link in my internet browser it shows a white page with the items in the directory. Can I change the Directory's Page. For example: http://www.aq.com/gamedesignnotes/ see how the URL points to a directory and not a HTML Document but still shows a page.
Most webhosts will show an index.html if you navigate to a directory. You could just create a new file inside your directory called index.html and put your HTML there.
Then you can go to http://yoursite.com/directory and it will show the index.html file in that directory (http://yoursite.com/directory/index.html).
Here is a link to learn more
It depends on your webserver. Apache HTTPD generates them using mod_autoindex which gives you some control over the apearence via directives such as IndexHeadInsert.
Your question is how to make pretty (seo friendly) urls right?
How to make http://website.com/something show a specific html page?
This can be done using mod rewrite using .htaccess files.
Here's a stack overflow topic on mod rewrite:
Semantic URLs for static HTML files with .htaccess and mod_rewrite
Here are some tutorials on pretty urls:
http://zenverse.net/seo-friendly-urls-with-htaccess/
http://net.tutsplus.com/tutorials/other/using-htaccess-files-for-pretty-urls/