CODEWITHSUNDEEP
jquerycssnode.jsexpressbootstrap-4
shauna vayne
shauna vayne

Reputation: 169

how to include bootstrap in a node-express project

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:

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

Upvotes: 1

Views: 4036

Answers (4)

yansusanto
yansusanto

Reputation: 480

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">

Upvotes: 0

Muhammad Azam
Muhammad Azam

Reputation: 264

include bootstrap and j Query by ruing
npm install bootstrap@latest jquery@latest
or
npm 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

Upvotes: 1

genechk
genechk

Reputation: 389

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.

  1. Check that all assets are in place. If they are not, download them again. Your publicAssets folder should include at the bare minimum:
  • publicAssets
    • css
      • styles.css
      • bootstrap.min.css
    • js
      • bootstrap.min.js
      • jquery-3.5.1.min.js
  1. Add the stylesheet:
<head>
  ...
  <link rel="stylesheet" href="publicAssets/js/bootstrap.min.css"></link>
  ...
</head>
  1. 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

  1. In command line type:

npm i bootstrap@latest jquery@latest

  1. Add the stylesheet
<head>
  ...
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
  ...
</head>
  1. 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>

Upvotes: 2

Alex Yepes
Alex Yepes

Reputation: 1195

Just include the css bootstrap cdn inside your head tag: <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head>

Upvotes: 0

Related Questions