how to include bootstrap in a node-express project
Question
the following code comes from code author . Basically it is a bootstrap/css project which i want to connect to backend. However, I can't find a way to render the bootstrap with the following code:
file form:
- fileName
- node_modules
- routes
- public.js
- views
- publicAssets
- css
- js
- img
- public.ejs
- publicAssets
- app.js
app.js
const express = require('express');
const app = express();
const port=4000;
const publicRouter = require('./routes/public');
const path = require('path');
app.listen(port,()=>{
console.log(`listening to port ${port}`);
});
app.set('view engine','ejs');
app.use(express.static(path.join(__dirname, 'views')));
app.use('/',publicRouter);
public.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSite Title</title>
<link rel="stylesheet" href="publicAssets/css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="top-bar">
<div class="row">
<div class="col-md-8 col-lg-9 d-flex breaking-news-bar">
<div class="breaking-title"><h6>Trending</h6></div>
<div class="owl-carousel owl-theme owl-loaded breaking">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item b-news-item"><a href="#">01.Lorem ipsum dolor sit amet.</a></div>
<div class="owl-item b-news-item"><a href="#">02.Lorem ipsum dolor sit amet.</a></div>
<div class="owl-item b-news-item"><a href="#">03.Lorem ipsum dolor sit amet.</a></div>
<div class="owl-item b-news-item"><a href="#">03.Lorem ipsum dolor sit amet.</a></div>
</div>
</div>
<div class="owl-nav">
<div class="owl-prev">
<i class="fas fa-angle-left"></i>
</div>
<div class="owl-next">
<i class="fas fa-angle-right"></i>
</div>
</div>
<!-- End breaking news -->
</div>
</div>
<div class="col-md-4 col-lg-3">
</div>
</div>
</div>
</header>
</div>
<script src="publicAssets/js/bootstrap.min.js"></script>
<script src="publicAssets/js/jquery-3.5.1.min.js"></script>
<script src="publicAssets/js/custom.js"></script>
<script src="publicAssets/js/owl.carousel.min.js"></script>
</body>
</html>
css works fine however i can't use bootstrap
4 answers
solution1
2 2020-10-18 09:42:48
There're several ways to include Bootstrap but all of them come down to the missing stylesheet in the <head> element of your public.ejs .
Also when you include your scripts, jquery-3.5.1.min.js should be placed in front of bootstrap.min.js because Bootstrap 4 depends on jQuery.
Method 1. Download and include all assets manually
This seems to be what your tutorial tries to do.
- Check that all assets are in place. If they are not, download them again. Your
publicAssetsfolder should include at the bare minimum:
- publicAssets
- css
- styles.css
- bootstrap.min.css
- js
- bootstrap.min.js
- jquery-3.5.1.min.js
- css
- Add the stylesheet:
<head>
...
<link rel="stylesheet" href="publicAssets/js/bootstrap.min.css"></link>
...
</head>
- Change the scripts order:
...
<script src="publicAssets/js/jquery-3.5.1.min.js"></script>
<script src="publicAssets/js/bootstrap.min.js"></script>
...
</body>
You should probably also download font-awesome as a local asset and use bundler like Webpack or Browserify when you are finished with development.
Method 2. Include it as a node module
- In command line type:
npm i bootstrap@latest jquery@latest
- Add the stylesheet
<head>
...
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
...
</head>
- Change your scripts to:
...
<script src="node_modules/node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
...
</body>
Keep in mind that this method pretty much requires using some kind of bundler but you probably will want to do it anyway.
Method 3. Include all assets as a link from CDN
Skip downloading assets altogether and use their web hosted versions:
<head>
...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
...
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
...
</body>
solution2
1 2021-11-26 12:39:19
include bootstrap and j Query by ruing
npm install bootstrap@latest jquery@latest
ornpm i bootstrap@latest jquery@latest
Now check your static middleware path
if app.use(express.static(__dirname)) its mean you are in main directory
include simple by giving path like<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
if your path is in some folder like if app.use(express.static(__dirname, "some folder" )) its mean you are in main directory
include simple by giving path like<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="../node_modules/node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Note: make sure your server file or app file in main directry
solution3
0 2020-10-18 02:51:06
只需在 head 标签中包含 css bootstrap cdn： <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head>
solution4
0 2022-05-22 05:35:01
If you're using Express, you may first add the following to your app.js
app.use(express.static(path.join(__dirname, "node_modules/bootstrap/dist/")));
Thanks to express.static() , a built-in middleware function in Express to serve static files, you may now make use of Bootstrap in your HTML pages by linking to it as
<link rel="stylesheet" href="./css/bootstrap.min.css">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.