[Node.js] Express EJS에 BootStrap 적용하기

Express EJS에 부트스트랩(BootStrap) 적용하는 방법

 

Express EJS를 View로 활용하면서 부트스트랩을 적용할 수 있을까 찾아봤더니 있다.

오늘은 EJS에 부트스트랩(BootStrap) 적용하는 방법에 대해 기록한다.

https://getbootstrap.com/

Bootstrap

---

 

1. bootstrap 설치

 

# npm install bootstrap --save
# npm install bootstrap@3.4 --save

위 명령어를 통해 BootStrap을 설치한다.

설치가 완료되면 package.json의 디펜던시에 bootstrap이 추가된다. 

---

 

2. BootStrap 적용

 

 

매번 app.js를 손보는 것은 좋지 않기 때문에 라우터에 vendors 라우터를 추가해보도록 한다.

./routes/ 경로에 vendors.js 파일을 생성하고 아래 코드를 입력한다.

/* ./routes/vendors.js */

var express = require('express');
var router = express.Router();
var path = require('path'); 
router.use('/bootstrap', express.static(path.join(__dirname,"../node_modules/bootstrap/dist")));
 
module.exports = router;

이제 새로운 것이 추가되면 vendors.js에 한 줄 추가해주기만 하면 된다.

 

BootStrap을 사용할 HTML에서는 아래 코드를 링크하여 사용한다.

<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-grid.min.css' />
<link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap-reboot.min.css' />
<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>

 

 

---

jQuery 적용

예시로 jQuery도 추가해 보도록 한다.

# npm install jquery --save

위 명령어로 jQuery 설치 후 아래 한줄을 vendors.js에 추가해주도록 한다.

router.use('/jquery', express.static(path.join(__dirname,"../node_modules/jquery/dist")));

사용할 HTML에 추가한다.

<script src="/vendors/jquery/jquery.min.js "></script>