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.
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?
Chrome is blocking the css files and images from showing by generating this error in its console:
This request has been blocked; the content must be served over HTTPS
I have all my routes to the CSS files with relative paths:
<link type="text/css" rel="stylesheet" href="../resources/css/template.css"/>
<link type="text/css" rel="stylesheet" href="../resources/css/menu.css"/>
<link type="text/css" rel="stylesheet" href="../resources/css/general.css"/>
<link type="text/css" rel="stylesheet" href="../resources/css/system.css"/>
But there is a token (a token for maintaining the application state) added to the path (as this is ADF)
so chrome finds this:
'http://my.site.com/package/faces/resources/css/template.css?_adf.ctrl-state=q0l98h1nm_125'
I don't know how (I searched all my project and there's nothing that has a non-relative path)
I think, maybe the added token mixes it all for chrome?:
?_adf.ctrl-state=q0l98h1nm_125
Problem:
All the styles and images are blocked form the site, nothing shows, only letters (but in firefox shows it perfectly)
As you see in the html tags, all the css files I have have relative paths and I think that the browser should already decide to attach it the proper protocol, i.e the main protocol of the request.
Question:
How to resolve the problem?
I'm using Django and the static media app, along with Nginx. For some reason the external stylesheet doesn't apply itself. However, when I click on it in the source file, it does indeed load the style.css file.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/style.css" %}" />
<!-- EVEN THIS DOESN'T LOAD HERE
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/style.css" />
-->
</head>
<body>
<!-- some stuff -->
</body>
</html>
Check the error log of Nginx (error.log). Sometimes it is on the path '/usr/local/nginx/logs/error.log'.
Load the page and then make in command line: "tail -n 20 /usr/local/nginx/logs/error.log". You can see the path on which Nginx tries to load your css file and error message if there is no such file on the path.
The pass and the name of file are both case-sensetive.
If your css file loads normally (you can see it, for example, by using firebug) then it is not a problem of Django. Definitely there is a mistake in HTML and/or in CSS.
I have a favicon on my website. It does not show up when i go to my login page, but works perfectly after logging in. I am using forms authentication on my website.
If the favicon is in your root directory, most browsers should display it automatically.
I visited the page and did not receive a favicon (as you suggested) but checked the source and noticed you do not link to the favicon explicitly. Try to add a line similar to the following in your own <head> section:
<link href='corbyhaas/favicon.ico' type='image/png' rel='icon' />
For more information, check out w3's How To Favicon.
Edit: This is the source I see for the head tag in your login page.
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Styles/masterstyle.css" />
<title>OnCall APP_ADMIN</title>
</head>
Obviously you're including the necessary information in the rest of your application; just do the same thing in whatever builds the <head> tag on the login page.