Express Generator là gì? - Tạo khung ứng dụng Node.js

vào

Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo khung ứng dụng bằng công cụ express application generator. Với một vài đoạn lẹnh, công cụ cung cấp cho chúng ta cấu trúc tệp cơ bản cho ứng dụng.
Theo mặc định, khung ứng dụng chứa một số tệp cần thiết cho dự án của bạn. Từ đó chúng ta có thể thêm file, tùy theo nhu cầu của dự án, khung xương ứng dụng giúp công việc của chúng ta được dễ dàng hơn mà không cần phải tạo lại dự án từ đầu.

Express development environment

Express development environment là cấu hình cho bất kỳ ứng dụng nào theo mô hình MVC, vì thế chúng ta cần cài đặt một vài thư viện trước khi bước vào development environment.
  • Cài đặt Node.JS - Nhấn vào đây để tải về NodeJs
  • NPM (Node Package Manager)
  • Express generator (Không bắt buộc)
  • Bất kỳ IDE nào như: Visual studio code , Sublime v.v.
  • Bất kỳ công cụ kiểm soát nguồn nào, như GIT

Express Generator là gì?

Express generator là công cụ toàn diện cho phép bạn nhanh chóng tạo ứng dụng node-js bằng thư viện express. nhờ vào express generator, bạn có thế chỉ định tùy thích template (view), CSS preprocessor,... cho project.

Cách dùng express generator

Như đã đề cập trước đó, chúng ta sẽ dùng generator trong Express để tạo khung ứng dụng. Trong đó gồm một vài file mặc định như: index.jade, error.jade, package.json etc. Hãy bắt đầu tạo ứng dụng demo.
Bước đầu tiên, ta cần cài đặt express generator, sau đó chỉ việc mở console và thực thi lệnh sau.
npm install -g express-generator
Kế tiếp, chung ta cần tạo ứng dụng, chỉ việc viết tiếp lệnh dưới:

express demoapp
  • Đến đây, chúng ta đã tạo được ứng dụng chỉ bằng 2 bước, bạn sẽ thấy màn hình kết quả sau trong console.
    express generator là gì
    Tạo ứng dụng với Express Generator
Đến đây, hãy thay đổi đường dẫn hiện có sang project vừa tạo bằng lệnh cd <project_name>, và cài đặt toàn bộ dependency với lệnh dưới.

npm install

  • Sau khi hoàn thành các bước trên, khung ứng dụng của chúng ta sẽ trông như screenshot sau
Tìm Hiểu Về Express Generator

Khung ứng dụng được tạo bằng Express Generator sẽ chứa một số file mặc định như bên dưới:
  • bin folder
  • public folder chứa css , javascript và images
  • Các tiệp liên quan đến routing
  • Tiệp cho view
  • Entry point của ứng dụng - app.js
  • package.json

Khi mở tệp package.json bạn có thể thấy một loạt dependecies đã cài đặt trong project:

{  
  "name": "demoapp1",  
  "version": "0.0.0",   
  "private": true,  
  "scripts": {  
    "start": "node ./bin/www"  
  },  
  "dependencies": {  
    "cookie-parser": "~1.4.3",  
    "debug": "~2.6.9",  
    "express": "~4.16.0",  
    "http-errors": "~1.6.2",  
    "morgan": "~1.9.0",  
    "pug": "2.0.0-beta11"  
  }  
}  

Trong phần dependency, bạn có thể thấy danh sách các package đã cài đặt.
Như - express, pug, http-errors etc ..
Theo mạc định, view của project đã tạo sẽ dựa trên engine jade, nhưng ta hoàn toàn có thể tạo view mới với các engine khác.

  • Jade (tên cũ, giờ đã đổi thành Pug)
  • Pug 
  • ejs - Embedded Javascript Template
  • hbs - Handlebar 
Để thay đổi engine template dùng cho project, chúng ta cần chỉ định engine template ta muốn dùng trong ứng dụng.

express -e --pug // To use pug engine  
express -e --ejs // To use ejs engine  
express -e --hbs // To use handlebars 

Một cách khác để đổi engine template theo lệnh dưới.

express demoapp --view=pug // or other like ejs or hbs   
  • Trong demo này, ta sẽ dùng pug làm engine template, bạn có thể thấy cấu trúc file giống hình dưới. 

    cấu trúc file của tempate engine
    cấu trúc file của tempate engine
  • Đến đay ta đã tạo được ứng dụng bằng Express Generator, đã đến lúc kiểm tra kết quả bằng url localhost:3000

Lời kết

Như vậy, ta đã tạo ứng dụng đơn giản chỉ với vài lệnh thôi. Tóm tắt các bước nhé:
  • Express Development Environment là gì
  • Bước chuẩn bị cần thiết để tùy chỉnh môi trường phát triển
  • Express generator là gì
  • Cách cài đặt Express generator
  • Thay đổi view engine mặc định của ứng dụng


Nhận xét

Đăng nhận xét