Failed to load resource (404) > Partly solved

How are you setting these scripts up? Are you importing them into resources and then compiling them using something like laravel mix? Or are you puttin them directly into the public folder and then trying to reference them that way?

@gillesdeb what happens when you load http://test.test/robots.txt ?

Hey @drewdan I've put the css and js scripts directly in the public folder and resources folder. The fonts I've put directly in the public folder.

I can't upload a pic here, but did so on imgur : https://imgur.com/a/BpxE9EI

Hey @laracoft!

Browser returns:

User-agent : *
Disallow:

@gillesdeb

http://test.test/public/fonts                   // this is a folder
http://test.test/js/vendor.min.js               // does `public/js/vendor.min.js` exists?
http://test.test/css/icons.min.css.map          // does `public/css/icons.min.css.map` exists?
http://test.test/css/app-dark.min.css.map       // does `public/css/app-dark.min.css.map` exists?
http://test.test/css/app.min.css.map	        // does `public/css/app.min.css.map` exists?

@laracoft

Well i though they exist I've added them with your help 2 days ago (shorturl.at/kJLU0) The folder yes, the other files : no vendor file found and nothing ending with a .map extension...

http://test.test/public/fonts // this is a folder --> Yes, but the folder contains all fonts (https://imgur.com/a/BpxE9EI)

http://test.test/js/vendor.min.js // does public/js/vendor.min.js exists?

-->No, I must have done something wrong here, do I just copy the whole js/vendor file from the bootstrap theme and paste that in the public folder? In this case do I also do that with the ui and pages folder (both are under the js folder of the theme)

--> same for the .map extensions... but i don't have files named like this 0_O so why does it look for a .map?

I probably did something wrong wednesday during the bootstrap integration :( Was so focussed on getting most of the layout right, but I assume I did not copy enough from the template. However there is so much to copy in that case that I don't know what is necessary to copy

https://imgur.com/a/K4TPVCr this is the whole theme folder

@gillesdeb

1. Look under the dist folder for the javascript that you are compiling/building
2. The map files are used to break up the JS/CSS files by the browser into the original separate files, usually for the purpose of debugging.
3. The font folder is a folder, you can't really load it in HTML, do you get what I mean?

@gillesdeb

You mentioned putting CSS and JS into the public/css and public/js, what files are you putting there? I mean if you don't have /js/vendor.min.js, then don't let it load inside the blade.php file.

@laracoft Oh no, I think I screwed up big...

To answer :

You mentioned putting CSS and JS into the public/css and public/js, what files are you putting there? 
I mean if you don't have /js/vendor.min.js, then don't let it load inside the blade.php file.

On Wednesday I only copied a few css and js assets from the bootstrap theme and pasted them first under resources css/ and js/.

This was wrong as I needed to put these in the public folder as it needs to be accessible for users (Hope this is right, as this is how I understood :p )

Regarding :

Look under the dist folder for the js that you are compiling/building

My god there are the missing files, but there are so many!!! with subfolders like pages/ui and vendor

the map files are used to break up the JS/CSS files by the browser into the original separate files.
Usualy for purpose of debugging.

Ah I see, well I have to admit these are indeed under the dist/assets/js folder...

The font folder, you can't really load it in html, do you get what i mean?

èh, not sure... I mean, the folder itself would be difficult to load as it contains several different fonts of which each fonts has approx 3 different extensions. But I assumed that the css stylesheet guides the browser to the correct font, but that seems to be just me making things up?

This is everything under the dist folder (https://imgur.com/a/3hoHVE1), can you explain me what I had to copy?

@gillesdeb

1. Start with your HTML, what does it want to load?
2. {{ asset('js/vendor.min.js') }} translates to loading http://domain.com/js/vendor.min.js, so you must make sure it exists in public/js/vendor.min.js
3. Repeat #2 for your fonts, CSS and JS.

@laracoft

Ok, I'll try step 1/2 for the css and js... makes sense

Can you explain me the following please :

• Although I understand that the files are missing as I clearly did not put them in the public folder. I did put all my fonts in the public/fonts folder and that throws an error too.

-- > What more is there to add (checked and this folder i did copy completely)

• On Wednesday I only copied a few css and js assets from the bootstrap theme and pasted them first under resources css/ and js/. This was wrong as I needed to put these in the public folder as it needs to be accessible for users (Hope this is right, as this is how I understood :p )

-- > Did I understand it indeed correctly or not?

• What happens when you load http://test.test/robots.txt ?

What sorcery is this! Am I correct that I'll need to check this later and remove it (for security)?

@gillesdeb

• For the fonts, you have to use Chrome's developer tools to figure out the exact URL it is trying to load. Show the error if you can't figure it out.

• robots.txt is required for proper setup of your website. I used that to verify that you have pointed your root folder of the domain correctly.

• your project is all good, just repeat 1, 2, 3 until all issues resolved.

@laracoft Ok, thnx for taking time and help me forward/understand better! You've helped me a lot already kind stranger, I'd buy you a beer irl!

@gillesdeb most welcome :)

@laracoft can I ask you a hint 😇

Regarding the fonts > So I think something is wrong with the path as you can see in the following screenshot (https://imgur.com/a/4G6w6c8)

So for a strange reason it doesn't detect the 'fonts'-folder (like it does with css/img/js). Also if I look under the network tab (chrome dev tool) the type is css (shouldn't that be eot/svg/ttf/woff)? and transfer size = --, time 35,4ms

* Any hint?

Lastly, step 1-3 -> excellent, I got all the errors removed now but 2 new ones came up by themselves. See here ( https://imgur.com/a/4G6w6c8 )

* Is this a sign some files are still missing?

@gillesdeb

1. Can't see your first screenshot, but font file is just like any other file.
2. Your 2 errors seem to be some bootstrap issue. did you copy them from dist folder? Only files from dist folder can be used.

Hey @laracoft!

• No matter what I try, the same error keeps showing up. No matter how I change my path

All fonts are stored in public/fonts

It throws the error 'failed to load resource: server responded with a 404 -> http://test.test/fonts

-> whenever I change my path, the 404 error adjusts to the path...

• Yes both errors are bootstrap issues, although 1 refers to bootstrap.js which I deleted (not added by me) and the error still comes up :-D like wth??

The other error is a syntaxerror, unexpected token ':' -> checked the js file, but no :-type or anything...

What can I show you / give you in order to help me resolve the fonts path?

Should I really care about the 2 bootstrap errors?

@gillesdeb

I have trouble reading your message, which is a question which is a quote etc.. please use markdown to format them properly

This URL http://test.test/fonts not load, what is the FULL URL that is giving the problem?

@laracoft

❗️Apologies for that ❗️

This URL http://test.test/fonts not load, what is the FULL URL that is giving the problem?

Isn't that the full URL? Basically in Chrome dev tools it shows as a css-file instead of a folder that can be expanded and containing the different fonts. See : https://imgur.com/a/ujrkpLD

@gillesdeb

Show the full CSS of http://test.test/public/fonts

@laracoft

<link rel="stylesheet" href="{{ asset('fonts') }}">

Sorry i changed it, example before was:

<link rel="stylesheet" href="{{ asset('public/fonts') }}">

Otherwise I have no idea what you mean with 'show full css' -> "fonts" is a folder under public that contains all the fonts

@gillesdeb

<link rel="stylesheet" href="{{ asset('public/fonts') }}"> a stylesheet cannot be a folder. It must be CSS.

@laracoft So for every font I would need to do like :

<link rel="stylesheet" href="{{ asset('fonts/dripicons-v2.eot') }}">
<link rel="stylesheet" href="{{ asset('fonts/dripicons-v2.svg') }}">
etc

I can do

<link href="{{ asset('fonts' ) }}">

But the font are not loaded

@gillesdeb no, see here https://www.w3schools.com/css/css3_fonts.asp

This was not necessary, tried another way to set it up (importing resources and compile using laravel mix). Works like a charm now; no additional tweaking was needed