I recently deployed my website to GitHub Pages - https://max-stevenson.github.io/my-year-in-books/
I have a two local JavaScript libraries (jQuery and swiped-events) downloaded and within the following directory: src/public/js/lib.
In my index.html file at the root directory, I am linking to the two libraries like so:
<script type="text/javascript" src="/src/public/js/lib/jquery-3.4.1.min.js"></script>
<script src="/src/public/js/lib/swiped-events.js"></script>
But when I access the page on GitHub Pages I get the following errors:
GET https://max-stevenson.github.io/src/public/js/lib/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found)
GET https://max-stevenson.github.io/src/public/js/lib/swiped-events.js net::ERR_ABORTED 404 (Not Found)
When I run a local instance on my machine via a node express server and visit the site at localhost:3000, everything works great.
Can anyone please advise me where I'm going wrong and how to correctly reference my scripts so that they are loaded in GitHub Pages?
Try:
<script type="text/javascript" src="/my-year-in-books/scr/js/lib/jquery-3.4.1.min.js"></script
Or:
<script type="text/javascript" src="./scr/public/js/lib/jquery-3.4.1.min.js"></script
I have this html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
rel="stylesheet"
href="../../../static/css/style.css"
type="text/css" />
<link
rel="stylesheet"
href="../../../static/css/user_header.css"
type="text/css" />
<!--suppress HtmlUnknownTarget -->
<link rel="shortcut icon" href="/favicon.png">
<script type="module" src="../../../static/js/node_connect.js" ></script> <-- Error
<script src="../../../static/lib/jquery.min.js"></script>
<script src="../../../static/lib/selfserve.js"></script>
</head>
The problematic bit is the node_connect.js file. When starting the Flask web tool locally (Python 3.7.2), the following error is given in the console when opening the page:
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain".
Strict MIME type checking is enforced for module scripts per HTML spec.
Checking the headers:
Content-Type: text/plain; charset=utf-8
However, on production (when started through Gunicorn) it gives this:
Content-Type: application/javascript; charset=utf-8
I am guessing the web-server (Apache) serves them in the production case, but another thing is when testing other pages of this web tool, they all work all and load
the javascript files correctly (even if their content-type is text/plain). However the difference is, I noticed,
in the type.
This works in my case:
<script src="../../static/js/translator/library/materialize.js"></script>
Or this:
<script type="application/javascript" src="../../static/js/translator/library/materialize.js"></script>
Of course, I tried this for the problematic javascript file and received the following error (which means it now loaded):
Uncaught SyntaxError: Cannot use import statement outside a module
This, as far as I researched, basically means I need to set the type to module (however this makes the browser decline the .js file).
Could anyone please help me with this?
Problem is caused by how flask is guessing content type of each static file.
To do that flask imports mimetypes and calls mimetype, encoding = mimetypes.guess_type(download_name)
This module creates a database of known mime types from several sources and uses it to return mime type.
Under Linux and MacOS mimetypes.py looks inside files:
knownfiles = [
"/etc/mime.types",
"/etc/httpd/mime.types", # Mac OS X
"/etc/httpd/conf/mime.types", # Apache
"/etc/apache/mime.types", # Apache 1
"/etc/apache2/mime.types", # Apache 2
"/usr/local/etc/httpd/conf/mime.types",
"/usr/local/lib/netscape/mime.types",
"/usr/local/etc/httpd/conf/mime.types", # Apache 1.2
"/usr/local/etc/mime.types", # Apache 1.3
]
But under Windows it looks inside the registry:
with _winreg.OpenKey(_winreg.HKEY_CLASSES_ROOT, '') as hkcr:
for subkeyname in enum_types(hkcr):
try:
with _winreg.OpenKey(hkcr, subkeyname) as subkey:
# Only check file extensions
if not subkeyname.startswith("."):
continue
# raises OSError if no 'Content Type' value
mimetype, datatype = _winreg.QueryValueEx(
subkey, 'Content Type')
if datatype != _winreg.REG_SZ:
continue
self.add_type(mimetype, subkeyname, strict)
So to fix the problem of flask thinking that .js file was actually text/plain all that's necessary is to open regedit and adjust this registry key to application/javascript:
LK"I
Here's another trick without needing to change anything in registry:
put this before importing flask:
# fix windows registry stuff
import mimetypes
mimetypes.add_type('application/javascript', '.js')
mimetypes.add_type('text/css', '.css')
I'm having similar trouble around a .js export class which contains a vanilla js web component with an integrated template, itself having jinja2 escape sequences.
So, you may not get the same error with the first script statement using url_for as I did.
This appears to load as no error is raised by the templating engine...
<script type="module" src="{{ url_for('static', filename='interval_table.js') }}"></script>
... but Firefox console reports error: Loading module from “http://127.0.0.1:8000/static/interval_table.js” was blocked because of a disallowed MIME type (“application/json”).
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
I thought to get around the json error with the following, but it results in a jinja2 error, could not create endpoint:
<script type="module" src="{{ url_for('auth/interval_table.js') }}"></script>
This doesn't look like a CORS issue, and lots of digging has yielded no results. A new question may be necessary.
Instead of using type="module" you are able to use the defer attribute to achieve the same effect. Ie: The script will not be executed until the page finishes loading.
<script defer src="flong.js"></script>
I'm unsure if it helps, but I had a similar problem and it was solved by changing the module js extension from .js to .mjs. I don't think Flask can see the difference, unlike Node.js, without the different extensions.
I know this is an old thread, but I had a similar problem that was solved using the method I mentioned.
I didn't see this before I posted, but my thread is here:
Flask Server Not Sending JS Module Script
Harel Ashwal, Thank you so much. I was unable to load the external CSS file on flask because of a mimetype error, and this bit you shared fixed it for me:
# fix windows registry stuff
import mimetypes
mimetypes.add_type('application/javascript', '.js')
mimetypes.add_type('text/css', '.css')
Running my ROR app with Puma locally. Getting the following error trying to load javascript/application.js
Failed to load resource: the server responded with a status of 404 (Not Found) javascript/application.js
Keep in mind this was a Ruby 1.9.3 app that I just updated the GEM file to 2.3.1
Does anything need to be changed when running a Rails app locally?
The source code shows
<script src="/javascripts/application.js"></script>
<link href="/bootstrap.min.css" rel="stylesheet">
<link href="/bootstrap-responsive.min.css" rel="stylesheet">
Locally, javascript files should be under app/assets/javascripts. They will be compressed, minified and copied into public during assets compilation (deployment)
Looks like there's no js files under /public/javascripts hence the 404 error you are getting.
It's also worth checking that you are starting the app in development mode. Otherwise, rails will look into public for js and css files.
See https://guides.rubyonrails.org/asset_pipeline.html#asset-organization for more details.
As I can see in my projects there is this kind of path
/assets/js/...
but maybe earlier was diffrent convetion.
Do you use static assets or dynamic on local ?
I am new to NodeJs and WebStorm. I have created a new "Node.Js Express App" using ejs template. I have created a Scripts folder inside my app root directory and trying load those files on my index.ejs file inside views folder.
When I run page in Chrome, it gives the following 404 error. For example, in my index.ejs body tag file, if I say:
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
It will give following error:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
I works fine in public folder by why it doesn't work if scripts and files are outside the public folder?
I am using google drive to host the following website:
https://e8edf64c16f714a3eb501e781f477ae636ff655a.googledrive.com/host/0B-CU-bHZqNGdeWd1RTlZd0xGUFU
I have the following code in my index.html file:
<!-- These are my resources -->
<link rel="stylesheet" href="resources/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css"/>
<script src="resources/jquery-2.0.2.js"></script>
<script src="resources/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<script src="resources/jquery-ui-1.10.4.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
But i am getting this console error
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I am not sure what is going on here, this use to work just fine.