Facing error "Failed to load resource: the server responded with a status of 404 (Not Found)" in web browse console

I was trying to follow this tutorial. At ‘10:40’ I see the blank page in web browser.
My server is running like the tutorial. When I checked the console of the webpage in the web browser. I saw that following errors:

Capture

How can I solve this issue?

This question has also been posted here:

If you can not see the photo. These are the errors on browser console:

p5.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Refused to execute script from ‘http://localhost:4000/p5.min.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
p5.dom.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Refused to execute script from ‘http://localhost:4000/addons/p5.dom.min.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
p5.sound.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Refused to execute script from ‘http//localhost:4000/addons/p5.sound.min.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
common.js:263 Uncaught ReferenceError: $st is not defined
at common.js:263

I am able to open index.html file in browser but drag and drop.
but it’s not opening through server.
I want it to open through server.

I have followed node.js method.

Can you please review the error I am getting?

  • If you’ve got “browser-sync” installed in node.js already: npm -g i browser-sync
  • Go to the folder your “index.html” file is.
  • Now, while holding down the SHIFT key, right-click somewhere empty.
  • An “Open Command Prompt Here” should show up as 1 of the options.
  • Once in the prompt, type in: browser-sync.
  • The default browser should open and your “index.html” should automatically run there.

I have done so. but it is not showing anything.

Still the same error is in console.

what can i try now?

You can still try out my own “index.html” file from the forum link I’ve posted in my 1st reply to you. :card_file_box:

I tried using your script, still it’s not working when i try to access it with server.

Maybe you can tell us how you setup your local server. What steps did you follow? Are they included in the video? Don’t forget to include your OS.

Notice that Shiffman’s example is one step advance. In your case, you can deliver a webpage via a local server first.

Kf

If you post your question to multiple sites, please link between the posts so we know what help you’ve already received. This question has also been asked here:

I am new to these forums and I was not aware of the code of conduct. I will keep this thing in mind from now.
Thanks.

Same steps as in videos.

this is my server codeserver

I think there is some issue with relative addressing in intex.html.

when i replaced the script line with <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js" type="text/javascript"></script> it started working. How to fix that?

this is the index.html file before this edit.

Hi
There are few things that could not be working here. It can be because of something you did or the editor. The good news is that it can be fixed. We just need more info.

First of all, it is great you tried another solution and you shared it with us. This really helps. My first question is: What editor are you using to edit your code? Are you running the code from this editor? I am guessing you are running the code directly from the browser via local host. I just want to confirm this.

Second question: Did you change the src entries in your index.html file to point to your javascript files? For instance, you have ../p5.min.js in your index.html file. Where is this javascript file located with respect to the index.html file? Are they in the same folder OR is the js file one folder below?

Things are a bit more tricky because you are trying to run this code via localhost. I do not have one setup right now, at least not one with express.

So the first thing to do is to check the javascript files location. If the src definition is pointing to the files properly, then the next step is to make sure you can run index.html directly by double clicking on the file. It should be launched in a new browser window and it should execute. Notice this is executing the file as a client, not running the local host environment.

Let us know if this helps.

Kf

  • AFAIK, p5js is a JS library which targets browsers, not servers! :surfing_man:
  • The server makes available the “.html” file which will load & run the “p5.js” file and its “.js” sketch. :construction_worker_man:
  • But it’s the browser accessing that server which actually runs all of those “.js” files. :running_man:

It seems Notepad++ to me. :spiral_notepad:

Hi, I am using sublime text editor for writing js and server.

I am running the server code through cmd window. and opening http//:localhost:3000 in google chrome and webpage doesn’t open.

but when I open index.html by double clicking it, it opens the webpage I designed.

This is how my directory looks like
the public folder has 2 files, sketch.js, and index.html.

Ok, just to make a distiction, which I know you know but I jsut want to state it to make sure we are in the same channel.

Clicking on the file and opening in a browser is a good test. You are running your html+js as most ppl commonly use it. You are using the browser to render the files. Just to confirm: The p5.min.js was accessed via url or targeting the file on your disk?

Now, your real intentions is to access your page using a local server. You are using express to spin the server and then you you try accessing the page via localhost. Two things:

  1. What command are you using to spin the server?
  2. Is it possible to try a different port number? Try either 12009 or 4900.

I can try setting the express tonight if changing the port doesn’t help. I do not have experience with express but it should work if you are following the same instructions provided by Dan.

Kf