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')
I am new in elixir development. I have couple sounds and js files which I add to my assets folder. When I am trying to access them I got an error
GET http://127.0.0.1:4000/js/calls.js 404 (Not Found)
call:1 GET http://127.0.0.1:4000/sounds/ringtone.wav
call:1 GET http://127.0.0.1:4000/sounds/ringbacktone.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/assets/sounds/dtmf.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/assets/sounds/ringtone.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/assets/sounds/ringbacktone.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/sounds/dtmf.wav 404 (Not Found)
But the sound files already in assets folder and conn.js also in js folder. This is sample code how can I connected call.js to html
<script src="<%= static_path(#conn, "/js/call.js") %>"></script>
From the book which I read I understood that if I want to make task management in phoenix for creating app.js I should need to use brunch. But in my situation I want to use javascript and sound files as seperate without task manager. My first question how can I access to javascript and sound files in phoenix? My second question as you can from the error list above it tryed to access to twice dtmf.wav file and other files. But inside of the html code I wrote this in one place why it tried to check this in two folders?
call:1 GET http://127.0.0.1:4000/assets/sounds/dtmf.wav 404 (Not Found)
call:1 GET http://127.0.0.1:4000/sounds/dtmf.wav 404 (Not Found)
In your endpoint.ex file, i believe you need to add the folder of your sounds.
lib -> AppName -> endpoint.ex
plug Plug.Static,
at: "/", from: :heaped, gzip: false,
only: ~w(css fonts images sounds js favicon.ico robots.txt)
If sounds is the name of the folder. :-)
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 have been developing a small app with Sinatra. Locally it works fine but when I deploy it Heroku my JavaScript paths seem to break and I have no idea what is causing this.
My directory set up is I have a "assets" folder in the root of my application with separated folders for both scripts and styles. The scripts folder has a few subdirectories. I have set my public folder in Sinatra using:
set :public_folder, __DIR__ + '/assets'
My styles work correctly and I am drawing a blank on what the problem is. Also worth noting I am using requirejs to load my JavaScript.
Here is the output from the console:
GET http://evening-hamlet-5644.herokuapp.com/scripts/utils/libraries/jquery.js 404 (Not Found) require.min.js:1884
GET http://evening-hamlet-5644.herokuapp.com/scripts/utils/templating/hogan.js 404 (Not Found) require.min.js:1884
2
Uncaught Error: Script error
http://requirejs.org/docs/errors.html#scripterror require.min.js:194
GET http://evening-hamlet-5644.herokuapp.com/scripts/utils/libraries/lodash.js 404 (Not Found) require.min.js:1884
Uncaught Error: Script error
http://requirejs.org/docs/errors.html#scripterror require.min.js:194
GET http://evening-hamlet-5644.herokuapp.com/scripts/utils/libraries/pusher.js 404 (Not Found) require.min.js:1884
Uncaught Error: Script error
http://requirejs.org/docs/errors.html#scripterror
Any help or a kick in the right direction would be great.
Thanks
You could run a console with the heroku toolbelt (something like heroku run bash --app <your app name>) and verify if you have your JS files up.
Greetings!
I'm not a Sinatra hacker, but I don't find any DIR in their docs. Try setting DIR to
File.dirname(__FILE__), which I do see in their docs
It would help if you posted the Sinatra code that renders the links to the javascript files (ie. haml views etc).
However, without the code, I have a feeling it may be because you should be using Sinatra's url helper. If that's not it, and you post your code, I'll take another look.