expressでbootstrapのインストール方法

Question

express-generatorで作成したexpressのプロジェクトにbootstrapを入れる方法が分かりません

index.ejsのは次のように書いていますが、ブラウザで確認すると404が返って来ます

  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

npmインストールは行っており、node_modulesにはコードが入っている状況です。

404が返ってこずに正常に動くようにするにはどうすれば良いのでしょうか。

Answer 1

候補1

var app = express();

// 中略

app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js/bootstrap.min.js'));
//他の２つ省略

<script src="/js/bootstrap.min.js"></script>
//他の２つ省略

動作未確認の一例ですが、こんな感じでいけませんか？

参考

http://expressjs.com/en/starter/static-files.html

To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:

app.use('/static', express.static('public'))

Now, you can load the files that are in the public directory from the /static path prefix.

http://localhost:3000/static/images/kitten.jpg

http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:

app.use('/static', express.static(path.join(__dirname, 'public')))

候補2

  <!- こちらではなく ->
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

  <!- こちら？ ->
  <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

それか、単にパスの指定が間違っている可能性有り

候補3

普通にcdnを使うのが手っ取り早いですね。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

追記

類似したこちらの解決済み質問(express.staticの使用方法)も参考になさってみてください。