I'm trying to deploy a website I've built with bootstrap and sass on netlify through Github.
I used npm to install sass and bootstrap.
The page works ok on my local machine. When I deploy it, everything seems to work except for the javascript of the mobile menu. Seems like the javascript from bootstrap is not working I created a .gitignore for the node_modules folder.
Once the site is deployed I get an error on the console " Failed to load resource: the server responded with a status of 404 ()" and the javascript is not working. I've tried committing the node_modules folder to the GitHub repository even though I've read it is a bad practice, but it didn't work either.
When I download the deployment file from netlify, I see the node_modules folder is not there.
Maybe I need to get the bootstrap js folder out of the node_modules folder? But what is the point of using npm to install bootstrap if that is the case?
Here is my package.json file:
{
"name": "snap-website-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"sass": "^1.52.1"
},
"dependencies": {
"bootstrap": "^5.1.3"
}
}
EDIT:
I fixed the problem by adding the CDN script tag to my HTML file. I think the problem was that I was linking to the bootstrap.js inside the node_modules folder. Maybe downloading the source files and including them as folders on the project would also solve it.
I'm still curious about this behavior. I thought once you deployed, the server runs npm install to get all the dependencies (bootstrap in this case)