Issue
I’m new to web dev’ and during my semester we were asked to build a website with node-js & express, we (my team & I) got this website template just to save work on design and work on functionality and it came with bootstrap.min.js, bootstrap.min.css & jquery-2.1.1.js files.
Now in my index.ejs file they are referenced to the local directory like:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>JSAS</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
...
...
...
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>But I don’t see any reason to have them locally when I can just reference them from Bootstrap & jQuery CDN’s after installing them with npm.
When I try it, for example I now change the jQuery src to (& deleting the local jQuery file)
<script>src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
it still works as intended, it’s only when I add the link ref & sec from bootstrapCDN that the functionality seems to break (both on css level and jQuery).
This is my attempt in index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>JSAS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
...
...
...
<!-- script tags
============================================================= -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
<!-- <script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script> -->
<script src="js/custom.js"></script>
<script src="js/smoothscroll.js"></script>
</body>
</html>index.js:
const express = require('express')
const appPort = process.env.PORT || 4000
const app = express()
var path = require('path')
//Setting up Handlebars
app.set('view engine', 'ejs')
app.use(express.static(path.join(__dirname, '/views/')))
app.set('views', __dirname + '/views/')
app.use('/css', express.static(__dirname + '/css'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))
//routing
app.get('/', (req, res) => {
res.render('index', { title: 'Home Page' })
})
/* other pages
app.get('/login', function (req, res) {
res.render('login', { title: 'login' })
})
app.use(function (req, res, next) {
// you can do what ever you want here
// for example rendering a page with '404 Not Found'
res.status(404)
res.render('404', { error: 'Not Found' })
})
*/
//Creating a connection
app.listen(appPort, () => {
console.log(`App is running. serve at port: ${appPort}`)
console.log(`http://127.0.0.1:${appPort}`)
})
This is how it looks when it’s broken – https://imgur.com/7FlMuXr
This is the intended look & feel – https://imgur.com/ZdySJIT
If you need anything else just ask.
Thank you!
BTW, is there any way to not have duplicate src references in each ejs file? like import it from a single one.
Solution
Ok I got it to work, I thought Bootstrap is backwards compatible and I used version 4 instead of 3.