I've successfully set up a project and incorporated Bootstrap via npm. However, I'm facing challenges in loading the necessary javascript files for Bootstrap components. It's important to note that I am utilizing a Vagrant Box (virtual machine) to host the project. Additionally, I have browser-sync plugin configured which initiates a mini-server referencing the one from the VM. Hopefully, my explanation is clear!
Index file (located in the public folder)
<div class="carousel-inner" data-slide-to="2">
<div class="carousel-item active">
<img class="d-block w-100 " src="images/logo.jpeg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/01.jpeg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/02.jpeg" alt="Third slide">
</div>
</div>
</div>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/popper.js/dist/umd/popper.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Package.json file
{
"name": "bstrap",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build-task:scss-compile": "node-sass-chokidar --source-map true scss -o public/css",
"build-task:autoprefixer": "postcss public/css/*.css --use autoprefixer postcss-nested -d public/css",
"sass:build": "npm-run-all -p build-task:*",
"sass:watch": "chokidar \"scss/**/*.scss\" -c \"npm run sass:build\"",
"sass:browsersync": "browser-sync start --proxy \"strap.test\" --files \"public\"",
"dev": "npm-run-all -p sass:*"
}
Console errors