Thassa Thassa - 5 months ago 39
HTML Question

Failed to load resource from bower_components even with correct file path

I'm running into some frustrating 404 errors while working on a web project. I'm using this file structure for my CSS and JS files:

bower_components
bootstrap
|dist
|css
| bootstrap.min.css
angular
|angular.min.js
jquery
|dist
|jquery.min.js
dist
lib
|farbtastic.js
node_modules
src
|img
|styles
|scripts
|view1
|view2
|index.html //running browserSync from this folder using this file as index


When I try to reference files in
index.html
using the appropriate syntax:

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">


I get a 404 "Failed to load resource" error.

The
../
syntax appears to be correct, and my console shows that it's looking in the correct location in
http://localhost:3000/bower_components/bootstrap/dist/css/bootstrap.min.css
.

Is there something I'm not doing correctly?

Answer

The root directory of your application is the "src" folder. When you request bootstrap.min.css from "../bower_components/", you are telling the browser to go 1 level up. Because you are already at the root of the application, "../bower_component" is essentially doing the same as "bower_component".

You can:

1. move your index.html 1 level up
2. move your bower_components inside src
3. have some kind of build(gulp/grunt) to reorganize them in a way where the bower_components is within the root folder.