Lite Server For Web App based on Node Server

Hôm này mình sẽ giới thiệu với mọi người một thư viện javascript tên là lite-server. Sở dĩ mình chọn lite-server để chia sẻ với mọi người là vì sự đơn giản, dễ cấu hình, tính tiện dụng cao của thư viện này trong việc xây dựng Single Page Application (SPA).

Lite-server sử dụng browserSync library để serve các static file content, watch các file html, css, js, detect changes, refresh the browsers và nhiều tùy biến khác.

Sau đây mình sẽ hướng dẫn cách cài đặt và sử dụng.

Môi trường: Đã cài nodejs, npm. Bật terminal, vào thưc mục project:

npm install lite-server --save-dev

Khi nó trong file package.json sẽ có thêm dòng "dev" : "lite-server"

  "scripts": {
    "dev": "lite-server"
  }

Ngay lúc này, chúng ta có thể start lite-server qua câu lệnh

npm run dev

Tiếp theo, chúng ta sẽ đi customize config file của BrowserSync nếu có nhu cầu thay đổi cổng, base directory hay các files để detect changes.

Tạo file bs-config.json file trong project folder, tùy biến các thuộc tính

{
  "port": 8000,
  "files": ["./public/**/*.{html,css,js}"],
  "server": { "baseDir": "./public" }
}

Config ở trên sẽ nói cho BS watch tất cả các file html, css, js bên trong thư mục public. Nếu phát hiện có sự tương tác thay đổi trong các file này. Trình duyệt sẽ được reload.![kf1mYhlyQ6aY55gdaIfV_featured-image.png]

public cũng là thư mục gốc mà lite-server sẽ serve. Default là sẽ mở file index.html trong thư mục public

Một ví dụ phức tạp hơn là modifile server middleware cho BrowserSync. Điều này yêu cầu dùng cú pháp

module.exports = function(bs) {
  return {
    server: {
      middleware: {
        // overrides the second middleware default with new settings
        1: require('connect-history-api-fallback')({
          index: '/index.html',
          verbose: true
        })
      }
    }
  };
};

Lưu ý là middleware library phải được cài đặt trong project trước đó.

-> Trên đây là các bước để config xong một http-server có khả năng serve static content, detect change và reload lại trang một cách rất đơn giản. Đây là chia sẻ theo những gì mình biết và tham khảo được. Nếu có comment gì vui lòng để lại bình luận ở bên dưới.

Cảm ơn đã đọc!

References:

• https://github.com/johnpapa/lite-server
• https://www.browsersync.io/docs