Established nodejs, expressjs. I can not connect a local bootstrap to the html file. It does not work for localhost: 3000. If you run a separate index.html, then all local paths work.

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" type="text/css"> <title>Hello, world!</title> </head> <body> <div class="container"> <h1>Hello, world!</h1> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="node_modules/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>></script> <script src="node_modules/popper.js/dist/popper.min.js" type="text/javascript"></script>></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>></script> </body> </html>

package.json:

  { "name": "bootstrap-protipe", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "bootstrap": "^4.2.1", "express": "^4.16.4", "font-awesome": "^4.7.0", "fs": "0.0.1-security", "jquery": "^3.0.0", "popper.js": "^1.14.6" } }

Server starts app.js

  var express = require('express'); var app = express(); app.get('/', function (req, res) { res.sendFile( __dirname + '/index.html'); }) app.listen(3000, function () { console.log('Example app listening on port 3000!'); });
  • and any other local css turns to connect? P.S. - never node_modules anything in the node_modules folder - Dmytryk
  • So modules are installed by default in node_modules. Actually npm i - save bootstrap. - ncux199rus
  • it would be better if you answered the question you were asked - Dmytryk
  • I apologize. Another file can not be connected either. in the console, it gives an error - Refused to apply it from the localhost: 3000 / main.css for the MIME type ("text / html") - ncux199rus
  • 3
    To distribute files from a local server, it would not hurt to use express.static ('public'). public is the name of the directory on your server in which you would like to put some static files for distribution. Those. in the place where your index.js is located, you create a public folder, throw bootstrap.min.js into it. After that you add the following line to index.js: app.use (express.static ('public')) and that's it. Then you can in the index.html register in the src attribute of the script tag src = "bootstrap.min.js" and the file with the bootstrap should pull up - Nick Laptev

1 answer 1

Created the public directory in the main directory. Transferred to it index.html, and all files turned out about the following.

index.html

  <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <script src="vue.js"></script>

app.js

 var express = require('express'); var app = express(); app.use(express.static('public')) app.listen(3000, function () { console.log('Example app listening on port 3000!'); });