Sử dụng npm cho các dependencies phía máy khách
Với các mẫu tại chỗ, bước tiếp theo là thêm một vài style. Hơn là tạo một style sheet, nó là dễ dàng hơn để sử dụng
lại các styles đang tồn tại, và bạn thậm chí có thể làm cái này với npm! Khung phía máy khách Bootstrap thông dụng
(http://getbootstrap.com/) là có sẵn trên npm (http://www.npmjs.com/package/bootstrap), nên thêm nó vào dự án này:
npm install bootstrap –save
Nếu bạn nhìn vào node_modules/bootstrap/, bạn sẽ thấy nguồn cho dự án Bootstrap. Sau đó, trong thư mục dist/css, bạn
sẽ thấy các files CSS cái đi với Bootstrap. Để sử dụng cái này trong dự án của bạn, bạn cần có thể phục vụ các files
tĩnh.
Phục vụ các file tĩnh
Khi bạn cần gửi Javascript, các ảnh, và CSS phía máy khách quay trở lại trình duyệt, Express có một vài middleware tích
hợp gọi là express.static. Để sử dụng nó, bạn trỏ nó tại một thư mục cái chứa các files tĩnh, và các files đó sau đó
sẽ có sẵn tới trình duyệt.
Gần đỉnh file ứng dụng Express chính (index.js), có một vài dòng cái load middleware được yêu cầu bởi dự án:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
Để load CSS của Bootstrap, sử dụng express.static để đăng kí file tại URL đúng:
app.use(
‘/css/bootstrap.css’,
express.static(‘node_modules/bootstrap/dist/css/bootstrap.css’)
);
Bây giờ bạn có thể thêm /css/bootstrap.css vào các mẫu của bạn để nhận một vài styles Bootstrap đẹp. Sau đây là
views/head.ejs trông là gì:
<html>
<head>
<title>later;</title>
<link rel=”stylesheet” href=”/css/bootstrap.css”>
</head>
<body>
<div class=”container”>
Đây chỉ là CSS của Bootstrap; Bootstrap cũng đi với một vài files khác, bao gồm các icons, fonts và plugins jQuery.
Bạn có thể thêm nhiều files hơn vào dự án của bạn, hay sử dụng một công cụ để nhóm chúng tất cả lên để load chúng
là dễ dàng hơn.