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" target='_blank' href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
I get a 404 "Failed to load resource" error.
../ syntax appears to be correct, and my console shows that it's looking in the correct location in
Is there something I'm not doing correctly?
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".
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.