I’m trying to deploy a website I’ve built with bootstrap and sass. 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. 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 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?.
My Website name: statuesque-rolypoly-70bd47.netlify.app
Build Log: 4:14:56 PM: Build ready to start
4:14:58 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)
4:14:58 PM: build-image tag: v4.8.0
4:14:58 PM: buildbot version: d7330f24833f29d0263d28116347ab83094a2561
4:14:58 PM: Fetching cached dependencies
4:14:58 PM: Failed to fetch cache, continuing with build
4:14:58 PM: Starting to prepare the repo for build
4:14:58 PM: No cached dependencies found. Cloning fresh repo
4:14:58 PM: git clone https://github.com/DimenDev/Snap-VR
4:14:59 PM: Preparing Git Reference refs/heads/master
4:14:59 PM: Parsing package.json dependencies
4:15:00 PM: Starting build script
4:15:00 PM: Installing dependencies
4:15:00 PM: Python version set to 2.7
4:15:01 PM: Downloading and installing node v16.15.1...
4:15:01 PM: Downloading https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz...
4:15:02 PM: Computing checksum with sha256sum
4:15:02 PM: Checksums matched!
4:15:04 PM: Now using node v16.15.1 (npm v8.11.0)
4:15:04 PM: Started restoring cached build plugins
4:15:04 PM: Finished restoring cached build plugins
4:15:04 PM: Attempting ruby version 2.7.2, read from environment
4:15:05 PM: Using ruby version 2.7.2
4:15:06 PM: Using PHP version 8.0
4:15:06 PM: No npm workspaces detected
4:15:06 PM: Started restoring cached node modules
4:15:06 PM: Finished restoring cached node modules
4:15:06 PM: Installing NPM modules using NPM version 8.11.0
4:15:07 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
4:15:07 PM: npm WARN config location in the cache, and they are managed by
4:15:07 PM: npm WARN config [`cacache`](http://npm.im/cacache).
4:15:07 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
4:15:07 PM: npm WARN config location in the cache, and they are managed by
4:15:07 PM: npm WARN config [`cacache`](http://npm.im/cacache).
4:15:08 PM: added 19 packages, and audited 20 packages in 659ms
4:15:08 PM: 4 packages are looking for funding
4:15:08 PM: run `npm fund` for details
4:15:08 PM: found 0 vulnerabilities
4:15:08 PM: NPM modules installed
4:15:08 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
4:15:08 PM: npm WARN config location in the cache, and they are managed by
4:15:08 PM: npm WARN config [`cacache`](http://npm.im/cacache).
4:15:08 PM: Started restoring cached go cache
4:15:08 PM: Finished restoring cached go cache
4:15:08 PM: Installing Go version 1.17
4:15:13 PM: unset GOOS;
4:15:13 PM: unset GOARCH;
4:15:13 PM: export GOROOT='/opt/buildhome/.gimme_cache/versions/go1.17.linux.amd64';
4:15:13 PM: export PATH="/opt/buildhome/.gimme_cache/versions/go1.17.linux.amd64/bin:${PATH}";
4:15:13 PM: go version >&2;
4:15:13 PM: export GIMME_ENV="/opt/buildhome/.gimme_cache/env/go1.17.linux.amd64.env"
4:15:13 PM: go version go1.17 linux/amd64
4:15:13 PM: Installing missing commands
4:15:13 PM: Verify run directory
4:15:14 PM:
4:15:14 PM: ────────────────────────────────────────────────────────────────
4:15:14 PM: Netlify Build
4:15:14 PM: ────────────────────────────────────────────────────────────────
4:15:14 PM: Creating deploy upload records
4:15:14 PM:
4:15:14 PM: ❯ Version
4:15:14 PM: @netlify/build 27.1.3
4:15:14 PM:
4:15:14 PM: ❯ Flags
4:15:15 PM: Starting post processing
4:15:14 PM: baseRelDir: true
4:15:14 PM: buildId: 62a254c058a870027c7d11a0
4:15:14 PM: deployId: 62a254c058a870027c7d11a2
4:15:14 PM:
4:15:15 PM: Post processing - HTML
4:15:14 PM: ❯ Current directory
4:15:14 PM: /opt/build/repo
4:15:14 PM:
4:15:14 PM: ❯ Config file
4:15:15 PM: Post processing - header rules
4:15:14 PM: No config file was defined: using default values.
4:15:14 PM:
4:15:14 PM: ❯ Context
4:15:14 PM: production
4:15:15 PM: Post processing - redirect rules
4:15:14 PM:
4:15:14 PM: ────────────────────────────────────────────────────────────────
4:15:14 PM: 1. Build command from Netlify app
4:15:15 PM: Post processing done
4:15:14 PM: ────────────────────────────────────────────────────────────────
4:15:14 PM:
4:15:14 PM: $ ls
4:15:14 PM: dist
4:15:14 PM: index.html
4:15:14 PM: node_modules
4:15:14 PM: package.json
4:15:14 PM: package-lock.json
4:15:14 PM: src
4:15:14 PM:
4:15:14 PM: (build.command completed in 12ms)
4:15:14 PM:
4:15:14 PM: ────────────────────────────────────────────────────────────────
4:15:14 PM: 2. Deploy site
4:15:14 PM: ────────────────────────────────────────────────────────────────
4:15:14 PM:
4:15:14 PM: Starting to deploy site from '/'
4:15:14 PM: Creating deploy tree
4:15:15 PM: 0 new files to upload
4:15:15 PM: 0 new functions to upload
4:15:15 PM: Site deploy was successfully initiated
4:15:15 PM:
4:15:15 PM: (Deploy site completed in 203ms)
4:15:15 PM:
4:15:15 PM: ────────────────────────────────────────────────────────────────
4:15:15 PM: Netlify Build Complete
4:15:15 PM: ────────────────────────────────────────────────────────────────
4:15:15 PM:
4:15:15 PM: (Netlify Build completed in 249ms)
4:15:15 PM: Caching artifacts
4:15:15 PM: Started saving node modules
4:15:15 PM: Finished saving node modules
4:15:15 PM: Started saving build plugins
4:15:15 PM: Finished saving build plugins
4:15:15 PM: Started saving pip cache
4:15:15 PM: Finished saving pip cache
4:15:15 PM: Started saving emacs cask dependencies
4:15:15 PM: Finished saving emacs cask dependencies
4:15:15 PM: Started saving maven dependencies
4:15:15 PM: Finished saving maven dependencies
4:15:15 PM: Started saving boot dependencies
4:15:15 PM: Finished saving boot dependencies
4:15:15 PM: Started saving rust rustup cache
4:15:15 PM: Finished saving rust rustup cache
4:15:15 PM: Started saving go dependencies
4:15:16 PM: Finished saving go dependencies
4:15:17 PM: Build script success
4:15:18 PM: Site is live ✨
4:15:51 PM: Finished processing build request in 52.697224977s
It looks like you didn’t actually load the bootstrap javascript from NPM, you have just imported sass. From the bootstrap documentation:
const bootstrap = require('bootstrap') or import bootstrap from 'bootstrap' will load all of Bootstrap’s plugins onto a bootstrap object. The bootstrap module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the /js/dist/*.js files under the package’s top-level directory.
If you don’t know how to compile javascript or how js imports work, it might be more fitting to load the bootstrap javascript through a CDN:
I just did what you suggested and used the CDN. It worked without problems. I’m learning and practicing right now, so I apologize for the silly mistake.