I encountered an error in my project when trying to reference CSS and JS files.
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.min.css
This is how my file structure looks like:
app
|bower_components
|bootstrap
|dist
|css
| bootstrap.min.css
|jquery
|dist
|jquery.min.js
|build
|config
|node_modules
|src
|static
|index.html //The file where I am facing the error
public //I am using Slim framework with PHP for RESTful API
src
vendor
In my index.html file, this is how I am trying to reference the bootstrap.min.css file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
I am using Visual Studio Code, which allows me to CTRL+click on the link to bootstrap.min.css file and it loads fine. So I'm not sure what I did wrong here?
My project involves using vue.js CLI in the app folder and utilizing the Slim Framework with PHP for generating a RESTful API in the public/src/vendor folders. Any assistance would be highly appreciated.