H
H
Herman Martin2019-07-16 21:21:36
Node.js
Herman Martin, 2019-07-16 21:21:36

How to connect bootstrap to a project?

there is such index.js

var express = require("express");
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

server.listen(3000);

app.get('', function(request, response){
  response.sendFile(__dirname + "/index.html");
});

I run in the console --> node index I
open localhost:3000 in the browser
and I get what is contained in index.html
and in this index.html there is a line:
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">

so, if you just open it from a local server (nginx), the notorious bootstrap is connected and the styles are applied.
If I just open localhost:3000, I get index.html, but the bootstrap does not connect ...
And the question is, is there a way to connect somehow this bootstrap, which I already installed using nmp, and which is already contained in node_modules, instead of to drag bootstrap files from the internet using the notorious
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton Shvets, 2019-07-16
@dklight

Put the infamous bootstrap.min.css next to index.html and load it into a link, obviously.
Well, or for an adult, get confused by the template assembly system.
The fact that you installed it using npm only means that the corresponding folder will be in node_modules, but these are server modules, and what the express will show will go to the front.
sendFile you are doing in vain, put express-static
https://expressjs.com/en/starter/static-files

D
Dmitry Belyaev, 2019-07-16
@bingo347

var express = require("express");
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

app.get('/bootstrap.min.css', (function() {
  // на другой машине bootstrap может установится в другое место
  // разрезолвим его путь средствами ноды и сохраним в замыкании
  var cssFile = require.resolve('bootstrap/dist/css/bootstrap.min.css');
  return function(req, res) {
    res.sendFile(cssFile);
  };
})());

app.get('/', function(request, response){
  response.sendFile(__dirname + "/index.html");
});

server.listen(3000);

well, in html now we will fix the path:<link rel="stylesheet" href="/bootstrap.min.css">

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question