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_ponents
    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_ponents/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_ponents/bootstrap/dist/css/bootstrap.min.css.

Is there something I'm not doing correctly?

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_ponents
    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_ponents/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_ponents/bootstrap/dist/css/bootstrap.min.css.

Is there something I'm not doing correctly?

• javascript
• html
• css
• browser-sync

2 Answers 2

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

You can:

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

Since root directory of your application is src folder, you can still load from bower_ponents using the link

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

configure you browserSync.init this way

browserSync.init({
        server: {
                baseDir :"src",
                routes:{
                    "/bower_ponents" : "bower_ponents"
                }
        }