Raw Github js file not loading (direct link) like CDN

Asked 14/7, 2020 at 17:49 Answered 28/7, 2022 at 10:5

Solved javascript html github github-pages cdn

-2

I created a coding library for the public to use by putting a <script> tag in the <head> tag on the page but when I try to use the a function it says undefined when it ran.

. I linked the url to the index.js file but it doesn't load it to the client user.

<head>
<script src="https://github.com/<username>/<repo>/blob/master/index.js"></script>
</head>

When I run a console.log(ranInteger(1,10)) which I have defined in my index.js file but I get a ranInteger is not defined error. All help is welcome!

Larcenous answered 14/7, 2020 at 17:49 Comment(7)

the url is invalid, shows an error to me – Fancher 14/7, 2020 at 17:51

@nihiser — No, that's an HTML document showing a syntax highlighted version of the file. – Elrod 14/7, 2020 at 17:57

Github is not a web hosting service or CDN. It hosts Git repositories. If you want a CDN use CloudFront or something. – Elrod 14/7, 2020 at 17:57

I did try using github user content to the same problem @Elrod also people do use git as a download site for releases – Larcenous 14/7, 2020 at 18:0

@JoeMcMullan — No, different problem. Similar cause: Github is not a web hosting service or CDN. It hosts Git repositories. If you want a CDN use CloudFront or something. – Elrod 14/7, 2020 at 18:2

So you saying its impossible to do @Elrod ? – Larcenous 14/7, 2020 at 18:3

https://mcmap.net/q/66586/-how-to-load-javascript-files-from-github-externally-duplicate – Unstrained 14/7, 2020 at 18:3

Technically speaking, GitHub doesn't allow source code to be accessed from their site like a CDN, however from This StackOverflow Question, there is a workaround. I wouldn't recommend using it, but you can use "https://cdn.jsdelivr.net/gh/" to get your script to work (from user @anayarojo on StackOverflow).

The url in your case would look like this:

https://cdn.jsdelivr.net/gh/McJoe21/coderslib/index.js

The pattern for the URL is: https://cdn.jsdelivr.net/gh/<username>/<repository>/<file>

Unstrained answered 14/7, 2020 at 18:9 Comment(2)

@JoeMcMullan That's gonna be a separate problem. module.exports doesn't work as a vanilla javascript feature, module.exports is only going to work in a node.js runtime environment, so you can't just import it in a plain HTML page – Unstrained 14/7, 2020 at 18:33

But @Unstrained shouldn't the browser just ignore that part the do the rest – Larcenous 14/7, 2020 at 18:57

You cannot load JavaScript from raw version of Github because the content type(MIME type) is text/plain, not application/javascript or text/javascript. This is to stop you using Github as a CDN. Still you can achieve serving raw file as cdn in the following way, using cdn.jsdelivr.net.

https://cdn.jsdelivr.net/gh/<github-username>/<github-repo-name@branch-name>/<filename>

If file is at main branch, no need to include in branch section after @. If you mention also, it'll work.

For more reference

Discourage answered 28/7, 2022 at 10:5 Comment(0)

-1

The file you're attempting to import is a just GitHub viewer for the file. To import the raw data for the file, you'd want to use this code below:

<script>
   const source = 'https://raw.githubusercontent.com/<username>/<repo>/master/index.js';
   fetch(source).then((response) => {
      return response.text()
   }).then((response) => {
      eval(response);
   }).catch((error) => {
      console.error(`An error occured while attempting to load the "${source}" resource!`);
      console.error(error);
   });
</script>

Since the GitHub website does not directly allow the import of their user content, you will need to wrap your source URL in the above fetch-eval block to fetch the file content directly.

Drews answered 14/7, 2020 at 18:2 Comment(4)

This wouldn't work either: https://mcmap.net/q/66586/-how-to-load-javascript-files-from-github-externally-duplicate – Unstrained 14/7, 2020 at 18:3

@Unstrained i updated the response, this should work now. – Drews 14/7, 2020 at 18:9

Yep, just tested it. It works. Although "module is not define" came up, because i tested it in a browser. but i defined it and made exports a setter that console logged, and sure enough ,i got some output. – Drews 14/7, 2020 at 21:40

This answer is very old, and yeah, probably not gonna work anymore. But I'm sure there is a better solution out there than what I came up with – Drews 17/8, 2022 at 11:5

Recommended topics

Hot tags